Aprenda WebSocket com Node.js
Neste tutorial, você verá:
✔️ Comunicação em tempo real com WebSocket e Node.js
✔️ Configurar um domínio para acesso do seu aplicativo com ssl
📌 Simplifique seu processo de deploy com o nosso painel ICP!
Hoje, eu vou te mostrar como criar um projeto simples em Node.js usando o Websocket e publicá-lo na internet com um domínio próprio. Se você sempre quis colocar seu site online de forma profissional, esse tutorial é pra você!
📌 Passo 1: Iniciar um projeto Node.js
npm init -y📌 Passo 2: Instalar dependências
npm install express socket.io📌 Passo 3: Crie o arquivo server.js com o seguinte conteúdo:
// Vamos importar o modulos para uso!
// express: Um framework web para Node.js que simplifica a criação de servidores HTTP.
// http: Módulo nativo do Node.js para criar servidores HTTP.
// socket.io: Biblioteca para comunicação em tempo real através de websockets.
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
//app: Aqui, criamos uma instância do aplicativo Express.
//server: Criamos um servidor HTTP usando a instância do Express. Isso nos permite usar o Express para roteamento e middleware, enquanto ainda permite que o socket.io "escute" no mesmo servidor.
//io: Esta é a instância do servidor Socket.io, que vai escutar as conexões websocket no nosso servidor HTTP.
const app = express();
const server = http.createServer(app);
const io = socketIo(server);
// Esta é uma rota do Express para o endpoint / (raiz/dominio).
//Quando um usuário acessa a raiz do nosso servidor (http://seudominio.com.br/), o Express envia o arquivo index.html que está no diretório atual (__dirname é uma variável global em Node.js que aponta para o diretório do arquivo em execução).
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
// io.on('connection', (socket) => {...}: Este código define um ouvinte para o evento connection. Esse evento é disparado sempre que um novo cliente se conecta ao servidor via socket.io. O parâmetro socket representa a conexão individual do cliente.
// socket.on('chat message', (msg) => {...}: Aqui, definimos um ouvinte para o evento personalizado chat message. Este evento é emitido pelo cliente quando uma nova mensagem é enviada. Quando recebido, emitimos o mesmo evento para todos os clientes conectados com io.emit('chat message', msg). Isso significa que, quando um cliente envia uma mensagem, todos os outros clientes recebem essa mensagem.
// socket.on('disconnect', () => {...}: Este é um ouvinte para o evento disconnect, que é disparado quando o cliente se desconecta do servidor.
io.on('connection', (socket) => {
console.log('Usuário conectado');
socket.on('chat message', (msg) => {
io.emit('chat message', msg);
});
socket.on('disconnect', () => {
console.log('Usuário desconectado');
});
});
// Aqui será a porta que o PM2 irá colocar automaticamente!
// Deixe assim para funcionar na Integrator Host
//const PORT = process.env.PORT
const PORT = 3100;
server.listen(PORT, () => {
console.log(`Servidor rodando na porta ${PORT}`);
});
📌 Passo 4: Crie o arquivo index.html com o seguinte conteúdo:
<!doctype html>
<html>
<head>
<title>Exemplo - Integrator Host - Node.js - Websocket </title>
<style>
/* Estilização básica para o chat */
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
margin-bottom: 10px;
list-style-type: none;
}
</style>
</head>
<body>
<!--
<ul id="messages">: Esta é uma lista não ordenada onde as mensagens do chat serão exibidas.
Ela começa vazia e será preenchida dinamicamente pelo JavaScript.
-->
<ul id="messages"></ul>
<!--
<input id="input" autocomplete="off">: Um campo de entrada onde o usuário digitará sua mensagem.
<button>: Um botão que, quando clicado, enviará a mensagem.
-->
<form id="form" action="">
<input id="input" autocomplete="off" /><button>Enviar Mensagem</button>
</form>
<!--
O primeiro script é a biblioteca cliente do socket.io. Esta é a contraparte do cliente da biblioteca socket.io usada no servidor.
O segundo script é a biblioteca jQuery, uma popular biblioteca JavaScript que facilita a manipulação do DOM e o tratamento de eventos.
-->
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!--
1) const socket = io();: Esta linha cria uma conexão websocket para o servidor usando a biblioteca socket.io.
2) $('form').submit(function(e) {...}: Este é um ouvinte de evento para o evento de envio do formulário. Ele usa jQuery para definir o ouvinte.
3) e.preventDefault();: Impede que o formulário seja enviado da maneira tradicional (recarregando a página).
4) socket.emit('chat message', $('#input').val());: Emite um evento chat message através do socket com o valor da mensagem digitada pelo usuário.
5) $('#input').val('');: Limpa o campo de entrada após a mensagem ser enviada.
6) socket.on('chat message', function(msg) {...}: Este é um ouvinte de evento para receber mensagens de chat do servidor. Quando uma mensagem é recebida, ela é adicionada à lista de mensagens.
-->
<script>
const socket = io();
$('form').submit(function(e) {
e.preventDefault(); // Impede o formulário de ser enviado normalmente
socket.emit('chat message', $('#input').val());
$('#input').val('');
return false;
});
socket.on('chat message', function(msg) {
$('#messages').append($('<li>').text(msg));
});
</script>
</body>
</html>
📌 Passo 5: Rodar a aplicação.
Inicie o projeto:
node server.jsAcessar ele localmente:
http://localhost:3100Você pode abrir múltiplas abas para simular diferentes usuários interagindo com o chat em tempo real.
📌 Passo 6: Publicar o seu aplicativo Node.js online com um domínio com SSL.
Para isso vamos usar o Painel ICP, no video abaixo mostramos todo o processo de forma simples e rápida.
