tutorial node chat

•

ESTÁCIO

1

0

1

0

1

Fran_ Oliver

25/04/2018

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Programação Web

1.863 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

Tutorial node.js
Criando um chat com Node.js e 
Socket.io
Ferramentas necessárias:
módulo express-generator
npm install -g express-generator
deixando projeto preparado para o Git e passando o nome da pasta onde o projeto será 
armazenado.
express -e --git chatdemo
baixar todas as dependências necessárias para o básico funcionar
cd chatdemo && npm install
dependência do módulo Socket.io
npm install -S socket.io
Para deixar nosso servidor de chat já esperando conexões, 
abra o seu bin/www (que não possui extensão mas pode 
ser aberto por qualquer editor) e inclua o seguinte trecho 
de código
var io = require('socket.io')(server);
io.on('connection', function(socket){
 console.log('a user connected');
});
deve ficar depois do comando createServer
retorne à raiz do projeto e execute-o através do comando 
abaixo:
npm start
Abra seu navegador na URL localhost:3000
Criando a aplicação 
web
Na pasta views do seu projeto você encontrará arquivos .ejs que são as interfaces/layouts da 
sua aplicação web. Crie um novo arquivo chat.ejs 
Coloque o seguinte codigo dentro
<!doctype html>
<html>
 <head>
 <title>Socket.IO chat</title>
 <style>
 * { margin: 0; padding: 0; box-sizing: border-box; }
 body { font: 13px Helvetica, Arial; }
 form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
 form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
 form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
 #messages { list-style-type: none; margin: 0; padding: 0; }
 #messages li { padding: 5px 10px; }
 #messages li:nth-child(odd) { background: #eee; }
 </style>
 </head>
 <body>
 <ul id="messages"></ul>
 <form action="">
 <input id="m" autocomplete="off" /><button>Send</button>
 </form>
 </body>
</html>
na pasta routes e abra o arquivo index.js 
router.get('/chat', function(req, res){
 res.render('chat', {});
});
Isso quer dizer que, quando chegar uma requisição GET em /chat, 
renderizaremos a view chat.ejs. O resultado você confere abaixo, 
mandando rodar e acessando /chat no seu navegador:
O próximo passo é ajustar o lado do cliente para que ele se 
conecte em nosso servidor assim que entrar nessa tela. Para fazer 
isso, abra o nosso arquivo views/chat.ejs e inclua o seguinte trecho
de código antes da tag </body>, lá pelo final do documento:
<script src="/socket.io/socket.io.js"></script>
<script>
 var socket = io();
</script>
Para ver se isto está funcionando, mande rodar novamente a sua 
aplicação e acesse a tela de chat, depois olhe no console. Acesse 
em várias abas diferentes e verá o comportamento abaixo no 
console:
Se quisermos saber também quando um usuário se desconectou 
do chat (ou seja, fechou a janela do navegador), podemos tratar 
isso com o evento disconnect. Lá em nosso bin/www, onde 
iniciamos o servidor de chat, altere o código para que seja 
impresso no console quando o usuário deixa a sala de chat:
var io = require('socket.io')(server);
io.on('connection', function(socket){
 console.log('a user connected');
 socket.on('disconnect', function(){
 console.log('user disconnected');
 });
});
Programando o chat
Agora vamos programar o client-side da nossa aplicação para que 
quando o botão Send seja clicado, um evento ‘chat message’ seja 
disparado ao servidor com a mensagem escrita. Esse código deve 
ir no chat.ejs, no final do arquivo, substituindo o código 
anteriormente adicionado:
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
 $(function () {
 var socket = io();
 $('form').submit(function(){
 socket.emit('chat message', $('#m').val());
 $('#m').val('');
 return false;
 });
 });
</script>
Agora temos de fazer com que nosso chat-server esteja preparado
para lidar com esse evento. Sendo assim, abra o seu bin/www 
novamente e modifique o código do seu chat-server como abaixo:
var io = require('socket.io')(server);
io.on('connection', function(socket){
 console.log('a user connected');
 socket.on('chat message', function(msg){
 console.log('message: ' + msg);
 });
 
 socket.on('disconnect', function(){
 console.log('user disconnected');
 });
});
Agora nosso chat-server já está recebendo mensagens. Se você 
executar a aplicação e escrever e enviar algumas mensagens, vai 
ver elas escritas no terminal do console.
Aqui a comunicação está sendo unidirecional: somente o server 
está recebendo as mensagens dos clientes. Nosso próximo passo é
fazer com que as mensagens recebidas pelo server sejam 
propagadas para os clientes que estão na mesma sala de bate-
papo. Para fazer isso, vamos mexer novamente no código do nosso
chat-server em bin/www:
var io = require('socket.io')(server);
io.on('connection', function(socket){
 console.log('a user connected');
 socket.on('chat message', function(msg){
 console.log('message: ' + msg);
 io.emit('chat message', msg);
 });
 
 socket.on('disconnect', function(){
 console.log('user disconnected');
 });
});
Para fazer a propagação da mensagem para todos os clientes, 
usamos o io.emit, passando o nome do evento que queremos 
propagar e os dados do evento, que aqui no caso é apenas a 
mensagem crua.
No entanto se você testar agora, verá que apesar do chat estar 
funcionando “por baixo dos panos”, não aparece nada na tela 
ainda. Isso porque ainda precisamos de uma última alteração no 
nosso front-end para tratar o recebimento deste evento e exibi-lo 
na tela do chat. Mude o bloco do client-side para o abaixo:
<script src="/socket.io/socket.io.js"></script>
 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 <script>
 $(function () {
 var socket = io();
 $('form').submit(function(){
 socket.emit('chat message', $('#m').val());
 $('#m').val('');
 return false;
 });
 socket.on('chat message', function(msg){
 $('#messages').append($('<li>').text(msg));
 });
 });
 </script>
Agora sim, teste sua aplicação em mais de uma aba e verá que as 
mensagens enviadas por uma delas são repercutidas nas demais
	Criando um chat com Node.js e Socket.io
	Criando a aplicação web
	Programando o chat