Como Criar Um Chat Com Node - Js

Como criar um chat com Node.
js
DEVMEDIA
Buscar
comentrios
favorito (2)
marcar como lido
para impresso
anotar
Front-end Magazine9 - ndice
Como criar um chat com Node.js

Veja nesse artigo como criar um chat completo usando
somente tecnologias front-end como jQuery, Socket.IO e
WebSockets.

Gostei (3)
(0)
Fique por dentro

Aplicaes de mensageria em tempo real so aplicaes cada vez
mais comuns nas realidades
das empresas e suas aplicaes web. Inmeras so as
solues de mercado que proveem esse
tipo de recurso, mas a maioria delas so
complexas, envolvem tecnologias server side, bem
como bancos de dados e outras
configuraes mais. Neste artigo voc ver como criar um web
http://www.devmedia.com.br/como-criar-um-chat-com-node-js/33719[24/11/2015 23:23:11]
chat completo
usando apenas jQuery, Socket.IO e suas abstraes dos WebSockets, no estilo
UOL
ou o antigo MIRC.
muito comum
encontrarmos na internet artigos explicando a criao de sistemas de chats, mas
a
maioria faz uso de uma linguagem de servidor, algumas linhas de AJAX e um
banco de dados, fora
as inmeras linhas de cdigo. Normalmente esse tipo de
projeto exige uma srie de
conhecimentos em linguagens de back-end, front-end e
um pouco de AJAX.
Com a criao da
plataforma Node.js, foi possvel que surgissem tambm servidores web nos mais
diversos protocolos de comunicao (HTTP, HTTPS, FTP, dentre vrios outros) e

dentre um deles,
est o WebSocket, um protocolo de comunicao suportado por
browsers exatamente com o
propsito de estabelecer entre o navegador e o
servidor uma comunicao bidirecional e em tempo
real, possibilitando uma troca
de mensagens mais gil sem o refresh de pgina e um tempo de
espera demorado.
Isso no lembra um
pouco o AJAX? Infelizmente o WebSocket no suportado por todas as
verses dos
browsers do mercado como o AJAX, mas as ltimas verses do Internet Explorer,
Firefox, Safari, Opera e Google Chrome j o suportam. No caso de navegadores

mais antigos,
seria necessrio programar em protocolos similares como um plano
B. Ao mesmo tempo, se
desenvolvssemos uma aplicao deste tipo puramente com o
Node.js teramos um trabalho muito
maior.
Visando atingir a
todos esses problemas, foi criado o mdulo do Node.JS, que cuida de todos os
protocolos de transporte que podem servir de plano B para os navegadores mais

antigos. Que
seriam os seguintes (nesta ordem): Adobe Flash Socket, AJAX long
polling, AJAX multipart
streaming, Forever iframe e o JSONP Polling. Opo o
que no falta, ento o prprio modulo fica
a cargo de realizar a comunicao
com o servidor pelo protocolo de transporte que lhe for mais
conveniente.
Portanto, neste
artigo vamos criar um projeto para conhecermos o bsico do Socket.IO e o que
ele
pode nos oferecer, sem o uso de banco de dados, AJAX e alguma outra
linguagem back-end,
usando apenas JavaScript, o Node.js e o jQuery.
Nosso Projeto
Antes
de entrarmos nos detalhes tcnicos, vamos entender o projeto que
realmente vamos
desenvolver no decorrer deste artigo. Trata-se de um aplicativo
de salas de chat simples, igual ao
antigo e popular servio do MIRC e as salas
de bate-papo dos antigos provedores de internet.
Os
usurios primeiro iro se deparar com uma tela para inserir o apelido, assim
que for inserido um
vlido (que no tenha nenhum outro usurio com o mesmo
nome) ser apresentada a tela de chat,
com um campo de mensagem, um boto
enviar, um painel onde aparecero todas as mensagens
e uma lista com o nome de
cada um dos usurios.
Mas
para no ficarmos dando rodeios em linhas interminveis de instrues de cdigo
sem sentido,
vamos realizar o projeto de forma iterativa, comeando com uma
aplicao bastante simples e
funcional. Conforme as etapas forem completadas,
vamos adicionar mais alguma funcionalidade,
para assim termos um aprendizado
onde acompanhamos o passo a passo do projeto j fazendo os
testes de tudo.
Um pouco sobre Socket.io

Este mdulo do Node.js
traz uma forma de conexo direta do browser do cliente com o servidor de
aplicao. A biblioteca funciona atravs de eventos, ou seja, o servidor ou o

cliente iro disparar
eventos para que haja respostas de uma das partes, veja
uma exemplificao na Figura 1.
Figura 1. Troca de
mensagens entre cliente e servidor
De certa forma, vamos usar dois mtodos

muitos bsicos do mdulo, que so o emit
e o on. Um
serve para efetuar a emisso
do evento e o outro para receber a resposta do mesmo. Cada um
dos lados da
aplicao, portanto, tero a biblioteca Socket.IO adicionada.
Alm de permitir a troca direta de

mensagens entre dois dispositivos, o Socket.IO tambm permite
o broadcast de
mensagens, o envio de um evento a todos os outros usurios conectados. O
broadcast pode ser tanto do cliente quanto do servidor, conforme demonstrado na

Figura
2.
Figura 2. Broadcast de mensagem enviada pelo servidor
Quando o usurio acessar a pgina, um

socket criado com o servidor e atravs deste socket
que realizada a troca
de mensagens entre um cliente e um servidor. Este, por sua vez, pode
tanto emitir
um evento para um nico Socket como para todos os sockets conectados a ele, o
que
chamamos de broadcast de mensagem.
Preparando
o ambiente
Caso voc no tenha ainda o ambiente do
Node.JS preparado, vamos ento ver juntos nesta seo
como deixar tudo pronto
para comearmos a desenvolver aplicaes do tipo. um processo
simples, j que
vamos apenas instalar o Node.js, neste artigo no vamos precisar de banco de
dados nem qualquer outra aplicao. Tudo se resumir a um editor de texto

