介绍
Server-sent Events（简称 SSE）是一种服务器向客户端推送实时数据的协议，相比 WebSocket，它更轻量级，更易于实现，能够提供基于 HTTP 的实时数据更新。
本文将介绍如何使用原生 JavaScript 实现 SSE。
实现原理
SSE 是通过 HTTP 协议发送数据，每次发送一个事件（event），事件可以包含一个类型和数据。客户端通过 EventSource 对象与服务器建立连接，服务器不断的发送事件到客户端，客户端通过监听 message 事件来接收数据。
实现步骤
服务器端
首先，我们需要在服务器端实现 SSE，下面是一个简单的 Node.js 示例代码：
-- -------------------- ---- ------- ----- ---- - ---------------- -------------------------- ----- ---- - ------------------ - --------------- -------------------- -- --------- ----------------- ---------------- ----------- ------------------------------ --- -- ----------------- --- -------------- -- - -- ---- ----------------- ------------ ---------------- ----- -------------- -- ------ ----------------展开代码
上面的代码通过 http.createServer 方法创建了一个 HTTP 服务器，指定响应内容类型为 text/event-stream，然后每秒钟向客户端发送一个事件，事件类型为 message，内容为当前时间。
客户端
一旦服务端实现 SSE，我们需要在客户端通过 JavaScript 建立与服务器的连接，以接收服务器发送的数据。
在 HTML 中，使用 EventSource 构造函数创建一个与服务器的连接：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------- ------------ ------- ------ ---- -------------------- -------- ----- ----------- - --- ------------------------------------- --------------------------------------- ------- -- - -- ----- ----- -------- - ------------------------------------ ------------------ - ------------------ - ---------- - ------- --- ------------------------------------- -- -- - -- ---- ----------------------- -------- --- --------- ------- -------展开代码
上面的代码中，我们使用 eventSource.addEventListener('message', ...) 监听服务器发送的消息，使用 eventSource.addEventListener('error', ...) 监听连接错误事件。
总结
通过本文的介绍，我们了解了 SSE 的实现原理以及如何使用原生 JavaScript 在客户端和服务器端实现 SSE，希望可以对你理解 SSE 的原理和应用有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6458f430968c7c53b0b410c0
