Seções iMasters
Redes e Servidores

Conectando no Socket.IO – o básico

Os WebSockets estão começando a se tornar disponíveis a mais navegadores. Na verdade, hoje, praticamente toda versão mais recente de cada navegador  os suporta, de acordo com o Can I Use. Mas a melhor parte é que você não precisa sequer de um navegador moderno com WebSockets disponíveispara, enfim, poder utilizar a comunicação em tempo real de entre o navegador e o servidor. O Socket.IO vai mostrar como ele é feito.

Segundo o site Socket.IO:

O Socket.IO pretende tornar possíveis os aplicativos em tempo real em todos os navegadores e dispositivos móveis, minimizando as diferenças entre os mecanismos de transporte diferentes. É 100% livre de cuidados em tempo real em JavaScript.

O Socket.IO oferece uma API de JavaScript simples, baseada em eventos que te permite comunicar entre o servidor e o cliente sem esforço e em tempo real. Seu mecanismo padrão é o WebSockets, mas se não for implementado no navegador do usuário, ele recorrerá à fallbacks, como Flash e AJAX. Isso o torna disponível para um grande número de navegadores, como você pode ver aqui.

A biblioteca Socket.IO convencional é escrita em JavaScript tanto para front end, quanto para back-end, por isso foi projetada para rodar em um servidor Node.js. É sobre isso que eu vou falar, mas você pode estar interessado em saber quais outros servidores rodam. Isso você pode ver na parte inferior da página principal do wiki Socket.IO.

Usando Socket.IO server side

A maneira mais fácil de obter a configuração do Socket.IO para uso no server side é instalá-lo via NPM:

npm install socket.io

Isso foi fácil. Agora temos de começar a usá-lo no nosso código do aplicativo do servidor. A primeira coisa que precisamos fazer é requerer a biblioteca e começar a prestar atenção nos eventos vindos do lado do cliente. Você pode ouvir por um servidor Express, ou apenas dizer-lhe para usar o seu próprio.

var io = require('socket.io'),
express = require('express');

// Via Express 3.x server
var app = express(),
server = require('http').createServer(app),
io = io.listen(server);
server.listen(80);

// Via Express 2.x server
var app = express.createServer(),
io = io.listen(app);
app.listen(80);

// Standalone
io = io.listen(80);

// Now let's set up and start listening for events
io.sockets.on('connection', function(socket) {

// We're connected to someone now. Let's listen for events from them
socket.on('some event', function(data) {

// We've received some data. Let's just log it
console.log(data);

// Now let's reply
socket.emit('event', {some: "data"});
});
});

Tem muita coisa acontecendo por aqui. Os três primeiros blocos só mostram uma maneira diferente para podermos configurar um servidor Socket.IO para ouvir o cliente. Note que 80 é o número da porta que você está escutando. Você pode muito facilmente ter Socket.IO em uma porta separada da qual o seu servidor de aplicativo normal está sendo executado, mas você definitivamente não precisa.

O próximo bloco de código é a parte interessante. Primeiro, nós chamamos io.sockets.on(‘connection’, function(socket) {…}), o qual apenas espera em volta de um cliente para tentar se conectar a ele. Depois de receber uma conexão, ele cria um objeto de socket e o passa para esta função de retorno. Este objeto é usado para se comunicar diretamente com este único cliente que se conectou. Daqui a pouco vou te mostrar como transmitir mensagens para cada cliente conectado. Por enquanto, porém, é preciso aprender a fazer isso com um único cliente.

Dentro deste callback, começamos a criar mais ouvintes com socket.on. No exemplo acima, estamos ouvindo o cliente para emitir “um acontecimento”. Quando um cliente emite a mensagem, o callback enviado para o socket.on será chamado. Observe que a função de retorno de chamada possui um argumento (de dados) que contém os dados enviados com a mensagem do cliente. Na nossa função de callback nós apenas o registramos. Então, emitem uma mensagem de volta para o mesmo cliente com socket.emit. O primeiro argumento que passamos é o nome da mensagem ou evento que o cliente deve ouvir, similar à maneira que nós estamos ouvindo mensagens do cliente. Em seguida, passamos todos os dados que desejamos enviar junto com a mensagem.