simples e um terminal
(ou prompt) do seu sistema operacional.
Windows/MAC
Acesse o site oficial do Node.js (vide
seo Links) e baixe o arquivo de
instalao de extenso msi
para o seu tipo de Windows (32 ou 64 bits), ou o
arquivo .pkg para Mac. Abra o arquivo e execute
a instalao normalmente. Ao final
acesse o terminal (ou o prompt de comando) e execute o
comando node v (igual ao mostrado na Figura
3) e se a resposta for a verso instalada do
Node.js
isso quer dizer que o ambiente j est pronto.
Linux
Para o Linux, nas distribuies Debian e
Fedora, o processo bastante simples: a instalao
realizada pelo
repositrio de aplicaes. Vejamos primeiro os comandos a serem executados no
terminal do Ubuntu (vlidos tambm para distribuies Debian), como mostra a Listagem
1. Na
Listagem 2 vemos os comandos para as distribuies Fedora.
Listagem 1. Comandos
para instalao no Linux Ubuntu (Distribuies Debian)
sudo apt-get update

sudo apt-get install Node.js
sudo apt-get install npm
Listagem 2. Comandos de instalao para distribuies Fedora
sudo curl --silent --location https://rpm.nodesource.com/setup | bash sudo yum -y install Node.js
sudo yum y install npm
Ao final do processo, basta acessar o

terminal e digitar o comando Node.js v:
se a resposta for a
verso instalada do Node.js ento nosso ambiente j est
pronto para comearmos. O segundo
comando de instalao aps o Node.js
referente ao NPM (Node.js Package Manager),
um
sistema para o gerenciamento de pacotes que muito importante no
desenvolvimento de
aplicaes Node.js.
Caso voc tenha outra distribuio

Linux, como OpenSuse, Gentoo, Arch, acesse a pgina de
ajuda para instalao do
Node.js no Linux (confira a seo Links).
importante tambm
mencionar que no artigo colocamos o comando node em vez
de Node.js por este ser o
comando padro do Windows. Tenha em mente que sempre
que precisarmos inserir o comando
node utilize o Node.js.
Figura 3. Conferindo a verso do Node.js
Comeando
o projeto
Para comear vamos criar um diretrio
chamado ChatJS onde lhe for mais conveniente, mas que
seja de fcil acesso pelo
prompt. recomendvel colocar o diretrio do projeto no diretrio
/var/www/ (ou no C:\www\ para usurios Windows). Agora que j temos um diretrio
vamos criar
um arquivo chamado app.js, que ser o arquivo principal do nosso
servidor.
Como primeira parte vamos criar um

servidor bastante simples que s vai apresentar na tela do
navegador uma
mensagem de sucesso, como mostra a Listagem 3.
Listagem 3. Criando
uma aplicao de servidor
var app = require('http').createServer(resposta);

app.listen(3000);
console.log("Aplicao est em execuo...");
function resposta (req, res) {
res.writeHead(200);
res.end("Ola, o servidor esta funcionando corretamente.");
}
O script cria um servidor HTTP (que

estar escutando a porta 3000) que tem como mtodo principal
a ser requisitado
a funo resposta, que tem dois parmetros: req
(de requisio) e res (de
resposta).
Na resposta definimos um cdigo 200 de sucesso e finalizamos a mesma com uma
string
avisando que o servidor est ok.
Logo aps, vamos rodar o comando a

seguir, que ir executar nossa aplicao no prompt cmd:
node app.js
Repare que quando executar este cdigo

no prompt ele no ir imprimir nenhuma outra linha, isto
indica que nossa
aplicao est em execuo no momento.
Neste momento temos apenas o nosso

servidor Node.js rodando, inclusive o terminal apresentou o
contedo da funo console.log avisando que a aplicao
est em execuo, conforme
apresentado na Figura 4. Se voc acessar no browser o endereo http://localhost:3000/ ele s ir
mostrar a mensagem que passamos no mtodo end,

como podemos observar na Figura 5.
Figura
4. Mensagem que passamos via console.log
Figura
5. Resposta da aplicao no browser
Em seguida, vamos fazer nosso servidor

apresentar uma resposta em HTML e que ser a pgina
principal do nosso
chat. Para isso teremos de carregar o
mdulo do FileSystem, j que vamos
navegar no diretrio do projeto e abrir um
arquivo. Portanto, vamos alterar o nosso app.js para que
fique conforme a Listagem
4. Antes de realizar as alteraes, v at o
prompt e pressione Ctrl + C
(ou command + C) para terminar a execuo da nossa
aplicao no servidor.
Listagem 4. Apresentando
uma pgina HTML

var fs = require('fs');
app.listen(3000);
fs.readFile(__dirname + '/index.html',
function (err, data) {
if (err) {
res.writeHead(500);
return res.end('Erro ao carregar o arquivo index.html');
}
res.writeHead(200);
res.end(data);
});
}
Aps estas alteraes vamos novamente executar

o comando node app.js no prompt. Ao
acessarmos
novamente o endereo http://localhost:3000/
vamos nos deparar com a mensagem
Erro ao
carregar o arquivo index.html (Figura
6) isso por que ainda no temos um arquivo
index.html dentro do nosso
projeto.
Figura 6. Mensagem de erro para arquivo HTML no encontrado
importante lembrar tambm que o servidor

que criamos, at ento, no diferencia o caminho, ou
seja, voc pode passar
depois de http://localhost:3000/ qualquer
coisa que ele sempre ir
responder da mesma forma porque no implementamos um
modo de tratar estes caminhos. Logo,
voc pode muito bem chamar endereos como http://localhost:3000/chat, http://localhost:3000/erro,
http://localhost:3000/batata, etc., que
qualquer requisio que o servidor receber ir responder com
o mesmo mtodo (a
funo que chamamos de resposta, neste caso).
Vamos ento criar uma interface bastante

simples para o nosso chat. Crie um arquivo index.html
dentro do diretrio do
projeto (diretrio ChatJS). Neste arquivo insira um cdigo igual ao
demonstrado
na Listagem
5.
Listagem 5.
Cdigo HTML da aplicao de chat
<!DOCTYPE html>
<html>
<head>
<title>ChatJS - FrontEnd Magazine - DevMedia</title>
<link rel="stylesheet" type="text/css" href="/css/style.css" />
</head>
<body>
<div id="historico_mensagens"></div>
<form id=chat>
<input type='text' id='texto_mensagem' name='texto_mensagem' />
<input type='submit' value='Enviar mensagem!' />
</form>
</body>
</html>
Nosso
index, por enquanto, s vai contar com uma div chamada historico_mensagens que onde
estaro dispostas todas as mensagens
trocadas no chat e logo depois um formulrio com uma
caixa de texto e o boto
de envio de mensagem. Uma estrutura bastante simples de chat at o
momento.
Entretanto,
se voc agora tentar acessar o endereo http://localhost:3000/
ir receber a mesma
mensagem de erro. Isso acontece porque no reiniciamos
nossa aplicao de servidor, ento mais
uma vez vamos at o prompt, pressionamos
Ctrl + C e depois reexecutamos o comando node
app.js.
Acostume-se com este procedimento sempre que realizar alteraes de

cdigo no arquivo app.js.
J nos arquivos HTML e CSS no preciso fazer isto
porque eles atualizam com o refresh
de
pgina automaticamente. Agora que reiniciamos a aplicao de servidor a
nossa pgina HTML
est funcionando conforme a Figura
7.
Figura
7. Pgina HTML sem estilo CSS
Como voc deve ter percebido, j

deixamos uma tag link na tag <head> da nossa aplicao para
carregarmos o
nosso CSS. Vamos ento cri-lo para que fique com um design mais prximo de
um chat.
Dentro do diretrio do nosso projeto crie um outro diretrio chamado css e dentro dele
crie o arquivo style.css com o contedo igual ao demonstrado
na Listagem
6.
Listagem 6. Contedo do arquivo style.css
html, body{
font-family: Arial, Tahoma, sans-serif;
margin: 0;
padding: 0;
}
body{
background:#302F31;
padding:10px;
}
form{
margin:15px 0;
}
form input[type='text']{
border:2px solid #45C5BF;
border-radius: 5px;
padding:5px;
width:75%;
}
form input[type='submit']{
background: #45C5BF;
border:none;
border-radius: 5px;
color:#FFF;
cursor:pointer;
font-weight: bold;
padding:7px 5px;
width:19%;
}
#historico_mensagens{
background: #FFF;
height: 550px;
}
Se
reiniciarmos a aplicao Node.js, o estilo ainda no estar aplicado pgina
index. A razo
disso que o nosso app.js s trata de um path de requisio at o momento. Para resolver isso
vamos alterar
o nosso arquivo app.js para que ele carregue os arquivos que so passados na
URL
da solicitao, ao invs de colocarmos cada uma das URLs manualmente. Vamos

conferir melhor
as alteraes apontadas na Listagem 7.
Listagem 7. Alteraes de caminhos no

app.js

app.listen(3000);
var arquivo = "";
if(req.url == "/"){
arquivo = __dirname + '/index.html';
}else{
arquivo = __dirname + req.url;
}
fs.readFile(arquivo,
function (err, data) {
if (err) {
res.writeHead(404);
return res.end('Pgina ou arquivo no encontrados');
}
res.writeHead(200);
res.end(data);
}
);
}
Se reiniciarmos a aplicao node, desta

vez o nosso sistema reconhecer o estilo CSS que criamos
anteriormente,
conforme mostra a Figura 8.
abrir imagem em nova janela
Figura
8. Layout da aplicao
Enviando
mensagens
Agora temos o servidor funcionando, o
estilo CSS na nossa pgina e toda a estrutura HTML pronta.
Vamos a partir de
agora trabalhar na funo de envio de mensagens. Nossa aplicao vai
funcionar
se comunicando com o servidor node atravs da biblioteca client-side do
Socket.IO com
o jQuery fazendo a interao com a pgina.
Para isso vamos alterar o arquivo app.js,

como demonstrado na Listagem 8, e incluir uma linha de
um comando require logo no comeo do arquivo informando
que estamos incluindo na aplicao o
Socket.IO e que o mdulo ser armazenado
na varivel socket.
Listagem 8. Incluindo
o mdulo Socket.IO

var io = require('socket.io')(app);
...
Podemos
ver que o require claramente chama o
mdulo socket.io e estamos passando a varivel
app (referente ao nosso
servidor) no require do mdulo a fim
de facilitarmos uma parte do nosso
desenvolvimento que veremos mais frente.
Porm,
para darmos um require em um mdulo
precisamos instalar o mdulo na nossa aplicao.
Para isso acessamos o terminal
finalizando nossa aplicao Node.js com o Ctrl + C (ou command
+ C) e inserindo
o seguinte cdigo:
npm install socket.io
Logo
depois de instalar rode o comando para iniciar nossa aplicao novamente e
acesse o
endereo http://localhost:3000/ para
verificar se est tudo ok com a aplicao. Por enquanto nada
estar funcionando
porque no criamos nenhuma funcionalidade. Adicione tambm, antes do
fechamento
da tag de body do arquivo index.js, duas tags <script>, conforme a Listagem
9, com
as nossas bibliotecas que realizaro as
principais funes do chat. O jQuery facilitar o nosso
processo de
desenvolvimento e o Socket.IO para o client-side.
Listagem 9. Importando bibliotecas para

nossa aplicao client-side
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
</body>
</html>
Voc deve estar se perguntando o porqu

de colocarmos uma tag script com o caminho para o
Socket.IO que no existe, mas
no se preocupe, pois a biblioteca Socket.IO vai entender este
caminho
automaticamente e ir trazer para nossa aplicao a biblioteca client-side por
si s.
Lembre-se que j passamos antes aquela

varivel app no nosso require, exatamente para que a
nossa aplicao se integre

melhor com o mdulo. Agora que est tudo pronto vamos ao envio e
recebimento de
mensagens. Primeiramente, vamos abrir uma tag script (desta vez sem o atributo
src) onde estar todo o nosso cdigo do
lado cliente da nossa aplicao. Para comear temos que
programar um evento de
envio de mensagem, criando assim uma funo que ser atrelada ao
submit do formulrio de mensagem, como
mostram as alteraes na Listagem 10.
Listagem 10. Evento de envio de

mensagens
...
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = io.connect();
$("form#chat").submit(function(e){
e.preventDefault();
socket.emit("enviar mensagem", $(this).find("#texto_mensagem").val(),
function(){
$("form#chat #texto_mensagem").val("");
});
});
</script>
</body>
</html>
No cdigo JavaScript da pgina

declaramos uma varivel socket que
referente biblioteca
Socket.IO, que ser responsvel por todas as
funcionalidades do socket. A seguir declaramos um
evento submit do nosso formulrio em jQuery e passamos um preventDefault para que o formulrio
no
prossiga ao action do formulrio, j
que ns quem vamos cuidar da resposta do formulrio.
Em seguida, podemos ver que invocado o

mtodo emit da biblioteca, no qual
passamos como
parmetros trs coisas: o nome do evento (isso ser til no
servidor), os dados que estamos
emitindo (no caso s estamos enviando o
contedo do campo mensagem) e por
ltimo o call-back,
uma funo que
vai ser executada assim que o evento for emitido. Este ltimo, em especfico,
servir apenas para limpar o campo de mensagem, assim o usurio no tem que
ficar excluindo a
mensagem depois que mand-la.
Se testarmos agora nossa aplicao

(reiniciando-a e acessando o http://localhost:3000)
o envio de
mensagens no vai funcionar, nem mesmo o call-back para limpar o campo de mensagem porque
ainda no
colocamos a funcionalidade do que o servidor tem que fazer assim que receber
este
evento. Para isso, edite o arquivo app.js colocando o cdigo mostrado na Listagem
11 no fim do
mesmo.
Listagem 11. Recebendo

mensagens do cliente
...
io.on("connection", function(socket){
socket.on("enviar mensagem", function(mensagem_enviada, callback){
mensagem_enviada = "[ " + pegarDataAtual() + " ]: " + mensagem_enviada;
io.sockets.emit("atualizar mensagens", mensagem_enviada);
callback();
});
});
function pegarDataAtual(){
var dataAtual = new Date();
var dia = (dataAtual.getDate()<10 ? '0' : '') + dataAtual.getDate();
var mes = ((dataAtual.getMonth() + 1)<10 ? '0' : '') + (dataAtual.getMonth() + 1);
var ano = dataAtual.getFullYear();
var hora = (dataAtual.getHours()<10 ? '0' : '') + dataAtual.getHours();
var minuto = (dataAtual.getMinutes()<10 ? '0' : '') + dataAtual.getMinutes();
var segundo = (dataAtual.getSeconds()<10 ? '0' : '') + dataAtual.getSeconds();
var dataFormatada = dia + "/" + mes + "/" + ano + " " + hora + ":" + minuto + ":" +
segundo;
return dataFormatada;
}
Criamos um mtodo que atuar em resposta

conexo do cliente ao servidor. Quando o cliente
acessa a pgina ela dispara
este mtodo no servidor e quando este socket receber um mtodo
Enviar Mensagem acionamos um mtodo que
tem como parmetros os dados enviados (o campo
mensagem) e o call-back
que criamos no lado cliente.
Dentro deste mtodo colocamos a segunda

parte da funcionalidade: o mdulo vai emitir para todos
os sockets conectados
com o servidor (todos os usurios, por assim dizer) o evento Atualizar
Mensagens e passar tambm
qual mensagem nova foi enviada, com uma formatao de data e
hora entre
colchetes. Para fornecer a data e hora criamos uma funo a parte porque ainda
utilizaremos este mtodo mais algumas vezes ao longo do desenvolvimento. Logo

em seguida
chamamos o call-back que
criamos no lado cliente, que o mtodo para limpar os campos.
Finalmente,
edite tambm o arquivo index.html e crie o mtodo que vai atualizar as
mensagens
para os usurios. A ideia bem simples: vamos dar um append na div historico_mensagens (as
alteraes se encontram na Listagem
12). As linhas a seguir devem ser inseridas logo
depois do
processamento do submit do
formulrio.
Listagem 12. Atualizando

histrico de mensagens
...
// Contedo da funo
});
socket.on("atualizar mensagens", function(mensagem){
var mensagem_formatada = $("<p />").text(mensagem);
$("#historico_mensagens").append(mensagem_formatada);
});
O que percebemos aqui que basicamente

a conversa entre o servidor e o cliente igual dos dois
lados, isto , os dois
possuem eventos emit para emisso de
eventos, e on para recepo de
eventos. Acessando a aplicao no http://localhost:3000/

em duas abas (no se esquea de
reiniciar o aplicativo no prompt ou terminal
antes de acessar no browser) s enviar uma
mensagem e ver o poder do
Socket.IO em ao. A aplicao deve apresentar a mensagem como
mostra a Figura
9.
Figura 9. Envio de mensagens
A nossa aplicao ainda no atende a

todas as necessidades, pois ainda no temos nomes de
usurio, ento a coisa
fica um tanto quanto annima, mas vamos cuidar disso agora.
Dando
nomes aos usurios
Toda aplicao de chat recebe o usurio
com um formulrio para inserir o apelido e nesta seo
vamos criar um
formulrio simples onde o visitante vai colocar seu nome de usurio. Caso j
exista
algum com o mesmo nome vamos ento apresentar uma tela de erro avisando
ao nosso visitante,
do contrrio, apresentaremos a tela de chat normalmente.
Para no ficarmos repetindo cdigo e

criar mais um arquivo HTML vamos programar nossa pgina
index para que
apresente primeiro o formulrio de apelido. Se tudo der certo, a pgina esconde
o
formulrio e apresenta a sala de chat, assim ganhamos tempo e linhas de
cdigo para aproveitar
mais do nosso projeto.
Vamos comear ento pela edio do

arquivo index.html, embrulhando nossa sala de chat em uma
div com o id sala_chat. Crie tambm outra div com o
id acesso_usuario com um formulrio
bastante simples contendo apenas o campo de nome de usurio, conforme mostrado

