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>
NodoOne.cloud 