Integração do Change Streams do MongoDB com Socket.IO
Avalie esse Tutorial
O guia de IntroduçãodoSocket.IO fornece uma boa introdução ao Socket.IO. O guia agrupa o servidor e o cliente em um único aplicativo, onde as mensagens enviadas por meio de um formulário de entrada HTML são recebidas e exibidas na página.
Como o MongoDB oferece suporte a uma estrutura de eventosexcepcional própria, este tutorial demonstrará como propagar eventos emitidos do MongoDB por meio do Socket.IO. Para manter as coisas consistentes, tentarei espelhar o guia de Introdução ao Socket.IO o máximo possível.
Vamos começar...
Assim como no guia de Introdução do Socket.IO, vamos configurar uma página da Web HTML simples; no entanto, em nosso exemplo, ela só exibirá uma lista de mensagens -- não haverá formulário de entrada.
Primeiro, vamos criar um arquivo de manifesto
package.jsonque descreve nosso projeto. Recomendamos que você o coloque em um diretório vazio dedicado (chamarei demongo-socket-chat-example).
Em seguida, use
npm para instalar express:One Express está instalado, podemos configurar um arquivo
index.js que configurará nosso aplicativo.Isso significa que:
- O Express inicializa o
apppara ser um manipulador de função que você pode fornecer a um servidor HTTP (como visto na linha 4). - Definimos um manipulador de rota / que é chamado quando acessamos nosso site inicial.
- Fazemos o servidor HTTP escutar na porta 3000.
Se você executar
node index.js, verá o seguinte:
Até agora, em
index.js, estamos chamando res.send e passando uma string de HTML. Nosso código pareceria muito confuso se apenas colocássemos todo o HTML do aplicativo lá, então vamos criar um arquivoindex.html e exibi-lo.Vamos refatorar nosso manipulador de rota para usar
sendFile em vez disso.Aqui está um arquivo
index.htmlsimples para exibir uma lista de mensagens com alguns estilos incluídos:Se você reiniciar o processo (pressionando Control+C e executando
node index.js novamente) e atualizar a página, ela deverá ficar assim:
Como você está aqui, estou presumindo que você já tem acesso a um cluster MongoDB. Caso contrário, basta seguir estas instruçõesCriar um cluster MongoDB .
Observe que um cluster (conjunto de réplicas) é necessário porque usaremos change stream, que exigem um oplog. No entanto, não há necessidade de se preocupar, pois é fácil configurar um único conjunto de réplicas de nó.
Para este exemplo, criarei um banco de dados
chat com uma coleçãomessages junto com um registro inicial que usarei posteriormente para validar a conectividade com o MongoDB do meu aplicativo cliente:
Para evitar o armazenamento de credenciais do MongoDB em nosso código de aplicativo, usaremos dotenv para ler a connection string do MongoDB de nosso ambiente. Assim como no framework
express, use o npm para instalar o dotenv:Crie um arquivo
.envcom a seguinte variávelMONGODB_CONNECTION_STRING:Em seguida, adicione o seguinte ao seu
index.js:Se você reiniciar o processo (pressionando Control+C e executando
node index.js novamente), poderá verificar se seu ambiente está funcionando corretamente:
Use o npm mais uma vez para instalar o driver Node.js:
Adicione o seguinte código ao seu
index.js:Reinicie seu aplicativo e você deverá ver o seguinte
Para obter mais informações, este Quick Start do MongoDB Node.js fornece uma excelente introdução à incorporação do MongoDB em seus aplicativos Node.js.
Queremos ser alertados sempre que uma nova mensagem for inserida no banco de dados. Para fins deste tutorial, também observaremos as atualizações de mensagens. Substitua as três linhas do código de teste de query em
index.js pelo seguinte:Em seguida, edite e/ou insira algumas mensagens:
Socket.IO é composto de duas partes:
- Um servidor que se integra (ou é montado) no Node.JS HTTP Server socket.io
- Uma biblioteca de cliente que carrega no lado do navegador socket.io-client
Durante o desenvolvimento, o
socket.io atende ao cliente automaticamente para nós, como vamos ver, então, por enquanto, só precisamos instalar um módulo:Isso instalará o módulo e adicionará a dependência a
package.json. Agora vamos editar index.js para adicioná-lo:Agora, em
index.html, adicione o seguinte snippet antes de </body> (tag de fim de corpo):O próximo objetivo é emitir o evento do servidor para o resto dos usuários.
Para enviar um evento para todos, o Socket.io nos fornece o
io.emit() método , que tem a seguinte aparência:Então, aumente nosso código de fluxo de alterações com o seguinte:
E, no lado do cliente, quando capturarmos um evento de "mensagem de chat", nós o incluiremos na página. O código JavaScripttotal do lado do cliente agora equivale a:
E isso conclui nosso aplicativo de chat em cerca 80 linhas de código! É assim que ele aparece no cliente web quando as mensagens são inseridas ou atualizadas em nossa
chat.messagescollection em MongoDB: