Page 256 - Web性能权威指南

的 JavaScript 事件监听器即可：

var source = new EventSource("/path/to/stream-url"); ➊

source.onopen = function () { ... }; ➋
source.onerror = function () { ... }; ➌

source.addEventListener("foo", function (event) { ➍
processFoo(event.data);
});
source.onmessage = function (event) { ➎
log_message(event.id, event.data);
if (event.id== "CLOSE") {
source.close(); ➏
}
}

➊ 打开到流终点的 SSE 连接
➋ 可选的回调，建立连接时调用
➌ 可选的回调，连接失败时调用
➍ 监听 "foo" 事件，调用自定义代码
➎ 监听所有事件，不明确指定事件类型
➏ 如果服务器发送 "CLOSE" 消息 ID，关闭 SSE 连接

EventSource 可以像常规 XHR 一样利用 CORS 许可及选择同意机制，实
现客户端到远程服务器的流式事件数据传输。

这就是客户端 API 的全部。浏览器会帮我们处理一切：替我们协商建立连接，接收
并递增地解析数据，标识消息的范围，最终触发 DOM 事件。EventSource 接口的设
计就是让开发者只关注业务逻辑：打开新连接、处理接收到的事件通知，然后在完
事儿时终止流。

SSE 实现了节省内存的 XHR 流。与原始的 XHR 流在连接关闭前会缓冲接
收到的所有响应不同，SSE 连接会丢弃已经处理过的消息，而不会在内存
中累积。

值得一提的是，EventSource 接口还能自动重新连接并跟踪最近接收的消息：如果连
接断开了，EventSource 会自动重新连接到服务器，还可以向服务器发送上一次接收
到的消息 ID，以便服务器重传丢失的消息并恢复流。

244 ｜ 第 16 章