随着 Web 应用逐渐向实时化方向演进,实现实时数据推送成为前端开发中的一大挑战。SSE 技术,也就是 Server-Sent Events,能够很好地解决这个问题。本文将介绍 SSE 技术的原理、应用场景以及具体实现方式。
原理
SSE 技术基于 HTTP 协议,客户端与服务器建立一条持久连接,服务器通过该连接向客户端发送数据,实现实时数据推送。
客户端通过 JavaScript API EventSource
来监听服务器推送的数据。当服务器有数据推送时,EventSource
会触发 onmessage
事件,并将数据以 Event
对象的形式传递给回调函数。
SSE 技术的数据传输方式是单向的,即服务器只能向客户端发送数据,不能接收客户端的数据。
应用场景
SSE 技术适用于以下场景:
- 实时消息通知:例如在线聊天室、股票行情等。
- 实时数据展示:例如网站实时访问量、游戏实时得分等。
与 Websocket 相比,SSE 技术的优势在于对浏览器和服务器的支持更加广泛,并且实现相对简单,不需要像 Websocket 那样实现复杂的握手协议。
实现方式
服务器端
Express
在 Express 框架中,可以通过 res.write()
方法向客户端发送数据,然后通过 res.end()
方法关闭连接。
-- -------------------- ---- ------- ------------------ ----- ---- -- - ----------------------------- --------------------- ------------------------------ ------------ --------------------------- -------------- -------------- -- - ----- ---- - ------ ----- --------------------------- ---------------- -- ------ --------------- -- -- - ----------------------- ---------- ---------- --- ---
上面的示例代码中,我们创建了一个 /stream
的路由,使用 res.setHeader()
方法设置响应头,然后使用 setInterval()
方法每隔 1 秒向客户端发送当前时间戳。
当客户端关闭连接时,会触发 req.on('close')
事件,我们可以在该事件中关闭连接。
Koa
在 Koa 框架中,可以使用 ctx.body
属性向客户端发送数据。在 ctx.set()
方法中设置响应头。
-- -------------------- ---- ------- ------------- ----- -- - --------- --------------- -------------------- ---------------- ----------- ------------- ------------- --- -------- - ----- --------- -- - ----- ------ - ----- ------ ----- --------------------------- ----- --- --------------- -- ------------------- ------- - -- ------------------- -- -- - ----------------------- ---------- --- ---
上面是使用 Koa 框架实现 SSE 技术的示例代码,与 Express 实现方式类似。
客户端
客户端可以使用 EventSource
对象来监听服务器推送的数据。
-- -------------------- ---- ------- ----- ----------- - --- ----------------------- ------------------ - -- -- - ----------------------- ---------- -- --------------------- - ------- -- - ---------------------- ---------------- -- ------------------- - ------- -- - --------------------- ---------------------- --
上面的示例代码中,我们创建了一个 EventSource
对象,并使用其 onopen
、onmessage
、onerror
属性来监听事件。
onopen
事件表示连接已经建立,onmessage
事件表示接收到了服务器推送的数据,onerror
事件表示出现了错误。
总结
本文介绍了 SSE 技术的原理、应用场景以及具体实现方式。SSE 技术相对简单,易于实现,并且兼容性较好,可以很好地解决实时数据推送的问题。但需要注意的是,SSE 技术支持的协议为 HTTP,与服务器的连接数有一定限制,不适用于高并发的场景。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64ec9aa8f6b2d6eab36e8489