na Listagem
13.
Listagem 13. Adaptando a pgina

principal para login de usurio
...
<div id='acesso_usuario'>
<form id=login>
<input type='text' placeholder='Insira seu apelido' name='apelido'
id='apelido' />
<input type='submit' value='Entrar' />
</form>
</div>
<div id='sala_chat'>
<form id=chat>
<input type='text' id='texto_mensagem' name='texto_mensagem' />
<input type='submit' value='Enviar mensagem!' />

</form>
</div>
...
Com o formulrio inserido na pgina

ainda precisamos editar o style.
Portanto, faa as alteraes
vistas na Listagem 14.
Listagem 14. Alterando

o CSS da aplicao
...
#sala_chat{
display: none;
}
#acesso_usuario{
height:30px;
left:50%;
margin-left:-160px;
margin-top:-15px;
position: fixed;
top:50%;
width:320px;
}
#acesso_usuario form{
margin:0;
}
Se atualizarmos agora o navegador (como

alterao de HTML e CSS no necessrio reiniciar a
aplicao rodando no
nosso prompt) vemos que agora nossa aplicao s mostra um formulrio
como
pretendamos, mas obviamente ele ainda no funciona, como mostra a Figura
10.
Figura
10. Formulrio de entrada
Lembrando-se da implantao do nosso

sistema de envio de mensagem podemos imaginar como
vai funcionar o lado cliente
desta funcionalidade, no? Vamos dar emit
em um evento chamado
entrar, que por
sua vez, vai mandar para o servidor o nome do usurio que foi digitado. J no
retorno do servidor como true vamos

simplesmente dar um hide no form e apresentar a nossa sala
de chat.
Agora vejamos quais so as alteraes

que devemos fazer no nosso arquivo index.html, conforme
a Listagem
15.
Listagem 15. Implantando

funes client-side de acesso de usurio
...
$("form#login").submit(function(e){
e.preventDefault();
socket.emit("entrar", $(this).find("#apelido").val(), function(valido){
if(valido){
$("#acesso_usuario").hide();
$("#sala_chat").show();
}else{
$("#acesso_usuario").val("");
alert("Nome j utilizado nesta sala");
}
});
});
...
Nosso sistema agora emite o evento para

o servidor, logo precisamos validar se o nome est
disponvel e depois
armazen-lo junto aos nomes dos demais usurios. Portanto, vamos fazer as
alteraes conforme demonstrado na Listagem 16.
Listagem 16. Implantao

da verificao de acesso dos usurios
var usuarios = [];
...
socket.on("entrar", function(apelido, callback){
if(!(apelido in usuarios)){
socket.apelido = apelido;
usuarios[apelido] = socket;
callback(true);
}else{
callback(false);
}
});
socket.on("enviar mensagem", function(mensagem_enviada, callback){
mensagem_enviada = "[ " + pegarDataAtual() + " ] " + socket.apelido + " diz: "
+ mensagem_enviada;
callback();
});
});
No comeo podemos ver a declarao de um

vetor chamado usuarios, que vai ser
nossa base de
nomes, uma estrutura bastante simples para armazenar apenas o
nome de cada um que acessar
nossa aplicao. Logo depois colocamos um mtodo de
resposta ao evento que criamos no clientside. Nos parmetros passamos apenas o
nome do usurio e o mtodo call-back
que criamos
anteriormente.
Ento fazemos uma verificao simples se

o usurio consta no nosso vetor de nomes de usurios e
se no constar primeiro
criamos um atributo apelido dentro do
socket, para assim acessarmos
depois este valor em outros mtodos. Tambm
adicionamos um ndice com o nome do usurio e
armazenamos o socket, assim, podemos depois resgatar o
mesmo atravs do nome de usurio;
isso ser til mais adiante.
Alm disso, tambm mudamos o formato da

mensagem, colocamos o apelido do usurio que
mandou a mensagem antes do texto
propriamente dito. Confira como ficaram as alteraes
reiniciando a aplicao
no prompt e posteriormente acessando o servidor local
(http://localhost:3000/).
Agora vamos criar uma lista de usurios

para sabermos quem est na nossa sala de chat e
tambm colocar o nome do
usurio na mensagem emitida, assim sabemos quem disse o qu.
Veja na Figura
11 como ir ficar nossa lista de usurios,
disposta ao lado direito do nosso painel de
mensagens.
Figura
11. Lista de usurios
Para isto, devemos primeiro alterar o

nosso index.html conforme a Listagem 17, colocando um
select de tipo multiple
(onde estar o nome dos usurios) que ficar ao lado direito do painel
principal da conversa. Alm do select

precisamos tambm colocar a funo que vai ser acionada
quando o servidor
emitir um evento para atualizar os usurios da lista.
Listagem 17. Adicionando

lista de usurios e nome de usurio na mensagem enviada
...
<select multiple="multiple" id='lista_usuarios'><option value=''>Todos</option>
</select>
<form id='chat'>
...
Se atualizarmos o browser agora veremos

que o design da pgina no ficou bom, por isso vamos
alterar mais um pouco o
nosso CSS conforme apresentado na Listagem 18. Para isso altere o
estilo da div historico_mensagens, colocando junto o
estilo da lista de usurios com alguns
atributos novos e inserindo mais alguns
trechos de cdigo ao final do arquivo style.css.
Listagem 18. Alterando o estilo da

aplicao
...
#historico_mensagens, #lista_usuarios{
background: #FFF;
height: 550px;
float:left;
margin-bottom: 10px;
width:75%;
}
...
#historico_mensagens{
border-right: 0;
}
#lista_usuarios{
border-left: 1px solid #45C5BF;
height: 554px;
width: 20%;
}
Por fim, na Listagem

19 vamos emitir o evento pelo servidor para
atualizar a lista de usurios e
mandar uma mensagem para todos avisando que um
novo usurio entrou na sala.
Listagem 19. Emitindo atualizao de

