在 Web 应用程序中，有时需要在服务器端发出实时通知，以便客户端接收并处理数据。这类通知通常被称为服务器推送 (Server Push) 或一些 Websockets 技术。然而，对于一个简单的 Web 或移动应用程序，使用 Ajax 轮询的方式来获取实时数据是一种更简单、更便宜的方式。
Server-sent Events (SSE) 是一种在浏览器和服务器之间提供实时通知的技术。不同于采用轮询的方式，SSE 让服务器始终保持打开状态，通过一个 HTTP 连接不断地向浏览器推送消息。当客户端连接上服务器并开始监听 SSE 的时候，一旦服务端有新的数据产生，SSE 协议会自动将数据推送给浏览器端进行处理，从而实现实时订单处理系统。
SSE 的优势
相较于其他实时通知技术，SSE 有以下优势：
- SSE 使用简单：相较于 WebSockets 技术或其他一些推送技术，SSE 的使用十分容易，只需要开启一个 http 连接即可。
- SSE 具有更高的兼容性：相较于其他推送技术，SSE 的兼容性较高，只有一些旧的浏览器不支持 SSE。
- SSE 实时通知的延迟小：SSE 有缓存机制，可以确保实时信息的当时推送，即时性更强。
SSE 的使用方式
下面我们将介绍如何使用 SSE 实现一个实时订单处理系统。
服务端
服务端使用 SSE 的时候需要设置 HTTP Content-Type + text/event-stream。并且需要保持响应的打开状态，不断地向客户端发送消息。下面是示例代码：
-- -------------------- ---- -------
------------------ ------------- ---- -
---------
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
--- ---- - ------------------------ - ---- - --
----------------- ------------------- --------------
-- ------
---在代码中我们创建了一个 /orders 的路由，在该路由下，我们设置响应的 Content-Type 为 text/event-stream，并且通过 HTTP 报头中 Connection: keep-alive 的方式，保持连接打开，使得服务端可以不断地向客户端发送消息。在 setInterval 里面我们向客户端发送 event 类型为 order-update 的消息，数据为随机数。
客户端
在客户端中我们需要创建一个 EventSource 对象，对服务端的 SSE 响应进行监听。当服务端推送消息的时候，客户端会收到 message 事件，我们可以通过消息的 event 字段和 data 字段来进行数据处理。下面是示例代码：
-- -------------------- ---- -------
--- ------ - --- -----------------------
--------------------------------------- --------------- -
--- ---- - -----------------------
-- ------
--------------------- --- ----- -------------- ------
-- -------
-------------------------------- --------------- -
-- ----------------- -- ------------------- -
------------------- ---------- ----------
- ---- -
-------------------
-
-- -------在代码中我们创建了一个 EventSource 对象，并为其添加两个监听器。一个监听器用于监听 order-update 事件，用于处理数据，并在控制台上展示。另一个监听器用于处理服务器连接关闭事件。
总结
通过本文的介绍，我们了解了 SSE 的优势，以及如何使用 SSE 实现一个实时订单处理系统。除此之外，SSE 还可以进行私有通信、实时日志等应用场景。在 Web 应用程序开发中，SSE 技术将会有着更广泛的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645c9b1d968c7c53b0f08b59