Основы WebSocket в браузере
Открывайте соединения WebSocket, отправляйте сообщения и обрабатывайте события через встроенный API WebSocket.
«Основы WebSocket в браузере» — бесплатный урок React Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.
Что такое WebSocket
WebSocket — это протокол, обеспечивающий полнодуплексную связь через одно TCP-соединение. В отличие от HTTP, соединение остаётся открытым, поэтому сервер может в любой момент отправить данные клиенту.
Открытие соединения
Создайте объект WebSocket с URL-адресом ws:// или wss://. Соединение открывается асинхронно.
const ws = new WebSocket('wss://api.example.com/ws');
ws.onopen = () => {
console.log('Connection established');
};Отправка сообщений
Используйте ws.send() для отправки данных. Можно отправлять строки или двоичные данные (ArrayBuffer и двоичные объекты). Перед отправкой закодируйте объекты в JSON.
ws.onopen = () => {
ws.send(JSON.stringify({ type: 'join', room: 'general' }));
ws.send('Hello, server!');
};Получение сообщений
Событие onmessage срабатывает всякий раз, когда сервер отправляет данные. Данные находятся в event.data в виде строки или двоичного типа.
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
console.log('Received:', data);
};Обработка ошибок и закрытие
Обрабатывайте события onerror и onclose. Событие закрытия содержит код и причину, объясняющие, почему соединение завершилось.
ws.onerror = (error) => {
console.error('WebSocket error:', error);
};
ws.onclose = (event) => {
console.log(`Closed: ${event.code} ${event.reason}`);
if (event.wasClean) {
console.log('Clean disconnect');
} else {
console.log('Connection lost — will retry');
}
};Коды закрытия
Стандартные коды закрытия WebSocket: 1000 = штатное закрытие, 1001 = уход узла, 1006 = аномальное закрытие (без кадра закрытия), 1008 = нарушение политики.
readyState
ws.readyState сообщает текущее состояние соединения: CONNECTING (0), OPEN (1), CLOSING (2) или CLOSED (3). Всегда проверяйте его перед отправкой.
function sendSafely(ws, data) {
if (ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify(data));
} else {
console.warn('WebSocket not open, dropping message');
}
}Закрытие соединения
Вызовите ws.close(code, reason), чтобы начать корректное закрытие. Сервер получает кадр закрытия и может ответить собственным кадром.
// Normal close
ws.close(1000, 'User logged out');
// Close from a cleanup effect
return () => ws.close();Двоичные данные
Установите ws.binaryType = 'arraybuffer' (или 'blob'), чтобы получать двоичные сообщения. Это полезно для аудио, изображений или пользовательских протоколов.
ws.binaryType = 'arraybuffer';
ws.onmessage = (event) => {
if (event.data instanceof ArrayBuffer) {
const view = new Uint8Array(event.data);
console.log('Binary message, bytes:', view.length);
} else {
console.log('Text message:', event.data);
}
};Проверка связи / эхо-ответ
API WebSocket в браузере не предоставляет доступ к кадрам проверки связи, но можно реализовать проверку на уровне приложения: отправлять сообщение проверки связи каждые N секунд и ожидать ответ.
function startHeartbeat(ws) {
return setInterval(() => {
if (ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({ type: 'ping' }));
}
}, 30_000);
}WebSocket и события, отправляемые сервером
Используйте WebSocket для двунаправленной связи (чаты, игры). Используйте события, отправляемые сервером (SSE), только для потоков от сервера к клиенту (уведомления, обновляемые данные) — SSE работает поверх обычного HTTP и автоматически восстанавливает соединение.
Быстрая проверка
Какое значение readyState означает, что соединение открыто и готово к отправке?
Итоги
Создавайте соединения с помощью new WebSocket(url), отправляйте объекты, преобразованные в строки JSON, через ws.send() и обрабатывайте события onmessage, onerror и onclose. Проверяйте readyState перед отправкой и корректно закрывайте соединение с помощью ws.close(1000).
Часто задаваемые вопросы
Урок «Основы WebSocket в браузере» бесплатный?
Да — полный текст урока «Основы WebSocket в браузере» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.
Чему я научусь в уроке «Основы WebSocket в браузере»?
Открывайте соединения WebSocket, отправляйте сообщения и обрабатывайте события через встроенный API WebSocket. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать React Academy?
Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Основы WebSocket в браузере»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке React Academy?
Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Основы WebSocket в браузере
- Использование Socket.IO с React
- Создание компонента чата в реальном времени
- Переподключение, обработка ошибок и очистка