lista de usurios
...
io.sockets.emit("atualizar usuarios", Object.keys(usuarios));
io.sockets.emit("atualizar mensagens", "[ " + pegarDataAtual() + " ] " +
apelido + " acabou de entrar na sala");
callback(true);
}else{
callback(false);
}
});
...
Inclumos o cdigo onde emitido o

evento para que todos os sockets avisem que a lista deve ser
atualizada, alm
de termos passado todas chaves do nosso vetor de usurios. Logo em seguida
tambm emitimos outro evento, que j utilizamos anteriormente, o atualizar mensagens. Desta vez
especificamos a mensagem em si, passando o apelido do usurio.
Vamos colocar o mtodo de atualizao

dos usurios na nossa pgina index.html, conforme a
Listagem
20. O cdigo jQuery deve ser inserido no final do
contedo da tag <script>.
Listagem 20. Mtodo

de atualizao da lista de usurios
...
socket.on("atualizar usuarios", function(usuarios){
$("#lista_usuarios").empty();
$("#lista_usuarios").append("<option value=''>Todos</option>");
$.each(usuarios, function(indice){
var opcao_usuario = $("<option />").text(usuarios[indice]);
$("#lista_usuarios").append(opcao_usuario);
});
});
Agora nossa aplicao de chat est

ficando com cara de uma verdadeira sala de chat dos portais
de internet com
poucas linhas de cdigo e o melhor, no utilizamos banco de dados, apenas
simples comunicao entre cliente e servidor.
Vamos implantar mais uma funcionalidade

que vai ser disparada quando o usurio sair da sala.
Para isto vamos mais uma
vez alterar o nosso arquivo app.js com a alterao da Listagem
21 que
ser tambm colocada dentro do call-back do io connection.
Listagem 21. Tratamento

para quando o usurio sair da sala
...
...
socket.on("disconnect", function(){
delete usuarios[socket.apelido];
io.sockets.emit("atualizar mensagens", "[ " + pegarDataAtual() + " ] " +
socket.apelido + " saiu da sala");
});
});
...
Desta vez no precisamos criar um emit para este evento porque ele
nativo do Socket.IO. Alm
dele, temos o connect
(quando o socket realiza uma conexo com o servidor) e o message (para o
envio de mensagens - no utilizamos este mtodo
aqui no artigo para entendermos exatamente
como funciona a criao de eventos).
Na funo de call-back do disconnect

removemos o socket armazenado e o apelido da lista de
usurios. Logo aps
atualizamos a lista de usurios dos clientes e enviamos uma mensagem
avisando
que o usurio saiu da sala.
Finalizando
o projeto
Precisamos atribuir uma funcionalidade
nossa lista de usurios que est ao lado direito do nosso
painel de mensagens.
Quando tivermos algum nome selecionado enviaremos uma mensagem
privada ao
usurio. Trata-se de uma alterao simples porque ir seguir o mesmo estilo da
funo
de envio de mensagem, mas ao invs de usarmos um emit para todos os sockets, vamos emitir
apenas para um socket em
especifico.
Temos de fazer uma alterao rpida

tambm no mtodo de emisso do evento "enviar
mensagem", porque
estamos enviando apenas a mensagem que o usurio escreveu, mas a partir
de agora
teremos de mandar a mensagem e o usurio que ele selecionou. Conforme a Listagem
22 vamos primeiro alterar o mtodo submit do formulrio de chat na pgina

index.html.

parmetros a serem enviados no evento enviar mensagem
e.preventDefault();
var mensagem = $(this).find("#texto_mensagem").val();
var usuario = $("#lista_usuarios").val();
socket.emit("enviar mensagem", {msg: mensagem, usu: usuario}, function(){
$("form#chat #texto_mensagem").val("");
});
});
E agora no servidor vamos adicionar o

processamento para o usurio que deve receber a
mensagem especificamente, como
mostra a Listagem 23.
Listagem 23. Enviando mensagem privada
socket.on("enviar mensagem", function(dados, callback){

var mensagem_enviada = dados.msg;
var usuario = dados.usu;
if(usuario == null)
usuario = '';
mensagem_enviada = "[ " + pegarDataAtual() + " ] " + socket.apelido + " diz: " +
mensagem_enviada;
if(usuario == ''){
}else{
socket.emit("atualizar mensagens", mensagem_enviada);
usuarios[usuario].emit("atualizar mensagens", mensagem_enviada);
}
callback();
});
No programa, se o usurio for vazio, a

mensagem para todos e ento colocamos o cdigo para o
emit ser enviado para todos os sockets. Mas se for para um usurio
em especifico vamos dar um
emit no
socket que est armazenado na lista de usurios com o usurio que foi enviado. Ele
tambm ser emitido para o prprio usurio que mandou a mensagem, para que a
conversa fique
visvel para os dois.
Agora vamos reiniciar nossa aplicao no

terminal, abrir trs abas diferentes no nosso navegador,
entrar na sala nas
trs abas e verificar se est tudo ok com a sala de chat. Envie uma mensagem
privada para um dos trs usurios e uma mensagem para todos. O usurio que
mandou as duas
mensagens ir v-las. O usurio que recebeu a mensagem privada

tambm ir visualizar duas
mensagens e o terceiro ir ver apenas uma, que foi
dita a todos.
Contudo, ainda faltam duas coisas para o

nosso chat: um aviso dizendo que a mensagem privada
e uma diferenciao das
mensagens privadas, mensagens pblicas e mensagens do sistema. Uma
vez que j estamos
concentrados em uma nica funo no client-side, o mtodo de atualizar
mensagens, vamos fazer uma
alterao bastante simples nele.
Na Listagem 24 podemos ver que a alterao consiste em apenas modificar

os parmetros de
atualizar mensagens passando agora qual ser a classe daquela
mensagem: se uma mensagem
privada, uma mensagem de sistema, etc.
Listagem 24. Adicionando

classes para cada tipo de mensagem
...
socket.on("atualizar mensagens", function(dados){
var mensagem_formatada = $("<p />").text(dados.msg).addClass(dados.tipo);
$("#historico_mensagens").append(mensagem_formatada);
});
...
O lado ruim dessa implementao que teremos

