Sockt.IO - Um pacote Nodejs para WEB 2.0

Antes de falar sobre o Sockt.IO, primeiro vamos conversar sobre o NPM 1. Gerenciador de pacotes Node - NPM

Uma importe parte do estudo sobre o Node.js é conhecer e saber utilizar o gerenciador de pacotes node “Node Package Manager – NPM”, o NPM serve par instalar e publicar aplicativos node. Pode ser instalado seguindo os passos que se encontram no site:

http://npmjs.org/

Para instalar pacotes com o node basta usar o comando: npm install nome_do_pacote

Figura 2 – Instalando o pacote para manusear o MySQL com o Node usando o NPM.

2. Instalando e compreendendo o Socket.IO

Para instalar o pacote Socket.IO digite:

npm install socket.io

Socket.IO é um pacote para o Node.js criado por Guillermo Rauch nos laboratórios da LearnBoost que tem como objetivo criar aplicações de tempo real possível em qualquer navegador e dispositivo móvel, mascarando as diferenças entre os diferentes mecanismos de transporte [4]. De uma forma transparente esse módulo usa detecção de recurso para decidir qual a melhor forma de prover uma conexão em tempo real com qualquer navegador sem afetar a API, são estas as alternativas:

• WebSocket
• XHR multipart streaming
• Adobe® Flash® Socket
• ActiveX HTMLFile (IE)
• Server-Sent Events (Opera)
• XHR long polling
• JSONP Polling
• Forever Iframe

Para que o Socket.IO mantenha uma conexão permanente e em tempo real é importante ressaltar a necessidade de um objeto IO tanto na parte servidor quanto na parte cliente. Em ambos os lados o Socket.IO prove objetos e métodos que manipulam e tratam eventos de requisição e resposta.

var http = require("http"); var io = require("/usr/lib/node/socket.io"); objServidor = http.createServer(function(requisicao, resposta){ }); objServidor.listen(8080); var objListener = io.listen(objServidor); objListener.on("connection", function(objCliente){ console.log(“Alguém se conectou”); objCliente.on("message", function(mensagem){ objListener.broadcast(mensagem); }); objCliente.on("disconnect", function(){ console.log(“Alguém desconectou-se”); }); });

Código 4 – Código para criar um servidor HTTP e instancia do Socket.IO

Apos instanciar um objeto Socket.IO com o require usamos o método listen(, [options]), onde foi passado o objeto servidor que é uma instancia http.Server e está escutando na porta 8080, o segundo parametro foi suprimindo mas ele pode passar configurações como a porta, modo de transmissão, timeout ou mensagem de log. Este método retorna um objeto Listener, este objeto possui propriedades e métodos muito úteis.

Propriedades:

• server: A instancia process.http.Server.
• options: Opções que foram passadas combinadas com as padrões.
• clients: Array dos clientes. Obs:. Clientes desconectados são setados como NULL.
• clientsIndex: Um objeto de clientes indexado por seu id de sessão.

Métodos:

• on(event, callback): Adiciona um tratador de eventos ao Objeto cliente:
  • “connection”: Evento disparado quando o cliente se conecta ao servidor. Sua função de callback recebe como parametro um objeto Client.

• broadcast(msg, [except]): Envia a mensagem que é passada no primeiro parametro em broadcast, e opcionalmente pode receber uma lista de clientes que não receberão a mensagem.

O objeto Client pode ser tratado:

Propriedades:

• listener: O Listener a qual o cliente pertence.
• connected: Se o cliente está conectado ou não.
• connections: Número de vezes que o cliente se conectou.

Métodos:

• on(event, callback): Adiciona um tratador de eventos ao Objeto cliente:
  • “message”: Quando o servidor recebe dados do cliente. São função de callback recebe como parametro o conteiner de dados da mensagem.
  • “disconect”: Quando o cliente desconecta do servidor.

• broadcast(msg, [except]): Equivalente ao Listener::broadcast(msg, [except]).
• send(msg): Envia a mensagem passada por parametro ao servidor.

O Código 4 é um bom exemplo do código básico para criar um servidor http que pode fornecer comunicação em tempo real a diversos clientes, contudo é necessário criar um objeto Socket para cada usuário no lado cliente.

... ...

Código 5 – Trecho de código necessário na parte cliente para manter uma conecção em tempo real

No Código 5 foi demonstrado a porção de código necessária para manter um conecção em tempo real com o servidor. Imediatamente quando o servidor é iniciado ele provê uma API que contem a interface necessaria para que os clientes conectem-se ao servidor, para instanciar o objeto Socket.IO deve-se adicionar um link a pasta /socket.io/socket.io.js que está armazenada no servidor. Diferentemente do lado servidor usamos o objeto Socket.IO para instanciar um objeto Socket e não Listener, para isso foi usado o método Socket(host, [options]) , passando no primeiro parametro o endereçõ do servidor e que recebe opcionalmente no segundo parametro valores como porta, modo de transmissão, timeout ou mensagem de log, contudo, o tratamento dos eventos é semelhante.

Propriedades:

