在现代化的 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