Учебный конструктор · реальное время в вебе
Реальное время — Polling, SSE и WebSocket
Как чат, лента и счётчики обновляются сами, без F5? Обычный HTTP так не умеет: сервер не может позвонить клиенту первым. Собери картину из блоков в трёх способах — от костыля к настоящему пушу: опрос (спрашиваем по таймеру), SSE (сервер шлёт поток вниз) и WebSocket (живой двусторонний канал). Кликай блоки — узнаешь, зачем каждый, а выключив — увидишь, что сломается.
Незнакомы слова (дуплекс, рукопожатие, presence, бэкплейн…)? → словарь простыми словами внизу. Это третий способ общения: запрос-ответ → API, асинхронно → очереди, пуш вживую → здесь.
🔁 Опрос (polling). Самый простой «реалтайм»: клиент по таймеру каждые N секунд шлёт обычный HTTP-запрос «есть что-то новое?». Сервер отвечает «нет» или отдаёт свежее. Работает где угодно без спец-инфраструктуры, но это иллюзия живости: между обновлениями — задержка до целого интервала, а большинство запросов уходит впустую («нет, ничего»). Long-polling улучшает: сервер держит запрос открытым, пока событие не появится.
// опрос каждые 5 секунд
setInterval(async () => {
const res = await fetch("/api/updates?since=" + last);
const data = await res.json();
if (data.length) render(data); // часто — пусто
}, 5000);- setInterval 5000
- — частота опроса: меньше — свежее, но больше нагрузки
- ?since=last
- — просим только новое с прошлого раза
- часто — пусто
- — большинство запросов возвращают «ничего» — холостая нагрузка
- задержка
- — в среднем полинтервала между событием и его показом
| Способ | Направление | Соединение | Задержка | Когда |
|---|---|---|---|---|
| Опрос (polling) | клиент спрашивает | новое соединение каждый раз | до интервала опроса | просто и везде работает; редкие обновления, нет спец-инфры |
| Long-polling | клиент спрашивает, сервер ждёт | висит до события | почти мгновенно | фоллбэк, когда SSE/WS недоступны |
| SSE | сервер → клиент (одностороннее) | одно долгое HTTP | мгновенно | лента, уведомления, котировки — поток только вниз |
| WebSocket | ↔ в обе стороны | одно постоянное (ws) | мгновенно | чат, игры, совместное редактирование — нужен двусторонний обмен |
Правило: только сверху-вниз поток (лента, уведомления) → SSE; нужен обмен в обе стороны (чат, игры, соавторство) → WebSocket; ничего не настроить / совсем редко → опрос.
📖 Словарь: простыми словами
Встретил незнакомое слово выше — найди его здесь. Коротко — суть; разверни — подробное объяснение с аналогией.
Реальное время (realtime)данные у клиента обновляются сразу, без перезагрузки
Подходы, при которых новое появляется на экране в момент события, а не по F5. Спектр: от опроса (приближённо) до WebSocket (по-настоящему мгновенно).
Опрос (polling)клиент по таймеру спрашивает «есть новое?»
Простейший способ: каждые N секунд обычный HTTP-запрос. Работает везде, но много холостых запросов и задержка до интервала. Не настоящий пуш — имитация.
Long-pollingсервер держит запрос открытым до события
Улучшенный опрос: сервер не отвечает сразу «нет», а ждёт события (или таймаута) и отвечает тогда. Меньше холостых ответов, почти мгновенно. Частый фоллбэк.
SSE (Server-Sent Events)сервер шлёт поток событий по одному HTTP
Клиент через EventSource открывает долгое соединение и слушает; сервер пушит события строками data:. Одностороннее (сервер→клиент), просто, авто-reconnect из коробки.
WebSocketпостоянный двусторонний канал
Одно соединение, по которому и клиент, и сервер шлют сообщения в любой момент. Стартует как HTTP с Upgrade. Для чата, игр, совместной работы. Сложнее в эксплуатации.
Полный дуплекс (full-duplex)обе стороны шлют одновременно
Канал, где передача идёт в обе стороны разом, без очереди «сначала спросил — потом ответили». Это и отличает WebSocket от запрос-ответа.
HTTP Upgrade (рукопожатие)переключение HTTP-соединения в WebSocket
WS-соединение начинается обычным HTTP-запросом с заголовком Upgrade: websocket; сервер подтверждает (101 Switching Protocols), и дальше канал работает по протоколу ws.
Heartbeat (ping/pong)пинги, чтобы держать соединение живым
Периодические служебные сообщения: проверяют, что канал жив, и не дают прокси/мобильной сети закрыть «молчащее» соединение. По их пропаже ловят обрыв и переподключаются.
EventSourceвстроенный в браузер клиент SSE
JS-объект, который открывает SSE-поток и вызывает onmessage на каждое событие. Сам переподключается при обрыве и помнит Last-Event-ID.
Last-Event-IDметка для продолжения после обрыва
Идентификатор последнего полученного события: при авто-переподключении SSE клиент сообщает его серверу, чтобы не потерять и не задублировать события.
Комнаты / каналы (rooms)группы соединений для адресной рассылки
Логическая группировка подключений (чат-комната, документ): сообщение шлётся всем участникам комнаты, а не всем подключённым подряд.
Presenceкто сейчас онлайн / печатает
Отслеживание присутствия и активности участников в реальном времени. Само наличие живого соединения = «онлайн»; события «печатает…» идут по тому же каналу.
Sticky sessionклиент закреплён за одним сервером
Балансировщик ведёт клиента на тот же сервер всё время соединения. Нужно, потому что живое WS/SSE-соединение существует на конкретном узле и не переносится.
Pub/Sub-бэкплейншина между несколькими realtime-серверами
Когда серверов много, они обмениваются сообщениями через общий pub/sub (например Redis), чтобы клиент на сервере A получил сообщение от клиента на сервере B. Связывает живые соединения в кластере.
Постоянное соединениене закрывается между сообщениями
В отличие от обычного HTTP (открыл-ответил-закрыл), SSE/WS держат одно соединение долго — отсюда мгновенность и отсутствие накладных расходов на повторные подключения.
Задержка (latency)сколько проходит от события до показа
У опроса — до интервала; у long-polling/SSE/WS — практически мгновенно. Ключевая метрика «живости» интерфейса.
Backpressureзащита, когда событий больше, чем успевают принять
Если сервер шлёт быстрее, чем клиент обрабатывает, нужно притормаживать или копить, иначе память переполнится. Актуально для быстрых потоков (котировки, телеметрия).
Fallback (деградация)откат на способ попроще, если лучший недоступен
Библиотеки реального времени пробуют WebSocket, а при блокировке прокси откатываются на SSE или long-polling — лишь бы доставка работала.
C10k / много соединенийпроблема тысяч одновременных подключений
Реалтайм держит соединения открытыми, поэтому сервер ограничен не запросами/сек, а числом живых подключений. Масштабируется бэкплейном и многими узлами.
Дальше по теме
Эти инструменты связаны с текущим — так задачи стыкуются на практике.
Все инструменты — в каталоге.