Back-end
WebSocket está transformando as aplicações em tempo real
13 de julho de 2013.Em 2013, o suporte ao WebSocket em navegadores modernos já estava bem estabelecido, e sua capacidade de permitir comunicação bidirecional entre cliente e servidor revolucionou o desenvolvimento de aplicações em tempo real. Neste artigo, exploraremos como o WebSocket funciona, onde ele é mais útil e como criar uma aplicação prática de chat usando WebSocket.
O que é WebSocket?
O WebSocket é um protocolo de comunicação que permite a troca de dados em tempo real entre cliente e servidor por meio de uma única conexão persistente. Diferente de modelos baseados em HTTP, onde as requisições são iniciadas pelo cliente, o WebSocket permite que o servidor envie dados para o cliente assim que eles estiverem disponíveis, sem a necessidade de requisições contínuas.
Vantagens do WebSocket:
- Comunicação bidirecional e em tempo real.
- Redução no consumo de largura de banda devido à ausência de overhead em requisições contínuas.
- Baixa latência, ideal para aplicações como chats, sistemas de monitoramento e jogos online.
Exemplo prático: Criando uma aplicação de chat com WebSocket
Vamos criar um exemplo simples de chat em tempo real usando WebSocket. O servidor será construído com Node.js e a interface será feita com HTML e JavaScript puro.
Configurando o servidor WebSocket
- Instale o Node.js e crie um novo projeto:
$ mkdir websocket-chat && cd websocket-chat
$ npm init -y
$ npm install ws
- Crie um arquivo chamado
server.js
e adicione o seguinte código:
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
console.log('Cliente conectado');
ws.on('message', (message) => {
console.log(`Mensagem recebida: ${message}`);
// Enviar a mensagem para todos os clientes conectados
wss.clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
ws.on('close', () => {
console.log('Cliente desconectado');
});
});
console.log('Servidor WebSocket rodando na porta 8080');
- Inicie o servidor:
$ node server.js
Criando o cliente WebSocket
- Crie um arquivo chamado
index.html
e adicione o seguinte código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat em Tempo Real</title>
</head>
<body>
<div id="messages"></div>
<div id="input">
<input type="text" id="messageInput" placeholder="Digite sua mensagem...">
<button id="sendButton">Enviar</button>
</div>
<script>
const messagesDiv = document.getElementById('messages');
const messageInput = document.getElementById('messageInput');
const sendButton = document.getElementById('sendButton');
const ws = new WebSocket('ws://localhost:8080');
ws.onmessage = (event) => {
const message = document.createElement('div');
message.textContent = event.data;
messagesDiv.appendChild(message);
messagesDiv.scrollTop = messagesDiv.scrollHeight;
};
sendButton.addEventListener('click', () => {
const message = messageInput.value;
if (message) {
ws.send(message);
messageInput.value = '';
}
});
messageInput.addEventListener('keypress', (event) => {
if (event.key === 'Enter') {
sendButton.click();
}
});
</script>
</body>
</html>
- Abra o arquivo
index.html
em um navegador moderno. - Teste o chat abrindo a página em diferentes guias ou navegadores. Todas as mensagens enviadas aparecerão para todos os clientes conectados.
Quando usar WebSocket
O WebSocket é ideal para cenários onde é necessário comunicação em tempo real com baixa latência, como:
- Chats e sistemas de mensagens instantâneas
- Jogos multiplayer
- Atualizações em tempo real para dashboards ou sistemas de monitoramento
- Notificações push em aplicações web
No entanto, ele pode não ser a melhor escolha para aplicações com requisitos de comunicação esporádica ou onde o modelo de requisição-resposta tradicional do HTTP é suficiente.
Conclusão
O WebSocket revolucionou a forma como desenvolvedores criam aplicações em tempo real. Com comunicação bidirecional e baixa latência, ele abre um leque de possibilidades para sistemas modernos e interativos. Experimente implementar o WebSocket em seu próximo projeto e veja como ele pode transformar a experiência do usuário.