WebSockets: Vamos criar um chat com recurso à biblioteca Socket.io (2)

O termo sockets certamente que não lhe será estranho, pois, já o abordamos aqui. Hoje vamos falar sobre WebSockets, mais concretamente sobre a biblioteca Socket.io que permite criar projetos fantásticos, com comunicações em tempo real.

Aprenda como pode criar um chat usando a biblioteca Socket.io. Depois da parte (1), vamos agora mostrar como podem fazer broadcast das mensagens para que estas sejam apresentadas a todos os que estão ligados ao chat (servidor).

A biblioteca Socket.io permite desenvolver aplicações real-time e também comunicações bidirecionais entre cliente e o servidor.  Esta biblioteca funciona em qualquer plataforma e dispositivo, e garante um bom desempenho.

Chat

Para a criação de um chat vamos usar NodeJS e a biblioteca Socket.io. O objetivo é criar uma simples página HTML, onde o utilizador poderá escrever uma mensagem sendo que essa mensagem é de imediato enviada a todos os contactos.

Vamos começar...(parte 2)

Tal como referido, nesta parte vamos mostrar o código que será usado para fazer broadcast das mensagens para que estas sejam apresentadas a todos os que estão ligados ao chat (servidor). Para esse efeito o Socket.IO disponibiliza a função io.emit que pode ser usada da seguinte forma:

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

Por exemplo, se pretenderem enviar uma mensagem para todos podem usar a seguinte função.

io.on('connection', function(socket){
  socket.broadcast.emit('Ola');
});

Se pretenderem que quem envia também recebe a mensagem devem usar a função:

io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    io.emit('chat message', msg);
  });
});

Do lado do cliente, quando é capturado o evento "chat message",

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

O resultado deverá ser o seguinte:

E está feito. Se tudo estiver corretamente "programado", parabéns,pois, acabaram de desenvolver um chat com base na biblioteca Socket.IO.

Leia também...