que o Socket.IO utilize-a para criar seu ponto de comunicação através do protocolo
HTTP.
var express = require('express')
, app = express()
, load = require('express-load')
, error = require('./middleware/error')
, server = require('http').createServer(app)
, io = require('socket.io').listen(server);
// ...código do stack de configurações...
// ...código da função load()...
io.sockets.on('connection', function (client) {
client.on('send-server', function (data) {
var msg = "<b>"+data.nome+":</b> "+data.msg+"<br>"; client.emit('send-client', msg);
client.broadcast.emit('send-client', msg);
});
});
server.listen(3000, function(){
console.log("Ntalk no ar.");
});
Instanciamos os módulos:
express, http e socket.io.
É ne-
cessário seguir esta ordem, pois o Socket.IO funciona a partir de uma
instância do módulo http.
Toda brincadeira começa a partir do evento:
io.sockets.on('connection').
Esta função espera um cliente interagir
com um de seus eventos internos.
Por enquanto, o único evento interno é o
client.on('send-server'), cuja sua execução ocorre quando um cliente en-
via uma mensagem para o servidor. Perceba que pouco código foi incluído e o servi-
dor responde a seus clientes através das funções client.emit('send-client')
e client.broadcast.emit('send-client'). Resumindo, o fluxo básico
é o cliente enviar uma mensagem para o servidor e o servidor responde o
próprio cliente (via
client.emit()) e seus demais clientes conectados (via
64
Casa do Código
Capítulo 6. Programando sistemas real-time
client.broadcast.emit()). Para compreender melhor, veja as ilustrações
abaixo:
Figura 6.3: Envia mensagens para o cliente ou servidor.
Figura 6.4: Envia mensagens para todos os clientes, exceto o próprio emissor.
Com o back-end do Socket.IO implementado, vamos modificar o front-end para
interagir neste meio de comunicação. Dentro de views/contatos/index.ejs
modificaremos a listagem dos contatos incluindo um link "Conversar , ele terá o path: /chat/email-do-contato, que será usado para criar a sala do chat respectiva para o seu contato.
65
6.3. Implementando um chat real-time
Casa do Código
<% contatos.forEach(function(contato, index) { %>
<tr>
<td><%- contato.nome %></td>
<td><%- contato.email %></td>
<td>
<a href="/contato/<%- index %>">Detalhes</a>
<a href="/chat/<%- contato.email %>">Conversar</a>
</td>
</tr>
<% }) %>
Vamos implementar o layout do nosso chat e principalmente os eventos de co-
municação do cliente para interagir com o servidor. Crie um novo controller em
controller/chat.js:
module.exports = function(app) {
var ChatController = {
index: function(req, res){
var resultado = {email: req.params.email,
usuario: req.session.usuario};
res.render('chat/index', resultado);
}
};
return ChatController;
};
Crie o seu respectivo routes routes/chat.js:
module.exports = function(app) {
var chat = app.controllers.chat;
app.get('/chat/:email', chat.index);
};
E, por último, crie sua view em views/chat/index.ejs. Utilizaremos javas-
cript puro para manipulação do html, mas sinta-se à vontade para utilizar qualquer
framework do gênero, como por exemplo: jQuery (http://jquery.com) ou ZeptoJS
(http://zeptojs.com) .
O importante é carregar o script /socket.io/socket.io.js para que a
brincadeira comece. Aliás, não se preocupe de onde veio esse script, pois ele é dis-
tribuído automaticamente pelo framework socket.io-client que já vem como
66
Casa do Código
Capítulo 6. Programando sistemas real-time
dependência do
Socket.IO, e ele é responsável pela comunicação do cliente com o
servidor.
É pela função io.connect que o cliente se conecta com o servidor e começa a
trocar mensagens com ele. Essa interação ocorre através do tráfego de objetos JSON.
Vamos incluir no index.ejs as funções de enviar e receber mensagens:
<% include ../header %>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('http://localhost:3000');
socket.on('send-client', function (msg) {
document.getElementById('chat').innerHTML += msg;
});
var enviar = function() {
var nome = document.getElementById('nome').value;
var msg = document.getElementById('msg').value;
socket.emit('send-server', {nome: nome, msg: msg});
};
</script>
<header>
<h2>Ntalk - Chat</h2>
</header>
<section>
<pre id="chat"></pre>
<input type="hidden" id="nome" value="<%- usuario.nome %>">
<input type="text" id="msg" placeholder="Mensagem">
<button onclick="enviar();">Enviar</button>
</section>
<% include ../exit %>
<% include ../footer %>
Em seguida, vamos reiniciar a aplicação com o comando node app.js e de-
pois acessá-lo no endereço http://localhost:3000 pelo browser.
Para entender melhor como tudo funciona, acesse o mesmo endereço em outro
browser para ter duas janelas na mesma aplicação. Cadastre dois usuários, cada um
em sua respectiva janela, em seguida adicione em contatos o nome e e-mail do outro
usuário, por exemplo, na janela do Usuário A adicione como contato os dados do