Socket.Io oferece uma forma simples e eficiente de criar aplicações utilizando sockets, nesse artigo vamos criar uma aplicação que oferece um webchat, com Socket.io no Node.js.
Como funciona o Socket.Io no Node.JS
SocketIO é um framework para agilizar a construção de aplicações real-time bidirecionais. Com essa ferramenta é possível desenvolver rapidamente aplicações para interagir com usuários de forma dinâmica.
Como demonstração das possibilidades que o socket io oferece, iremos montar um WebChat bem simples, utilizando o conteúdo disponibilizado na documentação oficial, apenas com algumas modificações.
Você já ouviu falar do TDC (The Developer’s Conference)? É simplesmente o maior encontro de tecnologia da América Latina e você pode participar gratuitamente. A KingHost está oferecendo 40 cortesias exclusivas, para você participar (online ou presencialmente) do evento. Além disso, todos os inscritos no +Diversidade receberão um voucher de 20% de desconto. Aproveite essa oportunidade, clicando no banner abaixo!
Primeiros passos
Primeiro passo é iniciar um aplicação node com npm init, e editar o arquivo package.json para se adequar ao projeto:
Configurar o script start;
Informar as dependências do projeto.
{
"name": "webchat",
"version": "0.1.0",
"description": "Webchat utilizando socketIo",
"main": "server.js",
"scripts": {
"start": "node server.js"
},
"author": "Gabriel Petry",
"license": "MIT",
"dependencies": {
"express": "^4.16.4",
"socket.io": "^2.1.1"
}
}
Após configurar o package.json podemos rodar npm install, assim vamos instalar as duas dependências necessárias o SocketIO e o Express.
Com as dependências, precisamos criar os arquivos que vão realizar o uso do socket.io para iniciar a aplicação.
Arquivo server.js, será responsável por receber as mensagens e informar para todos os clientes conectados.
// Realiza o require do express, http, e socketio
var app = require('express')();
// passa o express para o http-server
var http = require('http').Server(app);
// passa o http-server par ao socketio
var io = require('socket.io')(http);
// cria uma rota para fornecer o arquivo index.html
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
// sempre que o socketio receber uma conexão vai devoltar realizar o broadcast dela
io.on('connection', function(socket){
socket.on('chat message', function(msg){
io.emit('chat message', msg);
});
});
// inicia o servidor na porta informada, no caso vamo iniciar na porta 3000
http.listen(3000, function(){
console.log('Servidor rodando em: http://localhost:3000');
});
O arquivo index.html, será uma página html básica com os campos do nosso formulário de contato, fique livre para editar e customizar o css dessa página.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Webchat com socketIO</title>
<style media="screen">
body {width: 500px; margin: 0 auto; margin-top: 2rem; }
.send {width: 100%; margin: 0; padding: 0; margin-top: 1rem; }
input.text {width: 80%; margin: 0; padding: 0; padding: 5px; }
.btn {padding: 5px 0; width: 82px; background-color: #eee; border: 0; margin: 0; border: solid #eee; }
.btn:hover {background-color: #00e4bc}
ul {list-style-type: none;width: 100%;padding: 0;margin: 0;}
li { padding: 5px 10px; }
li:nth-child(odd) {background-color: #eee}
</style>
<!-- Lista de mensagens -->
<ul class="ul" id="messages"></ul>
<!-- input com e botão de submit-->
<div class="send">
<input class="text" autofocus="" id="menssagem" autocomplete="off" placeholder="Cloud está em apuros!">
<button class="btn" id="enviar_menssagem">Send</button>
</div>
<!-- importar o client do socketIO-->
<script src="/socket.io/socket.io.js"></script>
<script>
// faz com que seja possível enviar mensagens com Enter
document.getElementById('menssagem').addEventListener('keypress', function(e) {
var key = e.which || e.keyCode;
if (key == 13) {
enviar_menssagem();
}
});
// inicia o client socketIO
var socket = io();
// Abre um popup perguntando o nome da pessoa
var nome_usuario = prompt("Qual seu nome?");
// Lista com alguns nomes do Final Fantasy
var ff = [
"Cloud Strife",
"Sephiroth",
"Vincent Valentine",
"Zack Fair",
"Aerith Gainsborough",
"Tifa Lockhart",
"Barret Wallace",
"Yuffie Kisaragi",
];
// Caso usuário não informe um nome será atribuido um nome aleatório da lista
if (nome_usuario === null || nome_usuario == "" || nome_usuario == " ") {
nome_usuario = ff[Math.floor(Math.random() * ff.length)];
}
socket.emit('chat message', "Bem vindo! " + nome_usuario);
// adiciona um addEventListener para o botão de submit
document.getElementById('enviar_menssagem').addEventListener("click", enviar_menssagem);
// cria a função que conecta no websocket e emite a mensagem
function enviar_menssagem() {
// salva a mensagem como uma string
msg = document.getElementById('menssagem').value;
if (msg.length > 0) {
console.log(msg);
// concatena o nome de usuário e a mensagem para enviar ao socketIo
socket.emit('chat message', nome_usuario + ": " + msg);
// reseta o valor do input da mensagem
document.getElementById('menssagem').value = "";
}
}
// sempre que receber uma mensagem ela é adicionada a lista
socket.on('chat message', function(msg){
// busca o elemento UL
let ul = document.getElementById("messages");
// cria um elemento LI
let li = document.createElement('li');
// cria o elemento de quebra de linha
let br = document.createElement('br');
li.appendChild(document.createTextNode(msg));
// adicionar o nome do usuário quebra a linha e adicionar a mensagem à lista de mensagems
ul.appendChild(li);
});
</script>
Tudo pronto, e agora?
Com os os arquivos criados podemos iniciar o nosso servidor de testes com o comando npm start.
e ao acessar http://localhost:3000 será iniciado o servidor do chat.
Publicando a sua aplicação na Internet
Agora que sua aplicação com Socket.io no Node.js foi desenvolvida e está funcionando nos testes é hora de publicar ela na internet, para isso precisamos de uma hospedagem com suporte a node.js.
Esse webchat funcionará perfeitamente na estrutura node.js da Kinghost, para realizar o deploy da aplicação pode seguir o nosso guia na Central de Ajuda KingHost.
Fique ligado no Blog da KingHost para mais novidades.
