React Academy · Lekcja

Używanie Socket.IO z React

Łączenie aplikacji React z serwerem Socket.IO, nasłuchiwanie zdarzeń i emitowanie wiadomości z hooków.

Używanie Socket.IO z React to bezpłatna lekcja React Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Dlaczego Socket.IO?

Socket.IO dodaje pokoje, przestrzenie nazw, automatyczne ponawianie połączenia i komunikację opartą na zdarzeniach, korzystając z WebSocket z funkcją awaryjnego przełączania na odpytywanie HTTP — jest znacznie wygodniejszy niż surowy WebSocket.

Instalowanie klienta

Zainstaluj pakiet klienta Socket.IO.

npm install socket.io-client

Tworzenie instancji gniazda

Wywołaj io(url) poza komponentami React, aby współdzielić połączenie i nie tworzyć go ponownie przy każdym renderowaniu. Wyeksportuj je jako singleton.

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

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

Łączenie w useEffect

Nawiąż połączenie podczas montowania komponentu i rozłącz je podczas jego odmontowywania, aby uniknąć pozostawionych aktywnych połączeń.

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

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

Nasłuchiwanie zdarzeń

Użyj socket.on('event', handler), aby zasubskrybować zdarzenie. Usuń nasłuchiwanie w funkcji czyszczącej, aby zapobiec powielaniu obsługi przy ponownym renderowaniu.

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

  socket.on('message', onMessage);

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

Emitowanie zdarzeń

Wywołaj socket.emit('event', data), aby wysłać dane do serwera. Opcjonalnie możesz przekazać funkcję zwrotną (potwierdzenie) jako ostatni argument.

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

Niestandardowy hook useSocket

Umieść logikę połączenia gniazda w niestandardowym hooku, aby można było ponownie używać jej w różnych komponentach.

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

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

Pokoje i przestrzenie nazw

Dołącz do pokoju, emitując zdarzenie dołączania (obsługiwane po stronie serwera). Używaj przestrzeni nazw (io('/chat')), aby segmentować ruch gniazda na poziomie połączenia.

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

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

Stan połączenia

Śledź stan połączenia za pomocą zdarzeń connect, disconnect i 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');
  };
}, []);

Emisje ulotne

Używaj socket.volatile.emit() w przypadku wiadomości, przy których sporadyczna utrata pakietów jest dopuszczalna (np. pozycje kursora, stan gry).

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

Socket.IO a surowy WebSocket

Socket.IO dodaje zarządzanie pokojami, przestrzenie nazw, automatyczne ponawianie połączenia i obsługę danych binarnych do WebSocket. Używaj surowego WebSocket, jeśli potrzebujesz minimalnego narzutu albo serwer nie obsługuje Socket.IO.

Szybkie sprawdzenie

Dlaczego należy usuwać nasłuchiwania zdarzeń Socket.IO w funkcji czyszczącej useEffect?

Podsumowanie

Utwórz singleton socket za pomocą io(url, { autoConnect: false }). Nawiązuj i zamykaj połączenie w useEffect, zawsze usuwaj nasłuchiwania w funkcji czyszczącej i emituj zdarzenia za pomocą socket.emit(). Umieść logikę w niestandardowym hooku, aby można było jej ponownie używać.

Często zadawane pytania

Czy lekcja „Używanie Socket.IO z React” jest bezpłatna?

Tak — pełny tekst „Używanie Socket.IO z React” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Używanie Socket.IO z React”?

Łączenie aplikacji React z serwerem Socket.IO, nasłuchiwanie zdarzeń i emitowanie wiadomości z hooków. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć React Academy?

Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Używanie Socket.IO z React”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?

Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Podstawy WebSocket w przeglądarce
Używanie Socket.IO z React
Budowanie komponentu czatu w czasie rzeczywistym
Ponowne łączenie, obsługa błędów i czyszczenie

← Powrót do React Academy