Chat Simples com Node.js

/ edubertin

Geralmente apps de chat de tempo real, são muito complicados para desenvolver, diferente do popular Lamp(PHP), Socket.io é uma solução bem plausível para desenvolvimento de real-time chat.

Essa lib da Node.js, cria um canal de comunicação bi-direcional entre o cliente e o server. Podendo enviar sinal para todos os clientes presentes.

Será necessária uma configuração, primeiramente a instalação do Node.JS que pode ser encontrado em:

https://nodejs.org/en/

Depois de criado a pasta do nosso aplicativo um npm init irá gera o package.json, nosso pacote onde irá ter todas as libs que iremos usar em nosso projeto.

Pronto, agora podemos instalar nossa lib Express e começar nosso desenvolvimento do app, para instalar o express, digite esse comando no prompt dentro da pasta do seu projeto.

npm install express --save

Após instalar a lib express, iremos iniciar a programação do nosso APP. Com o index.js:

var app = require('express')();
 var http = require('http').Server(app);
 
 app.get('/', function(req, res){
   res.send('<h1>Olá Mundo</h1>');
 });
 
 http.listen(3000, function(){
   console.log('Servidor rodando na porta: 3000);
 }); 

Inicialmente, declaramos duas variáveis, uma do tipo express (nossa lib previamente instalada) e http onde iremos carregar nosso servidor http.

A função app.get irá redirecionar qualquer cliente que se conectar no path ‘/’ (raiz do programa) e irá enviar uma mensagem Olá Mundo, lembrando que req irá carregar qualquer requisição da função e res irá dar uma função de resposta para nossa função get APP.

Após servidor http criado e nossa rota com o app setado, chamaremos a função listen, que irá ouvir nossas requisições na porta 3000, ou seja, http://localhost:3000.

Lembrando que estamos trabalhando em ambiente localhost para desenvolvimento. Agora, iremos rodar nosso APP, para exemplificar oque desenvolvemos até agora.

No Prompt do comando iremos exexcutar:

node index.js

Ao acessar o endereço localhost, notamos que foi exibido nossa tela “Olá Mundo”, e no nosso prompt irá exibir a porta em que o server irá ouvir as solicitações.

Observamos que nosso aplicativo utiliza o res.send() para enviar nossa mensagem de “Ola Mundo”, porem é apenas uma string e seria inviável criar um html pelo res.send dentro do index.js. Então iremos redirecionar nosso GET para um endereço index.html.

app.get('/',function(req,res){
   res.sendFile(__dirname+'/index.html');
 });

Essa substituição do nosso APP get, irá redirecionar todos os métodos GET na pasta raiz do nosso APP para um endereço de html.

Nosso html de forma simplificada e mais didática(sem css e configs).

<!doctype html>
 <html>
   <head>
     <title>Socket.IO Exemplo (chat)</title>
   </head>
   <body>
     <ul id="messages"></ul>
     <form action="">
       <input id="m" autocomplete="off" /><button>Enviar</button>
     </form>
   </body>
 </html>

Nosso html tem uma simples lista que irá retornar as mensagens de todos os clientes, e um botão Enviar.

Após configurar o JS e montar nosso template em html, iremos importar a lib Socket.IO.

Essa lib é composta por duas partes:

  • A primeira é responsável por integrar nossa lib com o Server http. (Server-side)
  • Já a segunda, é responsável pelo carregamento de nosso browser (Client-side)

Para instalar nossa lib em nosso projeto, iremos apenas executar uma linha de comando em nosso prompt na raiz da aplicação.

npm install socket.io --save

Ao conferir seu package.json, observe que sua lib já foi incluída nas dependências do projeto.

Em index.js iremos declarar nossa variável io do tipo socket recebe do tipo http para ouvir todas as possíveis conexões http.

var io = require('socket.io')(http);

Após declarar nosso socket, iremos conectá-los.

io.on('connection', function(socket){
  console.log('Um usuário conectou.');
});

Será informado no nosso log do servidor quando um cliente conectar. Ao executar o código usando node index.js iremos observar que toda vez que nosso cliente requisitar por get nosso index.html, o mesmo irá executar a função de conexão com o socket.

Precisamos também criar uma função de retorno para quando nosso client desconectar.

io.on('connection', function(socket){
  console.log('Um usuário conectou');
  socket.on('disconnect', function(){
    console.log(' Um usuário desconectou');
  });
});

Agora temos uma conexão servidor-cliente, nosso próximo passo é enviar ao nosso cliente informações recebidas por todas as conexões de socket que tivermos.

Para isso, iremos utilizar no server-side, o emit.

Lembrando que temos as opções:

io.emit('evento', { for: 'everyone' });

Irá enviar um evento para todos os clientes. 

socket.broadcast.emit('Olá');

Irá enviar para todos os clientes com exceção de um específico socket.

Agora iremos pegar as mensagens de todos os clientes e enviar de novo para eles.

io.emit('chat message', msg);

E na versão browser (client-side) iremos adicionar a nossa tag Javascript uma função que recebe essa mensagem do servidor e salva na lista com id #m

<script>
  $(function () {
    var socket = io();
    $('form').submit(function(e){
      e.preventDefault(); // prevents page reloading
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
    socket.on('chat message', function(msg){
      $('#messages').append($('<li>').text(msg));
    });
  });
</script>
Exemplo
GitHub

Deixe um comentário