de alterar todas as chamadas ao mtodo atualizar
mensagens. Devemos especificar, portanto, o tipo de mensagem enviada e na Listagem

25 temos
como ficar alguns trechos do app.js aps
as alteraes de chamada do evento.

chamada do evento atualizar mensagens
...
io.sockets.emit("atualizar mensagens", {msg: "[ " + pegarDataAtual() + " ] " + apelido
+ " acabou de entrar na sala", tipo: 'sistema'});
callback(true);
...
mensagem_enviada;
if(usuario == ''){
io.sockets.emit("atualizar mensagens", {msg: mensagem_enviada, tipo:'' });

}else{
socket.emit("atualizar mensagens", {msg: mensagem_enviada, tipo:'privada' });
usuarios[usuario].emit("atualizar mensagens", {msg: mensagem_enviada,
tipo:'privada' });
}
callback();
});
io.sockets.emit("atualizar mensagens", {msg: "[ " + pegarDataAtual() + " ] " +
socket.apelido + " saiu da sala", tipo: 'sistema'});
});
Se reiniciarmos a aplicao e acessarmos

no browser, ao inspecionar as mensagens com a
ferramenta de desenvolvedores,
veremos que agora as mensagens esto com as devidas classes.
Ento vamos
alterar o nosso arquivo style.css
para termos uma diferenciao visual, como mostra
a Listagem 26.
Listagem 26. Alteraes no estilo das mensagens
...
#historico_mensagens .sistema{
background-color: #45C5BF;
color: #FFF;
font-weight: bold;
}
#historico_mensagens .privada{
background-color: #CCC;
color: #000;
font-weight: bold;
}
O resultado
da nossa alterao de CSS vai ficar conforme a Figura 12. Lembrando que voc pode
modificar o CSS
vontade.
Figura
12. Padro das mensagens de chat
Outra coisa que deixa a desejar no

sistema de chat um histrico breve de mensagens assim que
o usurio entra na
sala. Seria bacana ele j ter pelo menos as ltimas cinco mensagens enviadas
na
sala antes do mesmo entrar. Podemos fazer isto criando outra varivel, abaixo
da varivel
usuarios chamada ultimas_mensagens, que ser um array. E no evento de enviar mensagens
vamos inserir a
mensagem no final do vetor e, caso o vetor tenha mais de cinco mensagens
armazenadas, removemos a mais antiga.
Todas as alteraes vo se concentrar no

arquivo app.js, mas vamos fazer por partes a alterao.
Primeiramente, criaremos
a varivel das mensagens e uma funo que vai armazenar as mesmas
nesta mesma
varivel, conforme demonstrado na Listagem 27. A primeira parte vai logo no
comeo do script e
a funo ser colocada no final do arquivo, logo depois da funo
pegarDataAtual.
Listagem 27. Guardando

mensagens em um histrico

var usuarios = [];
var ultimas_mensagens = [];
...
function armazenaMensagem(mensagem){
if(ultimas_mensagens.length > 5){
ultimas_mensagens.shift();
}
ultimas_mensagens.push(mensagem);
}
uma funo bastante simples, se o

tamanho do vetor for maior que 5, retirado o primeiro valor
da estrutura, e
depois colocado no final dela a mensagem que foi passada por parmetro.
Agora precisamos fazer com que todos os

eventos que emitem o evento de atualizar
mensagens
chamem esta funo passando como parmetro a mensagem em si. Vejamos
os trechos a serem
alterados no app.js primeiramente no evento de envio de
mensagem, previsto na Listagem 28.
Listagem 28. Chamando a funo para

guardar mensagens quando elas so enviadas
socket.on("enviar mensagem", function(dados, callback){

var mensagem_enviada = dados.msg;
var usuario = dados.usu;
if(usuario == null)
usuario = '';
mensagem_enviada;
var obj_mensagem = {msg: mensagem_enviada, tipo: ''};
if(usuario == ''){
io.sockets.emit("atualizar mensagens", obj_mensagem);
armazenaMensagem(obj_mensagem);
}else{
obj_mensagem.tipo = 'privada';
socket.emit("atualizar mensagens", obj_mensagem);
usuarios[usuario].emit("atualizar mensagens", obj_mensagem);
}
callback();
});
Tais alteraes ajudaro a deixar o

cdigo mais enxuto e sem repeties. Vamos analisar o passo
a passo: primeiro
criamos um objeto chamado obj_mensagem,
onde ficar armazenada a
mensagem e o tipo dela; importante armazenar o tipo para
depois diferenciarmos quando for
preciso apresentar o histrico para o usurio
que acabou de entrar na sala.
No else
da nossa condicional, que diferencia se a mensagem privada ou no, alteramos
o valor
do tipo de vazio para privada. E por fim armazenamos no nosso vetor a
mensagem enviada pelo
usurio. Agora na Listagem 29 alteramos o mtodo que chamado na sada do
usurio da sala
de bate-papo, afinal este mtodo tambm emite uma mensagem e
seria interessante guardarmos
no histrico.
Listagem 29. Armazenando mensagem de

sada da sala
var mensagem = "[ " + pegarDataAtual() + " ] " + socket.apelido + " saiu da sala";
var obj_mensagem = {msg: mensagem, tipo: 'sistema'};
});
Aqui a alterao seguiu a mesma linha

que na nossa Listagem 28, onde separamos os dados em
um objeto, emitimos a
mensagem como antes e por fim chamamos a funo. Esta a alterao
mais
simples at o instante.
Na Listagem
30 devemos alterar o mtodo de entrada do usurio. Esta parte envolve
mostrar as
mensagens armazenadas no histrico e depois emitir a mensagem de que
o usurio ingressou na
sala.
Listagem 30. Alterando o mtodo de entrada do usurio no chat

for(indice in ultimas_mensagens){
socket.emit("atualizar mensagens", ultimas_mensagens[indice]);
}
var mensagem = "[ " + pegarDataAtual() + " ] " + apelido + " acabou de entrar
na sala";
var obj_mensagem = {msg: mensagem, tipo: 'sistema'};
callback(true);
}else{
callback(false);
}
});
Dessa vez, primeiro imprimimos as

