Este artigo fornece um tutorial detalhado para criar uma aplicação em tempo real com Node.js, com etapas técnicas atualizadas que desenvolvedores podem seguir para criar um sistema de votação com resultados atualizados instantaneamente em todos os clientes.
Node.js é um ambiente de execução JavaScript open-source e multiplataforma. Esta tecnologia permite a execução de código JavaScript no lado do servidor. Consequentemente, abre oportunidades para criar aplicações web dinâmicas e em tempo real. Node.js foi lançado pela primeira vez em 2009 por Ryan Dahl e é atualmente gerido pela OpenJS Foundation. Neste tutorial, você aprenderá a criar uma aplicação em tempo real com Node.js para um sistema de votação simples.
Princípios Básicos de uma Aplicação em Tempo Real com Node.js
A tecnologia central utilizada é o Socket.IO. Socket.IO facilita a comunicação full-duplex e orientada a eventos entre o servidor e os clientes. Portanto, qualquer alteração nos dados no servidor pode ser enviada instantaneamente a todos os clientes conectados. Este conceito é ideal para funcionalidades como votações ao vivo, chat ou painéis de monitoramento.
Passos para Criar uma Aplicação de Votação em Tempo Real
- Instalar o Node.js
Certifique-se de ter instalado a versão mais recente LTS do Node.js. Você pode baixá-la no site oficial do Node.js. O processo de instalação é simples e está disponível para vários sistemas operacionais. - Inicializar o Projeto
Crie uma nova pasta para o projeto e inicialize o arquivopackage.jsonatravés do terminal. No entanto, você também pode criá-lo manualmente como no exemplo a seguir.
{
"name": "aplicacao-votacao-tempo-real",
"version": "1.0.0",
"description": "Aplicação de votação em tempo real com Node.js e Socket.IO",
"main": "server.js",
"scripts": {
"start": "node server.js"
},
"dependencies": {
"express": "^4.18.2",
"socket.io": "^4.7.2"
}
}Em seguida, execute o comando npm install no terminal para baixar as dependências. Este processo criará a pasta node_modules.
npm install.- Criar o Servidor com Express e Socket.IO
Crie um arquivo chamadoserver.js. O código nele configurará o servidor HTTP, servirá a página HTML e gerenciará as conexões em tempo real.
const express = require('express');
const http = require('http');
const { Server } = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = new Server(server);
// Dados de votação armazenados em um objeto
let voteData = {
candidatoA: 0,
candidatoB: 0
};
// Servir o arquivo index.html
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
// Gerenciar conexões Socket.IO
io.on('connection', (socket) => {
console.log('Um usuário conectou');
// Enviar os dados de votação mais recentes ao novo cliente
socket.emit('atualizarVoto', voteData);
// Gerenciar eventos de votação dos clientes
socket.on('enviarVoto', (candidato) => {
if (voteData.hasOwnProperty(candidato)) {
voteData[candidato]++;
// Transmitir a atualização para TODOS os clientes conectados
io.emit('atualizarVoto', voteData);
}
});
});
// Executar o servidor na porta 3000
server.listen(3000, () => {
console.log('Servidor rodando em http://localhost:3000');
});- Criar a Interface do Cliente (HTML)
Crie o arquivoindex.html. Esta interface exibirá os resultados da votação e botões para votar.
<!DOCTYPE html>
<html>
<head>
<title>Aplicação de Votação em Tempo Real</title>
<script src="/socket.io/socket.io.js"></script>
<style>
body { font-family: Arial, sans-serif; max-width: 600px; margin: 40px auto; text-align: center; }
table { width: 100%; border-collapse: collapse; margin: 20px 0; }
th, td { border: 1px solid #ddd; padding: 12px; }
th { background-color: #f4f4f4; }
button { padding: 10px 20px; background-color: #007cba; color: white; border: none; cursor: pointer; }
button:hover { background-color: #005a87; }
</style>
</head>
<body>
<h1>Eleição em Tempo Real para Presidente</h1>
<table>
<tr><th>Candidato</th><th>Contagem de Votos</th></tr>
<tr><td>Candidato A</td><td id="contadorA">0</td></tr>
<tr><td>Candidato B</td><td id="contadorB">0</td></tr>
</table>
<div>
<button onclick="votar('candidatoA')">Votar no Candidato A</button>
<button onclick="votar('candidatoB')">Votar no Candidato B</button>
</div>
<script>
const socket = io();
socket.on('atualizarVoto', function(data) {
document.getElementById('contadorA').textContent = data.candidatoA;
document.getElementById('contadorB').textContent = data.candidatoB;
});
function votar(candidato) {
socket.emit('enviarVoto', candidato);
}
</script>
</body>
</html>Testar e Executar a Aplicação em Tempo Real
- Execute o servidor com o comando
node server.jsno terminal. - Abra um navegador e acesse
http://localhost:3000. - Abra a mesma URL em outra aba do navegador ou em um dispositivo diferente.
- Tente votar em um cliente. Instantaneamente, você verá os resultados atualizados em todos os clientes abertos. Este processo demonstra que a aplicação em tempo real com Node.js está funcionando corretamente.
Conclusão
Ao aproveitar o Node.js e o Socket.IO, você criou com sucesso um sistema funcional em tempo real. Esta arquitetura pode ser estendida para vários propósitos, como monitoramento de dados, colaboração em documentos ou notificações ao vivo. O código usado neste tutorial é modular. Portanto, você pode adaptá-lo facilmente para maior escala e complexidade.
