WebSocket: что это и зачем

Проблема HTTP

HTTP — request/response. Клиент спрашивает — сервер отвечает. Сервер сам инициировать не может.

Что нужно для real-time:

• Чат — новое сообщение от другого юзера.
• Уведомления — push.
• Биржа — цена меняется каждую секунду.
• Игры — действия игроков.
• Коллаборация — Google Docs.
• Логи — стрим в реальном времени.

Всё это — сервер должен сам отправить данные.

Способы решения

1. Polling — клиент спрашивает каждую секунду.

GET /messages — каждую секунду

Минусы:

• Трафик — 99% пустых ответов.
• Задержка — до 1 секунды.
• Нагрузка — сервер захлёбывается.

2. Long polling — клиент держит соединение открытым, пока сервер не ответит.

GET /messages — ждёт 30 секунд

Минусы:

• Каждый запрос — новое соединение.
• Ресурсы — сервер держит много открытых соединений.

3. Server-Sent Events (SSE) — односторонний поток от сервера.

GET /events — сервер шлёт поток

Плюсы:

• Простой — обычный HTTP.
• Автопереподключение.

Минусы:

• Только от сервера — клиент не может.

4. WebSocket — двустороннее постоянное соединение.

ws://example.com — открыт канал
Клиент ↔ Сервер

Плюсы:

• Двустороннее.
• Низкая задержка (миллисекунды).
• Минимум накладных расходов после handshake.

Минусы:

• Сложнее — состояние, соединения.
• Не масштабируется без Redis-моста.
• Не HTTP — свои прокси-правила.

Как работает WebSocket

1. Handshake. Клиент отправляет HTTP-запрос с заголовком Upgrade: websocket.

GET /chat HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13

2. Ответ сервера:

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

3. Соединение открыто. Дальше — фреймы WebSocket.

Скорость: после handshake — 2–4 байта накладных на сообщение против килобайтов заголовков HTTP.

WebSocket vs SSE vs Polling

Когда WebSocket

Да:

• Чат.
• Мультиплеерные игры.
• Коллаборативные редакторы.
• Трейдинг.
• Live-уведомления.

Нет:

• Простые обновления — SSE или polling.
• Редкие события — webhook или push.
• Односторонние данные — SSE.
• Мобильные push — APNs / FCM.

Что такое Socket.IO

Socket.IO — библиотека поверх WebSocket.

Что даёт:

• Fallback на long polling.
• Автоматическое переподключение.
• Комнаты (rooms).
• Broadcast.
• Ack / emit с ответом.
• Namespaces.
• Совместимость клиент/сервер.

⚠️ Не совместим с чистым WebSocket. Ему нужен клиент Socket.IO.

Чистый WebSocket vs Socket.IO

Правило: Socket.IO — для большинства проектов. Чистый WS — когда нужен минимум или совместимость с другим стеком.

Стек для Laravel / Node

Laravel:

• Laravel Reverb — WebSocket-сервер от Laravel (2024).
• Laravel Echo — JS-клиент.
• Pusher / Ably — внешние сервисы.
• Laravel WebSockets — пакет (deprecated, теперь Reverb).

Node.js:

• ws — минимальный WebSocket.
• Socket.IO — с fallback и комнатами.

В связке Laravel + Node:

• Laravel — бизнес-логика.
• Node-сервер — WebSocket.
• Redis pub/sub — мост между Laravel и Node.

Что дальше

1. WebSocket: что это и зачем
2. WebSocket в Node.js (ws)
3. Socket.IO: основы
4. Socket.IO: комнаты и события
5. Аутентификация в WebSocket
6. Real-time в Laravel (Reverb + Echo)
7. Broadcasting в Laravel
8. Redis pub/sub для масштабирования
9. Real-time в Next.js и Vue
10. Обработка ошибок и переподключение
11. Мониторинг и отладка
12. Практика: чат на Socket.IO

Практика

Ответь на вопросы:

1. Чем WebSocket отличается от HTTP?
2. Когда WebSocket — плохое решение?
3. Что даёт Socket.IO поверх WebSocket?
4. Что нужно для масштабирования WebSocket на несколько серверов?

Открой:

https://echo.websocket.org

Отправь сообщение — увидишь эхо. Это WebSocket.

Итог

• HTTP — request/response, сервер не может сам.
• WebSocket — двусторонний постоянный канал.
• Handshake — HTTP → Upgrade.
• Polling, SSE, WebSocket — разные подходы.
• Socket.IO — надстройка с комнатами и fallback.
• В Laravel — Reverb + Echo.
• Для масштаба — Redis pub/sub.

Дальше — WebSocket в Node.js (ws).