WebSocket: O que é e como usar ?

Domine inglês técnico de programação em 2025, seja qual for seu nível. Inscrição gratuita

Paulo Clemente

2 min de leitura

Navegação Rápida:

WebSocket é uma tecnologia de comunicação bidirecional que permite a transmissão de dados entre um navegador web e um servidor de maneira eficiente e em tempo real. Diferente do modelo tradicional de requisições HTTP, onde o navegador faz uma solicitação e espera por uma resposta do servidor, com WebSockets, uma conexão persistente é mantida, permitindo a troca de mensagens de ambos os lados a qualquer momento.

Como Funciona

Estabelecendo a Conexão: Um WebSocket começa como uma conexão HTTP normal, com um pedido de "upgrade" sendo enviado do cliente para o servidor, solicitando a troca para o protocolo WebSocket. Uma vez aceito, a comunicação é mantida de forma persistente, e mensagens podem fluir em ambas as direções.

Bidirecionalidade: Uma vez estabelecida a conexão, tanto o cliente quanto o servidor podem enviar mensagens a qualquer momento sem a necessidade de uma solicitação explícita.

Eventos e Callbacks: A comunicação WebSocket é geralmente baseada em eventos. O cliente e o servidor podem definir manipuladores para eventos como a abertura da conexão, recebimento de uma mensagem, ou fechamento da conexão.

Exemplo Prático com JavaScript

Aqui está um exemplo de como implementar uma conexão WebSocket no lado do cliente com JavaScript:


// Criação de uma nova conexão WebSocket
const socket = new WebSocket('ws://example.com/socket');

// Evento disparado quando a conexão é aberta
socket.onopen = () => {
    console.log('Conexão WebSocket aberta');
    // Enviando uma mensagem ao servidor
    socket.send('Olá, servidor!');
};

// Evento disparado quando uma mensagem é recebida do servidor
socket.onmessage = (event) => {
    console.log('Mensagem recebida: ', event.data);
};

// Evento disparado quando a conexão é fechada
socket.onclose = () => {
    console.log('Conexão WebSocket fechada');
};

// Evento disparado em caso de erro
socket.onerror = (error) => {
    console.error('Erro no WebSocket: ', error);
};

Socket.io: Uma Solução Simplificada para WebSockets

Socket.io é uma biblioteca que facilita a implementação de uma comunicação em tempo real entre o navegador de um usuário e um servidor. Ela é construída sobre a tecnologia de WebSockets e fornece uma interface simples para desenvolver aplicações bidirecionais de maneira eficaz e eficiente.

Vamos ficar por dentro 👇

Remetente


socket.emit("hello", "world", (response) => {
  console.log(response); // "got it"
});

Receptor


socket.on("hello", (arg, callback) => {
  console.log(arg); // "world"
  callback("got it");
});

Com Tempo Limite:

Você também pode adicionar um tempo limite para o evento:


socket.timeout(5000).emit("hello", "world", (err, response) => {
  if (err) {
    // o outro lado não reconheceu o evento no prazo determinado
  } else {
    console.log(response); // "got it"
  }
});

Envio de Eventos para Múltiplos Clientes:

No lado do servidor, você pode enviar um evento para todos os clientes conectados ou para um subconjunto de clientes:

Para todos os clientes conectados:


io.emit("hello");

Para todos os clientes conectados em uma sala específica, como "news":


io.to("news").emit("hello");

Isso funciona bem, mesmo quando escalado para múltiplos nós.

Namespaces:

Namespaces permitem dividir a lógica do seu aplicativo em uma única conexão compartilhada, o que é útil, por exemplo, ao criar um canal "admin", acessível apenas para usuários autorizados:


io.on("connection", (socket) => {
  // usuários comuns
});

io.of("/admin").on("connection", (socket) => {
  // usuários admin
});

Mas Socket.io ainda é Relevante?

Quando percebemos que WebSockets são amplamente suportados atualmente, normalmente faremos essa pergunta. No entanto, se você usar WebSockets simples, eventualmente precisará criar na mão muitos recursos já incluídos no Socket.IO, como reconexão automática, reconhecimentos, e transmissão para múltiplos clientes.

Quando Quando Utilizar WebSockets?

Aplicativos de Bate-papo: Permite uma troca rápida de mensagens entre os usuários sem recarregar a página.

Jogos Online: Proporciona uma experiência fluida, transmitindo dados de jogo em tempo real.

Plataformas Financeiras: Fornece atualizações em tempo real de preços e cotações, garantindo que os usuários tenham informações atualizadas instantaneamente.

Atualizações em Tempo Real: Para aplicações que requerem atualizações frequentes, como dashboards de análise ou monitores de sistemas.

WebSockets são uma poderosa ferramenta para construir aplicações interativas e em tempo real. A comunicação bidirecional e persistente permite uma transmissão eficiente de dados, criando experiências de usuário mais envolventes e sistemas mais responsivos.

Com a implementação adequada, WebSockets podem melhorar significativamente a performance e usabilidade de muitas aplicações e o Socket.IO pode trazer um melhoria significativa tanto na produtividade quanto na qualidade do código.

Navegação Rápida:

Como Funciona

Exemplo Prático com JavaScript

Socket.io: Uma Solução Simplificada para WebSockets

Quando Quando Utilizar WebSockets?

Aprenda programação do zero e DE GRAÇA