mensagens anteriores e depois armazenamos a mensagem de
entrada. Mas por que
temos de fazer isto nesta ordem? A razo para no mostrarmos duas
vezes a
mesma mensagem de que o usurio entrou na sala. Seno dado um emit na mensagem
de entrada.
Feitas as alteraes, um novo usurio

que entrar na sala ter um histrico breve das mensagens
trocadas antes dele
entrar na sala. Voc pode alterar o valor das mensagens que devem ser
exibidas,
basta alterar o mtodo que salva as mesmas. Abra duas abas no navegador e faa
uma
troca de mensagens, depois abra uma terceira para verificar se o terceiro
usurio recebeu as cinco
ltimas mensagens da sala, conforme demonstrado na Figura
13.
Figura
13. Painel de mensagens com histrico
prvio<
Com este projeto bastante simples e com

poucas dependncias e tecnologias conseguimos criar
em poucas linhas uma
aplicao bastante funcional e que serve bem ao propsito que
estabelecemos. Se
voc gostou mesmo deste projeto, voc pode estend-lo, talvez colocando um
painel de envio de emojis (o link

para baixar a biblioteca est na seo Links),
criando um painel
de admin que
consiga expulsar usurios, compartilhamento de imagens e vdeos dentre vrias
outras possibilidades.
Mas o poder do Socket.IO se estende a

mais solues que podem fazer com que sistemas que
antes dependiam de pginas back-end
e de um tempo de reposta de entrada e sada do servidor
agora possam contar com
o protocolo WebSocket para a troca mais gil de informaes.
Possibilitando
sistemas que acompanhem resultados de monitoramento ou at mesmo precificao
em tempo real para os usurios.
Links
Site oficial do Socket.IO
http://socket.io/
Site oficial do Node.js para download da plataforma
https://Node.js.org/
Ajuda para instalao do Node.js no Linux
https://github.com/joyent/node/wiki/
Installing-Node.js-via-package-manager#enterprise-linux-and-fedora
Repositrio GitHub do projeto deste artigo
https://github.com/Milleo/ChatJS
Biblioteca EmojiArea
https://github.com/diy/jquery-emojiarea
Rafael Milleo
Analista de sistemas com experincia h sete anos no mercado de desenvolvimento web, formado pela Universidade
Mackenzie com nfase em Sistemas Hipermdia. Tem experincia em agncias e grandes empresas do segmento de
TI.
Publicado em 2015
O que voc achou deste

post?
Gostei
(3)
(0)
+
Mais contedo sobre Front-end web
No h comentrios
Postar dvida / Comentrio
Meus comentarios
Publicidade
Mais posts
Artigo
Orientao a objetos com JavaScript

Artigo
Como criar um Blog com Django e Python - Parte 1

Artigo
Comunicao em tempo real com WebRTC

Revista
Revista Front-end Magazine 9

Revista
Revista Front-end Magazine 8

Artigo
Como otimizar a performance no front-end
Listar mais contedo
Anuncie | Loja | Publique | Assine | Fale conosco
DevMedia
Hospedagem web por Porta 80 Web Hosting

Como Criar Um Chat Com Node - Js

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Como Criar Um Chat Com Node - Js

Uploaded by

Copyright:

Available Formats

Como criar um chat com Node.

marcar como lido

Front-end Magazine9 - ndice

Como criar um chat com Node.js

Fique por dentro

Como criar um chat com Node.js

diversos protocolos de comunicao (HTTP, HTTPS, FTP, dentre vrios outros) e

Firefox, Safari, Opera e Google Chrome j o suportam. No caso de navegadores

protocolos de transporte que podem servir de plano B para os navegadores mais

Como criar um chat com Node.js

usando apenas JavaScript, o Node.js e o jQuery.

Um pouco sobre Socket.io

aplicao. A biblioteca funciona atravs de eventos, ou seja, o servidor ou o

Como criar um chat com Node.js

De certa forma, vamos usar dois mtodos

Alm de permitir a troca direta de

broadcast pode ser tanto do cliente quanto do servidor, conforme demonstrado na

Figura 2. Broadcast de mensagem enviada pelo servidor

Quando o usurio acessar a pgina, um

Como criar um chat com Node.js

dados nem qualquer outra aplicao. Tudo se resumir a um editor de texto

sudo apt-get update

Listagem 2. Comandos de instalao para distribuies Fedora

Como criar um chat com Node.js

sudo yum y install npm

Ao final do processo, basta acessar o

Caso voc tenha outra distribuio

Figura 3. Conferindo a verso do Node.js

Como primeira parte vamos criar um

Como criar um chat com Node.js

var app = require('http').createServer(resposta);

O script cria um servidor HTTP (que

Logo aps, vamos rodar o comando a

Repare que quando executar este cdigo

Neste momento temos apenas o nosso

mostrar a mensagem que passamos no mtodo end,

Como criar um chat com Node.js

Em seguida, vamos fazer nosso servidor

var app = require('http').createServer(resposta);

Aps estas alteraes vamos novamente executar

Como criar um chat com Node.js

Figura 6. Mensagem de erro para arquivo HTML no encontrado

importante lembrar tambm que o servidor

Vamos ento criar uma interface bastante

Como criar um chat com Node.js

Acostume-se com este procedimento sempre que realizar alteraes de

Como voc deve ter percebido, j

Como criar um chat com Node.js

Listagem 6. Contedo do arquivo style.css

Como criar um chat com Node.js

da solicitao, ao invs de colocarmos cada uma das URLs manualmente. Vamos

Listagem 7. Alteraes de caminhos no

var app = require('http').createServer(resposta);

Se reiniciarmos a aplicao node, desta

Como criar um chat com Node.js

abrir imagem em nova janela

Para isso vamos alterar o arquivo app.js,

var app = require('http').createServer(resposta);

Como criar um chat com Node.js

npm install socket.io

Listagem 9. Importando bibliotecas para

Voc deve estar se perguntando o porqu