0Pricing
React Academy · Aula

Usando Socket.IO com React

Conecte-se a um servidor Socket.IO a partir do React, escute eventos e emita mensagens a partir de hooks.

Usando Socket.IO com React é uma aula grátis de React 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 React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

Por que usar Socket.IO

O Socket.IO acrescenta salas, espaços de nomes, reconexão automática e mensagens baseadas em eventos sobre WebSockets, com uma alternativa de consulta longa por HTTP — é muito mais prático que o WebSocket bruto.

Instalando o cliente

Instale o pacote cliente do Socket.IO.

npm install socket.io-client

Criando uma instância de socket

Chame io(url) fora dos componentes React para que a conexão seja compartilhada e não seja recriada a cada renderização. Exporte-a como uma instância única.

// src/lib/socket.ts
import { io } from 'socket.io-client';

export const socket = io('https://api.example.com', {
  autoConnect: false, // connect manually
  withCredentials: true,
});

Conectando em um useEffect

Conecte-se quando o componente for montado e desconecte-se quando ele for desmontado para evitar conexões pendentes.

useEffect(() => {
  socket.connect();

  return () => {
    socket.disconnect();
  };
}, []);

Ouvindo eventos

Use socket.on('event', handler) para se inscrever. Remova o ouvinte na função de limpeza para evitar manipuladores duplicados após uma nova renderização.

useEffect(() => {
  function onMessage(data) {
    setMessages(prev => [...prev, data]);
  }

  socket.on('message', onMessage);

  return () => {
    socket.off('message', onMessage);
  };
}, []);

Emitindo eventos

Chame socket.emit('event', data) para enviar dados ao servidor. Opcionalmente, forneça uma função de retorno de chamada (confirmação) como último argumento.

function sendMessage(text) {
  socket.emit('message', { text, timestamp: Date.now() }, (ack) => {
    console.log('Server acknowledged:', ack);
  });
}

Gancho useSocket personalizado

Encapsule a lógica de conexão do socket em um gancho personalizado para reutilizá-la entre componentes.

function useSocket(event, handler) {
  useEffect(() => {
    socket.on(event, handler);
    return () => socket.off(event, handler);
  }, [event, handler]);
}

// Usage:
useSocket('message', (data) => setMessages(m => [...m, data]));

Salas e espaços de nomes

Entre em uma sala emitindo um evento de entrada, tratado no servidor. Use espaços de nomes (io('/chat')) para segmentar o tráfego do socket no nível da conexão.

// Join a room
socket.emit('join-room', 'room-123');

// Connect to a namespace
const chatSocket = io('https://api.example.com/chat');

Estado da conexão

Acompanhe o estado da conexão com os eventos connect, disconnect e connect_error.

const [isConnected, setIsConnected] = useState(socket.connected);

useEffect(() => {
  socket.on('connect', () => setIsConnected(true));
  socket.on('disconnect', () => setIsConnected(false));
  return () => {
    socket.off('connect');
    socket.off('disconnect');
  };
}, []);

Emissões voláteis

Use socket.volatile.emit() para mensagens nas quais seja aceitável perder alguns pacotes ocasionalmente (por exemplo, posições do cursor e estado do jogo).

// Position updates — OK to lose some
function onMouseMove(e) {
  socket.volatile.emit('cursor', { x: e.clientX, y: e.clientY });
}

Socket.IO versus WebSocket bruto

O Socket.IO acrescenta gerenciamento de salas, espaços de nomes, reconexão automática e suporte binário sobre o WebSocket. Use o WebSocket bruto se precisar de uma sobrecarga mínima ou se o servidor não oferecer suporte ao Socket.IO.

Verificação rápida

Por que você deve remover os ouvintes de eventos do Socket.IO na limpeza do useEffect?

Recapitulação

Crie uma instância única de socket com io(url, { autoConnect: false }). Conecte-se e desconecte-se em useEffect, sempre remova os ouvintes na limpeza e emita eventos com socket.emit(). Encapsule a lógica em um gancho personalizado para reutilizá-la.

Perguntas Frequentes

A aula “Usando Socket.IO com React” é grátis?

Sim — o texto completo de “Usando Socket.IO com React” é 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 React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Usando Socket.IO com React”?

Conecte-se a um servidor Socket.IO a partir do React, escute eventos e emita mensagens a partir de hooks. Você pratica React 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 React Academy?

Nenhuma experiência prévia é necessária. React 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 “Usando Socket.IO com React”?

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 React Academy?

Sim. Cada aula de React 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. Fundamentos de WebSocket no navegador
  2. Usando Socket.IO com React
  3. Criando um componente de chat em tempo real
  4. Reconexão, tratamento de erros e limpeza
← Voltar para React Academy