正在加载...

HTML Server-Sent Events (SSE)

上一课 Web Workers 在后台线程运行 JavaScript，并用 postMessage 与页面通信——本地 CPU，无服务器流。本课离开离线计算，介绍 SSE：服务器通过 HTTP 推送文本更新。范围务实——打开、监听、单向推送——不是 Node 流服务器课。

为何在 HTML 课学 SSE

初学者需要实时分数或日志，又不想自造套接字协议。SSE 是通过 HTTP 推送文本的常见第一套 API。在 Workers 之后，分工不同：服务器拥有流；页面脚本拥有 EventSource 与 DOM。

直接回答

1) new EventSource("/events")。2) onmessage 并读 e.data。3) 在页面更新 DOM。4) onerror。5) 单向。6) 全双工用 WebSockets；稀少用 polling；本地 CPU 用 Workers。

📊 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 流
  • message 时 onmessage
  • 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、轮询、套接字或 worker

  • 经 HTTP 频繁推送状态：适合入门 SSE
  • 很少刷新：轮询可能够用
  • 双向聊天：考虑 WebSockets
  • 沉重本地循环：那是 Workers
  • 拖动卡片：那是 DnD
  • 构建后端流端点：超出本入门

练习 — 打开、监听、对比

  1. 阅读监听片段。
  2. 浏览 text/event-stream。
  3. 阅读追加日志。
  4. 一句话：Workers 本地；SSE 来自服务器。
  5. 一句话：SSE 单向；WebSockets 全双工。
  6. （可选）真实 URL。
  7. 预告：XHTML。

易错点

  • 期望经 EventSource 浏览器→服务器
  • 与 Web Workers 混淆
  • 忘记 event-stream 内容类型
  • 对极少更新用 SSE
  • 忽略 onerror
  • 把入门当成完整后端流课
  • 混淆 EventSource 与 Worker/WebSocket

小结

  • SSE 经 HTTP 流式传输服务器→浏览器文本
  • EventSource、onmessage/onerror；在页面画 DOM
  • 单向推送；全双工用 WebSockets
  • Workers 是本地离线计算；本课是服务器推送
  • 真实演示需要 text/event-stream
  • 下一课：XHTML

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
5
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 67 的 68
Html 教程