Tags

,

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:

20150708-001

 

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.

20150708-003

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”.

20150708-004

 

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”.

20150708-005

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.

20150708-006

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.

20150708-007

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,

Anúncios