Pesquisar

Postagens populares

terça-feira, 2 de agosto de 2011

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

Chat Node.js+Socket.IO



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/

Nenhum comentário: