0Pricing
Frontend Academy · Aula

Integração do cliente Socket.io

Ligar o cliente Socket.io, escutar eventos nomeados, emitir dados para o servidor, tratar a lógica de reconexão e gerir salas do lado do cliente.

Integração do cliente Socket.io é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

O que o Socket.io acrescenta ao WebSocket bruto

Socket.io é uma biblioteca popular construída sobre WebSocket. Ela acrescenta: reconexão automática, recurso alternativo de consulta prolongada, salas e espaços de nomes, funções de retorno de confirmação e eventos nomeados. Ela combina uma biblioteca de cliente com uma biblioteca de servidor (Node.js).

Instalando o cliente

Instale socket.io-client. A versão principal deve ser igual à do servidor.

npm install socket.io-client

Conectando

Importe io e conecte-se a uma URL de servidor. Isso retorna uma instância de Socket.

import { io } from 'socket.io-client';

const socket = io('https://api.example.com', {
  transports: ['websocket'], // skip polling fallback for speed
  auth: { token: localStorage.getItem('jwt') }
});

socket.on('connect', () => console.log('connected', socket.id));

Emitindo eventos

socket.emit(eventName, payload) envia um evento nomeado com dados, o que é muito mais limpo do que usar send bruto com JSON.parse.

socket.emit('chat-message', {
  room: 'general',
  text: 'Hello everyone!'
});

socket.emit('typing', { user: 'Alice' });

Escutando eventos

socket.on(eventName, handler) registra um ouvinte. Os eventos emitidos pelo servidor chegam aqui.

socket.on('chat-message', (msg) => {
  console.log(`${msg.user}: ${msg.text}`);
  appendMessage(msg);
});

socket.on('user-joined', (user) => {
  console.log(`${user.name} joined`);
});

Confirmações (funções de retorno de confirmação)

Passe uma função de retorno como último argumento de emit; o servidor poderá chamá-la com uma resposta. É semelhante a RPC.

socket.emit('create-post', { title: 'Hello' }, (response) => {
  if (response.error) {
    console.error(response.error);
  } else {
    console.log('Created post', response.id);
  }
});

emitWithAck baseado em promessas

O Socket.io moderno disponibiliza emitWithAck, que retorna uma promessa.

try {
  const response = await socket.emitWithAck('create-post', { title: 'Hello' });
  console.log('Created', response.id);
} catch (err) {
  console.error('Failed', err);
}

Salas

Salas são agrupamentos de sockets mantidos no servidor. O cliente entra e sai delas emitindo eventos; o servidor usa io.to(room).emit() para transmitir a mensagem.

// Client:
socket.emit('join-room', { roomId: 'general' });

// Listen to messages in any room you've joined:
socket.on('room-message', ({ room, message }) => {
  if (room === activeRoom) appendMessage(message);
});

// Leave:
socket.emit('leave-room', { roomId: 'general' });

Espaços de nomes

Espaços de nomes são canais de comunicação separados no mesmo servidor, por exemplo, /chat e /admin. Conecte-se a um espaço de nomes acrescentando seu sufixo à URL.

const chatSocket = io('https://api/chat');
const adminSocket = io('https://api/admin');

Reconexão integrada

Socket.io reconecta automaticamente usando espera exponencial. Configure esse comportamento por meio das opções.

const socket = io({
  reconnection: true,
  reconnectionAttempts: Infinity,
  reconnectionDelay: 1000,
  reconnectionDelayMax: 30000,
  randomizationFactor: 0.5
});

socket.on('reconnect', (attempt) => console.log('reconnected after', attempt));
socket.on('reconnect_attempt', (attempt) => console.log('trying...', attempt));

Tratamento da desconexão

Escute o evento de desconexão para atualizar a interface (exiba um banner com a mensagem 'reconectando...').

socket.on('disconnect', (reason) => {
  console.log('Disconnected:', reason);
  if (reason === 'io server disconnect') {
    // Server kicked us — must reconnect manually
    socket.connect();
  }
});

Integração com React

Envolva o ciclo de vida do socket em um hook personalizado ou em um provedor de Context.

// useSocket.ts
import { useEffect, useState } from 'react';
import { io, Socket } from 'socket.io-client';

let socket: Socket;

export function useSocket() {
  const [connected, setConnected] = useState(false);
  useEffect(() => {
    if (!socket) socket = io('/');
    socket.on('connect', () => setConnected(true));
    socket.on('disconnect', () => setConnected(false));
    return () => { /* keep socket alive across remounts */ };
  }, []);
  return { socket, connected };
}

Quando usar Socket.io em vez de WebSocket bruto

Socket.io: quando você quiser salas, funções de retorno de confirmação, reconexão automática e um recurso alternativo de transporte pronto para uso. WebSocket bruto: quando precisar controlar diretamente o protocolo, reduzir ao mínimo o tamanho do pacote ou interoperar com um servidor que não use Socket.io.

Verificação rápida

O que a função de retorno do terceiro argumento de emit(event, payload, callback) do Socket.io permite fazer?

Recapitulação: cliente Socket.io

Biblioteca construída sobre WebSocket: salas, espaços de nomes, confirmações, reconexão automática e recurso alternativo de consulta periódica. io(url, options) conecta-se. emit(event, payload) envia eventos nomeados; on(event, handler) os escuta. Use a função de retorno do terceiro argumento ou emitWithAck para um fluxo no estilo RPC. As salas são gerenciadas pelo servidor, e os espaços de nomes são definidos pelo sufixo da URL. A reconexão já vem integrada. Para o React, envolva o ciclo de vida em um hook.

Perguntas Frequentes

A aula “Integração do cliente Socket.io” é grátis?

Sim — o texto completo de “Integração do cliente Socket.io” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “Integração do cliente Socket.io”?

Ligar o cliente Socket.io, escutar eventos nomeados, emitir dados para o servidor, tratar a lógica de reconexão e gerir salas do lado do cliente. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Integração do cliente Socket.io”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. API WebSocket: abrir, mensagem, fechar e erro
  2. Integração do cliente Socket.io
  3. Eventos enviados pelo servidor para transmissão unidirecional
  4. Padrões de interface em tempo real
← Voltar para Frontend Academy