0Pricing
Frontend Academy · Lekcja

Integracja klienta Socket.io

Połączy Pan/Pani klienta Socket.io, zacznie nasłuchiwać nazwanych zdarzeń, wyśle dane do serwera, obsłuży ponowne łączenie i będzie zarządzać pokojami po stronie klienta.

Integracja klienta Socket.io to bezpłatna lekcja Frontend 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 Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co Socket.io dodaje do surowego WebSocket

Socket.io to popularna biblioteka działająca na bazie WebSocket. Dodaje automatyczne ponowne łączenie, awaryjne przejście na long-polling, pokoje i przestrzenie nazw, funkcje zwrotne potwierdzeń oraz nazwane zdarzenia. Współpracuje z biblioteką kliencką i serwerową, na przykład dla Node.js.

Instalowanie klienta

Należy zainstalować socket.io-client. Jego główna wersja musi odpowiadać głównej wersji serwera.

npm install socket.io-client

Nawiązywanie połączenia

Należy zaimportować io i połączyć się z adresem URL serwera. Funkcja zwraca instancję 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));

Emitowanie zdarzeń

socket.emit(eventName, payload) wysyła nazwane zdarzenie wraz z danymi — jest to znacznie wygodniejsze niż surowe send połączone z JSON.parse.

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

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

Nasłuchiwanie zdarzeń

socket.on(eventName, handler) rejestruje listener. Zdarzenia emitowane przez serwer są odbierane w tym miejscu.

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

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

Potwierdzenia (funkcje zwrotne ack)

Funkcję zwrotną należy przekazać jako ostatni argument emit — serwer może wywołać ją wraz z odpowiedzią. Działa to podobnie jak RPC.

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

Emitowanie oparte na obietnicy za pomocą emitWithAck

Nowoczesne Socket.io udostępnia emitWithAck, które zwraca obietnicę.

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

Pokoje

Pokoje to grupy gniazd utrzymywane po stronie serwera. Klient dołącza do pokoju i opuszcza go, emitując zdarzenia; serwer używa io.to(room).emit() do rozgłaszania wiadomości.

// 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' });

Przestrzenie nazw

Przestrzenie nazw to osobne kanały komunikacji na tym samym serwerze, na przykład /chat i /admin. Aby połączyć się z przestrzenią nazw, należy dodać jej sufiks do adresu URL.

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

Wbudowane ponowne łączenie

Socket.io automatycznie ponownie nawiązuje połączenie, stosując wykładnicze zwiększanie opóźnienia. Można je skonfigurować za pomocą opcji.

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));

Obsługa rozłączeń

Należy nasłuchiwać zdarzenia disconnect, aby aktualizować interfejs, na przykład wyświetlać baner „ponowne łączenie...”.

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

Integracja z React

Cykl życia gniazda należy zamknąć w niestandardowym hooku lub providerze 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 };
}

Kiedy użyć Socket.io zamiast surowego WebSocket

Socket.io należy wybrać, gdy potrzebne są pokoje, funkcje zwrotne potwierdzeń, automatyczne ponowne łączenie i awaryjne przełączanie transportu dostępne od razu. Surowy WebSocket sprawdzi się, gdy potrzebna jest kontrola nad protokołem, minimalny rozmiar paczki lub współpraca z serwerem, który nie używa Socket.io.

Szybkie sprawdzenie

Co umożliwia funkcja zwrotna przekazana jako trzeci argument do emit(event, payload, callback) w Socket.io?

Podsumowanie: klient Socket.io

Biblioteka działająca na bazie WebSocket, która zapewnia pokoje, przestrzenie nazw, potwierdzenia, automatyczne ponowne łączenie i awaryjne przejście na polling. io(url, options) nawiązuje połączenie. emit(event, payload) wysyła nazwane zdarzenia, a on(event, handler) nasłuchuje ich. Trzeci argument, czyli funkcja zwrotna, lub emitWithAck umożliwia komunikację w stylu RPC. Pokoje są obsługiwane przez serwer, a przestrzenie nazw określa się sufiksem adresu URL. Ponowne łączenie jest wbudowane. W React cykl życia należy zamknąć w hooku.

Często zadawane pytania

Czy lekcja „Integracja klienta Socket.io” jest bezpłatna?

Tak — pełny tekst „Integracja klienta Socket.io” 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 Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Integracja klienta Socket.io”?

Połączy Pan/Pani klienta Socket.io, zacznie nasłuchiwać nazwanych zdarzeń, wyśle dane do serwera, obsłuży ponowne łączenie i będzie zarządzać pokojami po stronie klienta. Ćwiczysz Frontend 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ąć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend 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 „Integracja klienta Socket.io”?

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

Tak. Każda lekcja Frontend 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

  1. WebSocket API: open, message, close, error
  2. Integracja klienta Socket.io
  3. Server-Sent Events do strumieniowania jednokierunkowego
  4. Wzorce interfejsów czasu rzeczywistego
← Powrót do Frontend Academy