• options: Opções que foram passadas combinadas com as padrões.
• connected: Se o socket está conectado ou não.
• connecting: Se o socket está se conectando ou não.
• transport: A instancia do metódo de transporte.

Métodos:

• on(event, callback): Adiciona um tratador de eventos ao Objeto cliente:
  • “connect”: Disparado quando o cliente é conectado ao servidor.
  • “message”: Quando o servidor recebe dados do cliente. São função de callback recebe como parametro o conteiner de dados da mensagem.
  • “disconect”: Quando o cliente desconecta do servidor.

• connect(): Estabelece a conexão.
• disconnect(): Fecha a conexão estabelecida.

• send(msg): Envia a mensagem passada por parametro ao servidor.

3. Exemplo de uma plicação web com Node.js e Socket.IO

Para prova de conceito vamos criar um exemplo simples de um chat utilizando o Node.js e o pacote Socket.IO.

var http = require("http"); servidor = http.createServer(function(requisicao, resposta){}).listen(8080);

Código 6 – Criação do servidor http do chat

Para criar a resposta de cada cliente a conectar-se ao servidor usaremos os módulos de núcleo “url” e “fs”. Estes módulos servem para manipular e extrair informações da url e manipular aquivos respectivamente “file sistem”.

var http = require("http"); var url = require("url"); var fs = require("fs"); servidor = http.createServer(function(requisicao, resposta){ var caminho = url.parse(requisicao .url).pathname; switch (caminho){ case "/": case "/index.html": fs.readFile(__dirname + "/index.html", function(erro, data){ resposta.writeHead(200, {"Content-Type": "text/html"}); resposta.write(data, "utf8"); resposta.end(); }); break; default: resposta.writeHead(404, {"Content-Type": "text/plain"}); resposta.write("404 - Página não encontrada!", "utf8"); resposta.end(); } }).listen(8080);

Código 7 – Enviando uma resposta aos clientes

Para enviar uma resposta adequada ao cliente e não ter que escrever todo o código de retorno através do método write(), podemos manipular a url de requisição e abrir o arquivo desejado, então, passando como resposta. Do módulo “url” utilizamos o método parse(url) que cria um objeto URL com o parâmetro passado, possibilitando assim a extração de informações com métodos auxiliares.

Ex:. http://usuario:pass@teste.com.br:8080/site/index.html?nome=joao#perfil

• href: retorna toda a url: 'http://usuario:pass@teste.com.br:8080 /site/index.html?nome=joao#perfil'
• protocol: Retorna o potocolo: 'http:'
• host: Retorna o host completo com a porta: 'usuario:pass@teste.com.br:8080'
• auth: Retorna o usuário e a autenticação 'usuario:pass'
• hostname: Retorna o nome do host: 'teste.com.br'
• port: Retorna a porta: '8080'
• pathname: Retorna o caminho no host: '/site/index.html'
• search: Retorna os parametros com o ?: '?nome=joao'
• query: Retorna os parametros: 'nome=joao' ou {'nome':'joao'}
• hash: Retorna o sinalizador '#perfil'

Para abrir e ler o arquivo, usamos o método readFile(path, callback) do objeto fs que recebe no primeiro parâmetro o path do arquivo “o método global __dirname retorna o caminho absoluto até onde este arquivo se encontra” e o uma função de callback que recebe como parâmetro um retorno de erro e um objeto contendo o conteúdo do arquivo.

//arquivo do servidor completo var http = require("http"); var url = require("url"); var fs = require("fs"); var io = require("/usr/lib/node/socket.io"); servidor = http.createServer(function(requisicao, resposta){ var caminho = url.parse(requisicao .url).pathname; switch (caminho){ case "/": case "/index.html": fs.readFile(__dirname + "/index.html", function(erro, data){ resposta.writeHead(200, {"Content-Type": "text/html"}); resposta.write(data, "utf8"); resposta.end(); }); break; default: resposta.writeHead(404, {"Content-Type": "text/plain"}); resposta.write("404 - Página não encontrada!", "utf8"); resposta.end(); } }).listen(8080); var socket = io.listen(server); socket.on("connection", function(cliente){ socket.broadcast(cliente.sessionId+" conectou-se!", cliente.sessionId); client.on("message", function(msg){ socket.broadcast(cliente.sessionId+" disse: "+msg+" "); }); client.on("disconnect", function(){ socket.broadcast(cliente.sessionId+" desconectou-se!", cliente.sessionId); }); });

Código 7 – Enviando uma resposta aos clientes

Por fim manipulamos todos os eventos e deixamos o servidor pronto para receber requisições, basta criar o arquivo index.html que deve ficar na mesma pasta do servidor e que contem o código que possibilitará vários clientes se comunicarem em tempo real e de forma assíncrona.

Mensagem:  

enviar

Para que os clientes possam interajir com os outros criamos uma pagina html que tem uma tela de conteudo um campo de texto e um botão de enviar. Toda a parte de controle fica por conta do código javascript ans tags script.

4. Referências Bibliográficas

1. http://mashable.com/2011/03/10/node-js/

2. http://wiki.commonjs.org/wiki/Implementations/node.js

3. http://socket.io/