在现代化的 Web 应用中,不同页面之间的交互和通信已经成为了一个基本需求。传统的实现方式如 WebSocket 是一种实时双向通信协议,它需要在服务器端和客户端同时支持。然而,如果希望在仅使用 JavaScript 前端代码的情况下实现跨页面通信, Server-sent events(SSE)则是一种更加轻量的选项。
什么是 Server-sent events
Server-sent events 是一种在浏览器和服务器之间单向发送事件的 Web 技术。它旨在解决浏览器端的服务端推送消息问题,而不需要像 WebSocket 那样一直保持连接。服务器可以通过 SSE 将事件推送给客户端,而客户端则可以通过监听事件来处理它们。相比起轮询或长轮询,使用 SSE 可以实现更快的数据传输,并且在客户端实现更低的负载(因为只有在有事件到达的情况下才会发送请求)。
如何使用 Server-sent events
SSE 是基于事件流的,它发送的数据以文本的形式组成。服务器可以通过 HTTP 1.1 的持久连接来发送这些数据。在客户端,我们可以通过构建 SSE 对象以及定义事件监听器来接收这些数据。
服务器端
对于服务器端,SSE 只需要使用一个 HTTP endpoint 和一些“特殊”的 HTTP 头部就可以实现。下面是一个示例的 Node.js 实现,它使用 Express 框架将“Hello World”消息发送到客户端:
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- -------------------- ----- ---- -- - ----------------------------- --------------------- ------------------------------ ------------ -------------- -- - ----- ------- - ------ -------- ----- ----- - ------ ------------------ ------- --------- ----------------- -- ------ --- -----------------
上述代码中,我们通过设置常见的 SSE 头部,即 Content-Type
和 Cache-Control
来告诉客户端将要接收到 SSE 数据。接下来我们使用 setInterval
方法来不断发送数据到客户端。为了遵循 SSE 格式,我们需要将数据用 data:
关键字封装,并且在数据结尾添加双换行符 '\n\n'
来使数据被识别为一个 SSE 事件。
客户端
在客户端,我们可以通过 JavaScript 来创建 EventSource 对象。这个对象可以监听事件流并解析 SSE 事件:
-- -------------------- ---- ------- ----- ----------- - --- ------------------------- --------------------- - ------- -- - ----- ------- - ------------------------------- --------------------- -------- ------------- -- ------------------- - ------- -- - ------------------ ------ ------ ---- ------ ----------- --
在上述代码中,我们创建了一个新的 EventSource 对象,并将其传入前面定义好的 HTTP endpoint URL。我们设置了两个事件监听器: onmessage
和 onerror
。在 onmessage
监听器中,我们解析 SSE 数据并打印出其中的 message
属性。在 onerror
监听器中,我们处理 SSE 连接失败的情况。
现实世界的使用场景
SSE 可以用来实现很多现实世界的需求。比如实时消息推送,互动游戏,实时金融股票报价等。我们下面会通过一个基于 SSE 的浏览器聊天室示例来展示它的应用。
基于 SSE 的浏览器聊天室示例
这是一个简单的聊天室应用程序,支持多个浏览器之间的实时聊天。对于这个应用程序,我们在服务器上使用 SSE 来监听新用户连接,以及接收和广播消息:
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ----- ---------- - ----------------------- ----- ---- - ---------------- ------------------------------- --------- ---- ---- --------------------------- ---------------- -------------------- ----- ---- -- - ----------------------------- --------------------- ------------------------------ ------------ -- ------ ----- ----- - ------ ------------------ ----- ------ ----- --------- -------- ------ --- ------ --------- ----------------- -- ---------- ----- ------------ - ------ ------------------ ----- ----------- ----- --------- -------- -- --- ---- --- ------ --- ---- ------ --------- ------------------------ -- ----------- -------------- ------ -- - ----- ------- - ----------------- ----- ----- - ------ ------------------ ----- ------ ----- ------------- -------- --------------- --------- ----------------- --- --------------- -- -- - -- --------- ----- ----- - ------ ------------------ ----- ------------ ----- --------- -------- -- ---- --- ---- --- ---- ------ --------- ----------------- --- --- ----- ----------- - --- -------- ---------------- - --- ------ ---------- -- ------------ - ------------------------ - - --------------------- ----- ---- -- - --- ------ ---------- -- ------------ - ------------------------ - -------------------- --- ---------------- -- -- ----------------- ------ ------- -- ---- --------- -- -- --- -------- ----- ---- - ---------------- ----- ------ - ----------------------- ---- -- - ------------------ - ----------- ------------- --------------- -------------------- ---------------- ---------- --- ----- ---------- - ---- ----------------------------- --------------- -- -- - ----- ----- - -------------------------------- ------------------------- --- --- --- ------------------- -- -- ---------------------- ------ ------- -- ---- ---------
在客户端,我们可以使用以下代码来监听这些消息和发送消息:
-- -------------------- ---- ------- ----- ----------- - --- ---------------------------------------------- --------------------------------------- ------- -- - ----- ---- - ----------------------- ----- - ----- ----- ------- - - ----- ------ ------ - ---- ----------- ---- ------------ ------------------------- ------------- ------ ---- ------ ---------------- --------- ------ - --- ------------------- - ------- -- - ------------------ ------ ------ ---- ------ ----------- -- ----- ----------- - -- -- - ----- ------------ - ---------------------------------------- ----- ----------------- - -------------------------- -- ------------------- - ----- ---- - ---------------- ----- -------- ----------------- --- ----- --- - --- ----------------- ---------------- ---------------------------------- ------------------------------------ -------------------- --------------- ------------------ - --- - --
示例实现中的 broadcast
函数使用了在 slingr0/Welcome-Bot 上开发过的 code, 但是这个listenser不稳定,所以限制和开发上还有点不同。
结论
使用 SSE 实现跨页面通信是非常有用的,它比传统的 WebSocket 实现更加轻量级,并且非常容易实现。不仅如此,SSE 还能用于实现很多现实世界的应用程序。在将来,SSE 将继续成为 Web 开发人员的重要工具之一。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/66ffb5641b0bf82c71ceb272