在实现 Web 系统时，我们通常需要实时更新数据并将其展示在用户界面上。常见的做法是使用 Ajax 轮询或者 WebSocket，但是这些方法都存在一些问题。Ajax 轮询可能会导致流量浪费；WebSocket 相比较 Ajax 轮询来说复杂度更高，同时需要维护长连接。而 Server-sent Events（SSE）则是一种简单直接的实时数据更新方法。
什么是 Server-sent Events？
Server-sent Events 是一种基于 HTTP 的实时服务器推送技术。它的实现方法是通过 HTTP 连接，在服务器端随时将数据发送给客户端，而不需要使用 Ajax 轮询或者 WebSocket。
SSE 支持服务器向客户端发送任意事件，这些事件可以由 JavaScript 监听，从而实现实时数据更新。SSE 的数据格式是纯文本流，每个事件由“event”，“data”和“id”三个字段组成。其中，“event”和“id”是可选字段，“data”是必填字段，用于携带事件的数据。
如何使用 Server-sent Events？
要使用 SSE，需要在客户端创建一个 EventSource 对象。该对象接收一个 URL 参数，用于指定服务器端发送数据的地址。当接收到数据时，EventSource 对象会触发 onmessage 事件，从而实现数据更新。
以下是一个简单的 SSE 示例代码，其中后端使用 Node.js 的 Express 框架实现：
-- -------------------- ---- -------
-- ---------
----- ------- - -------------------
----- --- - ----------
----- ---- - -----
--------------- ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
-------------- -- -
----- ---- - -
-------- ------ ---- --------
----- --- ---------------------
--
---------------- ------------------------------
-- ------
---
---------------- -- -- -
------------------- -- --------- -- ---------------------------
----- -------------------- ---- -------
---- ----------- ---
--------- -----
------
------
---------- ------------
-------
------
---- -------------------
--------
----- ----------- - --- --------------------
--------------------- - ------- -- -
----- ---- - -----------------------
-------------------------------------------- - -------------
--
---------
-------
-------Server-sent Events 的优势
与 Ajax 轮询和 WebSocket 相比，SSE 的优势主要体现在以下方面：
1. 简单直接
相比较 WebSocket，SSE 的实现更加简单，也不需要像 Ajax 轮询一样频繁地向服务器发送请求。同时，SSE 可以通过 HTTP/2 连接实现多路复用，从而进一步提高性能。
2. 消息处理更加可控
SSE 的数据流是文本流，相对于 WebSocket 的二进制数据格式来说更加直观，同时可以更方便地进行消息处理。而且，SSE 可以通过事件机制来控制消息的发送和接收，从而更好地掌控系统的性能。
总结
在 Web 开发中，实时数据更新是非常重要的功能。SSE 提供了一种简单直接、可控性强的实时数据更新方法。通过上面的示例代码可以看出，使用 SSE 并不会增加太多的复杂度，而且可以提高系统的性能。因此，在开发 Web 系统时，不妨考虑使用 Server-sent Events 来实现实时数据更新。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64562bee968c7c53b096c383