tiagobarreto

WebSocket está transformando as aplicações em tempo real

Introdução

tiagobarreto

Analista de Sistemas residente em Fortaleza com mais de 10 anos de experiência profissional na área de Tecnologia da Informação atuando em pesquisa & desenvolvimento, inovação e consultoria.




RECENTES

Descobrindo as features do Elixir e Phoenix 04th February, 2016

Vamos criar uma simples aplicação em Angular JS 11th May, 2014

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

  1. Instale o Node.js e crie um novo projeto:
$ mkdir websocket-chat && cd websocket-chat
$ npm init -y
$ npm install ws
  1. 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');
  1. Inicie o servidor:
$ node server.js

Criando o cliente WebSocket

  1. 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>
  1. Abra o arquivo index.html em um navegador moderno.
  2. 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.

comments powered by Disqus