Загрузка...

HTML Server-Sent Events (SSE)

Ранее Web Workers выполняли JavaScript в фоновом потоке и общались со страницей через postMessage — локальный CPU, без серверного потока. Этот урок уходит от off-thread вычислений и знакомит с SSE: сервер пушит текстовые обновления по HTTP. Практика — открыть, слушать, односторонний push — не Node stream-серверы.

Зачем SSE в курсе HTML

Новичкам нужны живые очки или логи без своего socket-протокола. SSE — первая обычная API для push текста по HTTP. После Workers разделение иное: сервер владеет потоком; скрипт страницы — EventSource и DOM.

Прямой ответ

1) new EventSource("/events"). 2) onmessage и e.data. 3) Обновляйте DOM на странице. 4) onerror. 5) Односторонне. 6) WebSockets для дуплекса; polling для редкого; Workers для локального CPU.

📊 SSE vs WebSocket vs Worker

Topic SSE (this lesson) WebSocket Web Worker (prev)
Typical role Server→browser text stream Full duplex messages Local off-thread compute
Browser entry EventSource(url) new WebSocket(url) new Worker(url or Blob)
Direction One-way (server push) Two-way Page ↔ worker (no server required)
Transport idea HTTP text/event-stream WS protocol postMessage / onmessage
DOM updates On the page script On the page script On the page script only
This course depth Required (browser pattern) Contrast only Previous lesson
Not this lesson Full backend stream servers Chat product design SharedWorker fleets

Крошечный паттерн слушания EventSource

Только сторона браузера. /events должен быть реальным SSE-эндпоинтом; без сервера ошибка — всё равно учит форму API.

EventSource listen pattern

html 
<pre id="out">Waiting for stream…</pre>
<script>
const out = document.getElementById("out");
const es = new EventSource("/events");
es.onmessage = function (e) {
out.textContent = "Last update: " + e.data;
};
es.onerror = function () {
out.textContent = "SSE error or closed (need a real /events stream)";
};
</script>

Читаем вызовы слушания

  • EventSource открывает длинный HTTP-поток
  • onmessage на message
  • e.data — текстовая нагрузка
  • Страница пишет в pre
  • В отличие от Workers: нет postMessage в фоновый поток
  • onerror без сервера ожидаем
  • Держите интро маленьким

Добавление строк потока в лог

Живые UI часто добавляют каждое событие. Это демо хранит последние строки в списке.

Append SSE lines to a log

html 
<ul id="log"></ul>
<script>
const log = document.getElementById("log");
const es = new EventSource("/events");
es.onmessage = function (e) {
const li = document.createElement("li");
li.textContent = e.data;
log.appendChild(li);
while (log.children.length > 5) {
log.removeChild(log.firstChild);
}
};
es.onerror = function () {
if (!log.dataset.noted) {
log.dataset.noted = "1";
const li = document.createElement("li");
li.textContent = "Stream not available — wire a text/event-stream URL";
log.appendChild(li);
}
};
</script>

Читаем идею лога

  • Каждое onmessage создаёт li
  • Ограничьте список
  • По-прежнему односторонне
  • Не Web Worker
  • Именованные события есть; message достаточно
  • es.close() когда закончили
  • Дальше: XHTML

Выбор SSE, polling, сокетов или workers

  • Частый push статуса по HTTP: хороший fit SSE
  • Редкое обновление: polling может хватить
  • Чат в обе стороны: WebSockets
  • Тяжёлый локальный цикл: были Workers
  • Перетаскивание карточки: был DnD
  • Строить бэкенд stream-эндпоинт: за пределами интро

Практика — откройте, слушайте, сравните

  1. Прочитайте сниппет слушания.
  2. Просмотрите text/event-stream.
  3. Прочитайте append-лог.
  4. Предложение: Workers локально; SSE с сервера.
  5. Предложение: SSE односторонне; WebSockets дуплекс.
  6. Опционально реальный URL.
  7. Впереди: XHTML.

Лёгкие ошибки

  • Ждать браузер→сервер через EventSource
  • Путать с Web Workers
  • Забыть content-type event-stream
  • SSE для слишком редких обновлений
  • Игнорировать onerror
  • Считать интро полным бэкенд-streaming курсом
  • Путать EventSource с Worker или WebSocket

Итог

  • SSE стримит текст сервер→браузер по HTTP
  • EventSource, onmessage/onerror; DOM на странице
  • Односторонний push; WebSockets для дуплекса
  • Workers были локальным off-thread compute; этот урок — server push
  • Реальным демо нужен text/event-stream
  • Далее: XHTML

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
5
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 67 из 68
Html Урок