Você já perceberam que estamos sendo invadidos por modelos de aplicações web conectadas? Sim, conectadas… O que antes era “heresia” (Sempre que abrir uma conexão, feche-a filho!) agora vem mudando seu rumo.
Componentes como Socket.io e SignalR permitem que sua aplicação fique conectada o tempo todo com seu servidor. O que isso significa? Que podemos ser notificados pelo servidor sobre mudanças, que temos informações em tempo real, que é tudo muito instantâneo.
Antes de começar…
Há um tempo atrás, participei de um projeto que tinha um chat feito com Socket.io e estava sendo hospedado no Microsoft Azure, mais especificamente em um Web App do Microsoft Azure.
O que acontece é que a hospedagem de Web Apps no Azure possui um limite de conexões. Então, antes de hospedar sua aplicação você precisa verificar se o servidor suporta WebSockets e a quantidade de conexões simultâneas.
Para o Microsoft Azure Web Apps, os valores são:
- Free: (5) concurrent connections per website instance
- Shared: (35) concurrent connections per website instance
- Basic: (350) concurrent connections per website instance
- Standard: no limit
Fonte: https://azure.microsoft.com/blog/2013/11/14/introduction-to-websockets-on-windows-azure-web-sites/
Bom, agora que sabemos um pouco sobre infraestrutura, let’s code!
Iniciando a aplicação
Para este exemplo, vamos baixar todos os pacotes pelo NPM, então para começar, abra um terminal, crie uma pasta chamada “chat” (Eu criei em “c:\dev\chat”), e navegue para esta pasta e execute o comando:
npm install
Pode dar enter para todas as opções, e isto vai gerar um arquivo package.json na raiz da pasta.
Agora é hora de instalar os pacotes necessários, então execute o comando:
npm install angular express@4.10.2 socket.io --save
Note que temos a instalação de vários pacotes, separados por um espaço em branco. Na instalação do “express” temos a versão sendo especificada pelo “@” e no final temos um “–save”, que vai escrever estes pacotes como dependências no nosso “package.json”.
Iniciando o servidor
Para iniciar, precisamos criar um arquivo “index.js” na raiz da pasta, com o seguinte conteúdo:
Uma das coisas que mais gosto do Node é a simplicidade com que as coisas podem ser construídas nele. Nas linhas superiores, temos as declarações das variáveis “app” e “http”, já instanciando os módulos deles.
O “app.get” fica ouvindo uma URL e responde a sua chamada, que neste caso é um simples envio de uma tag HTML.
Por fim temos a inicialização do servidor HTTP, ouvindo na porta 5002.
Voltando para o terminal, basta executar o comando abaixo para iniciar a aplicação:
node index.js
Feito isso, abra seu browser e navegue para a URL http://localhost:5002 e aqui está nossa aplicação 🙂
Melhorando nosso código, não seria “inteligente” deixar a o retorno da nossa requisição (res.send…) retornar uma tag, então vamos mudá-lo para retornar um arquivo HTML, assim podemos manipulá-lo sem a necessidade de parar a aplicação.
Para isso, substitua a linha cinco por:
res.sendFile(__dirname + ‘/index.html’);
Feito isso, sempre que navegarmos para a URL padrão (http://localhost:5002/) será servido um arquivo “index.html” que deve estar na raiz da pasta. Vamos então criar este arquivo, conforme o código abaixo.
Adicionando Socket.io
A primeira coisa que precisamos fazer é inicializar uma instância do Socket.io e passar o objeto “http” como parâmetro para ele. Isto pode ser feito adicionando a linha abaixo logo após a instância do objeto HTTP na linha três (var http = require…).
var io = require('socket.io')(http);
Feito isto, já podemos ouvir os eventos do Socket.io, como o “connection”, que é disparado toda vez que um usuário se conecta. Para isto, vamos adicionar o seguinte código ao arquivo “index.js”.
Pronto, por hora nosso backend está completo… Agora precisamos escrever o JavaScript do frontend para que nossa página se conecte ao socket que criamos.
Adicione o seguinte trecho de código antes da tag “</body>” do arquivo “index.html”. Note que referenciamos o Socket.io (Versão client) e iniciamos uma variável chamada “socket”.
Feito isto, vamos voltar ao terminal e executar novamente a aplicação (Caso sua aplicação esteja rodando, aperta CTRL+C para parar) executando o comando “node index.js” novamente.
No browser, atualize a página. Agora você verá a seguinte mensagem no terminal.
Um usuário se conectou
Existem vários outros listeners como “disconnect” para disparar um evento quando o usuário se desconectar, mas não vou entrar em detalhes aqui.
Emitindo eventos
A primeira coisa que precisamos fazer para emitir eventos é definir um escopo utilizando “socket.on(‘MEUESCOPO’…”, isto retornará uma função, com a mensagem sendo recebida via parâmetro. Feito isto, podemos utilizar o “io.emit” para enviar a mensagem para todos conectados neste escopo.
Feito isto, basicamente repetimos o mesmo processo no JavaScript do frontend. Ao clicar no botão enviar, vamos realizar um “socket.emit” para o escopo “message” que definimos. Depois vamos criar um listener (socket.on(‘message’…) onde, ao chegar uma nova mensagem, vai adicioná-la a lista de mensagens.
E pronto! Nosso chat está terminado… Abra duas, três, quatro abas no seu navegador e você já pode conversar com suas várias personalidades 🙂
O código completo você encontra aqui: https://github.com/andrebaltieri/node-socket-chat e para rodar o exemplo você precisa executar o comando “npm install” na raiz da pasta.
O que acharam? Simples né!
Fonte: http://socket.io/get-started/chat/
Abraços,
@andrebaltieri 