153093-1358524505

É realmente muito simples. Nós ouvimos mensagens do cliente e reagimos a elas e enviamos mensagens para ele. Como eu disse anteriormente, você também pode transmitir mensagens para todos os clientes conectados e não apenas a um específico. Por exemplo, no caso de uma sala de bate-papo, cada vez que alguém envia uma mensagem ou se conecta gostaríamos que todo mundo pudesse vê-la.

io.sockets.on('connection', function(socket) {
// We're connected to someone now. Let's listen for events from them
socket.on('chat message', function(msg) {
io.sockets.emit('message', msg);
});
});

Em vez de chamar emit no socket, chamamos isso de io.sockets, que enviará a mensagem para todos os clientes.

Passando para o cliente

Você viu como era simples usar o Socket.IO no back-end corretamente? É simplesmente um sistema de mensagens nos dois sentidos baseado em eventos. A simplicidade da API back-end também se transfere para o front end. O front end da API é essencialmente o mesmo. Antes de podermos dar uma olhada na API, porém, temos que adicionar o script para o nosso aplicativo.

Levei um bom tempo para encontrar o script do lado do cliente. Os artigos na internet não oferecem muita ajuda. No entanto, eu consegui descobrir que tem um repositório GitHub separado para o script de cliente Socket.IO. Você pode encontrar o arquivo que deseja na pasta “dist”. Eu uso ele desta maneira, porém esta não é a única maneira de servir o JavaScript do lado do cliente para o navegador. Acontece que o servidor back-end Socket.IO te servirá o script front end, aí basta apontar para a URL do servidor de IO e adicionar “/ socket.io / socket.io.js”. Se você é uma dessas pessoas legais, que estão usando a mesma porta que o servidor Express, você pode usar uma URL relativa para o script:

<!– Normally –>
<script src="http://<uri:port>/socket.io/socket.io.js"></script>

<!– If same port as Express –>
<script src="/socket.io/socket.io.js"></script>

Agora podemos usar o script! Primeiro, precisamos conectar com o back-end. É muito simples, basta chamar uma função e dar a ela a URL do servidor Socket.IO:

var socket = io.connect("http:///");

Agora vamos usar o socket de uma maneira muito semelhante à forma como ele foi usado no back-end:

socket.on("connect", function() {
// Do stuff when we connect to the server
});

socket.on("some event", function(data) {
// Log the data I received
console.log(data);

// Send a message to the server
socket.emit("other event", {some: "data"});
});

Como você pode ver, é diferente quando se tenta obter uma conexão, mas uma vez que ela é feita, é essencialmente o mesmo código que você usa no back-end. Eu acho que é semelhante e simples o suficiente, a ponto de eu não me incomodar em explicá-lo.

Então, isso foi uma introdução decente, mas você provavelmente quer mais, né? Bem, tem muito mais no que se aprofundar nesse assunto, mas este artigo já está um pouco longo, então vamos deixar isso para depois. No próximo artigo vamos discutir namespacing, configuração de armazenamento e muito mais.

Conclusão

Duas palavras para resumir isso: impressionante e simples. Ele cria uma super API baseado em eventos simples que nos permite que os nossos aplicativos se comuniquem prá lá e pra cá entre o front e back ends sem esforço e em tempo real. Se algo acontecer no servidor, os usuários podem ser imediatamente inseridos na informação. A coisa mais difícil de usar o Socket.IO é decidir os nomes para as mensagens.

***

Artigo original disponível em: http://www.joezimjs.com/javascript/plugging-into-socket-io-the-basics/

Comente também

2 Comentários

Marcos

Ótimo artigo, pena que na BlueHost eu não consigo instalação de Node.js em um servidor compartilhado. Eu vou ter que contratar uma VPN, no mínimo, pra ter isso funcionando?

Qual a sua opinião?