0Pricing
React Academy · Урок

Использование Socket.IO с React

Подключайтесь к серверу Socket.IO из React, слушайте события и отправляйте сообщения из хуков.

«Использование Socket.IO с React» — бесплатный урок React Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Зачем нужен Socket.IO

Socket.IO добавляет комнаты, пространства имён, автоматическое переподключение и обмен сообщениями на основе событий поверх WebSockets, а также резервный переход на длительный опрос HTTP — это значительно удобнее, чем использовать обычный WebSocket.

Установка клиента

Установите пакет клиента Socket.IO.

npm install socket.io-client

Создание экземпляра сокета

Вызывайте io(url) вне компонентов React, чтобы соединение было общим и не создавалось заново при каждом отображении. Экспортируйте его как единственный экземпляр.

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

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

Подключение в useEffect

Подключайтесь при монтировании компонента и отключайтесь при его размонтировании, чтобы избежать не закрытых соединений.

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

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

Прослушивание событий

Используйте socket.on('event', handler) для подписки. Удаляйте обработчик в функции очистки, чтобы при повторном отображении не появлялись дубликаты обработчиков.

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

  socket.on('message', onMessage);

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

Отправка событий

Вызовите socket.emit('event', data), чтобы отправить данные серверу. При необходимости передайте функцию обратного вызова (подтверждение) последним аргументом.

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

Пользовательский хук useSocket

Инкапсулируйте логику соединения сокета в пользовательском хуке, чтобы повторно использовать её в разных компонентах.

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

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

Комнаты и пространства имён

Войдите в комнату, отправив событие присоединения (обрабатываемое на сервере). Используйте пространства имён (io('/chat')), чтобы разделять трафик сокетов на уровне соединения.

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

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

Состояние соединения

Отслеживайте состояние соединения с помощью событий connect, disconnect и 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');
  };
}, []);

Отправка необязательных событий

Используйте socket.volatile.emit() для сообщений, при которых допустима периодическая потеря пакетов (например, для позиций курсора или состояния игры).

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

Socket.IO и обычный WebSocket

Socket.IO добавляет управление комнатами, пространства имён, автоматическое переподключение и поддержку двоичных данных поверх WebSocket. Используйте обычный WebSocket, если вам нужны минимальные накладные расходы или сервер не поддерживает Socket.IO.

Быстрая проверка

Почему следует удалять обработчики событий Socket.IO в функции очистки useEffect?

Итоги

Создайте единственный экземпляр socket с помощью io(url, { autoConnect: false }). Подключайтесь и отключайтесь в useEffect, всегда удаляйте обработчики в функции очистки и отправляйте события с помощью socket.emit(). Инкапсулируйте логику в пользовательском хуке для повторного использования.

Часто задаваемые вопросы

Урок «Использование Socket.IO с React» бесплатный?

Да — полный текст урока «Использование Socket.IO с React» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «Использование Socket.IO с React»?

Подключайтесь к серверу Socket.IO из React, слушайте события и отправляйте сообщения из хуков. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Использование Socket.IO с React»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Основы WebSocket в браузере
  2. Использование Socket.IO с React
  3. Создание компонента чата в реальном времени
  4. Переподключение, обработка ошибок и очистка
← Назад к React Academy