Server-Sent Events 是一种 HTML5 规范定义的技术，它允许服务器在客户端浏览器内推送数据流。与 WebSockets 相比，Server-Sent Events 的优势在于它的实现更简单，且允许使用传统的 HTTP 通信方式。
为什么要使用 Server-Sent Events？
在现代 Web 应用程序中，服务器经常需要将更新的数据推送到客户端，以便实时地更新页面上的内容。在过去，为了实现这一目的，通常会使用轮询或长轮询技术。然而，这种做法不仅效率低下，而且会浪费带宽和服务器资源。
Server-Sent Events 的诞生解决了这些问题。通过简单的 HTTP 通信，服务器可以推送实时数据到客户端，从而减少了网络流量和服务器负载，提高了应用程序的性能和用户体验。
如何使用 Server-Sent Events？
使用 Server-Sent Events，我们需要在客户端使用 JavaScript 代码连接到服务器，并监听服务器发送的消息。
连接到服务器
连接到服务器的代码如下所示：
let eventSource = new EventSource('/events');其中，/events 是服务器端提供的事件源 URL。连接成功后，客户端会一直保持连接，等待服务器发送事件数据。
监听服务器发送的消息
服务器发送消息的代码如下所示：
function sendEvent(data) {
let event = new Event('message', { data: data });
eventSource.dispatchEvent(event);
}其中，data 是服务器发送的数据，可以是任意格式，如 JSON、XML 等。message 是事件类型，代表服务器向客户端发送了一条消息。
在客户端，我们需要监听这个 message 事件，并处理服务器发送的消息。代码如下所示：
eventSource.addEventListener('message', function(event) {
let data = JSON.parse(event.data);
console.log(data);
});其中，data 是服务器发送的消息，需要根据实际情况进行解析和处理。我们可以在这里更新页面内容、显示通知等。
断开连接
如果客户端不再需要从服务器接收消息，可以通过以下代码断开连接：
eventSource.close();
简单 DEMO 演示
下面是一个简单的 DEMO，代码演示了如何在客户端连接到服务器，并接收服务器发送的实时数据。
服务器代码
服务器端采用 Node.js 编写，代码如下所示：
-- -------------------- ---- -------
----- ---- - ----------------
--- ------ - ------------------------------- ---- -
------------------ -
--------------- --------------------
---------------- -----------
------------------------------ ----
---
---------------------- -
--- ---- - - ----- --- --------------------------- --
---------------- - - -------------------- - --------
-- ------
---
--------------------在上述代码中，我们创建了一个 HTTP 服务器，监听端口号为 8080。当客户端连接到服务器时，服务器会向客户端每秒钟发送一条包含系统当前时间的消息。
客户端代码
客户端采用 HTML 和 JavaScript 编写，代码如下所示：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------ ------ ------------
-------
------
--------------- ------ ---------
------------- ---------------------
--------
--- ----------- - --- -------------------------------------
--------------------------------------- --------------- -
--- ---- - -----------------------
----------------------------------------- - ----------
---
---------
-------
-------在上述代码中，我们向服务器发起了一个连接，监听事件源 URL 为 http://localhost:8080。当客户端接收到服务器发送的消息后，会将当前时间显示在页面上。
总结
使用 Server-Sent Events 技术，服务器可以将实时数据推送到客户端浏览器，从而实现实时更新功能。Server-Sent Events 相对于传统的轮询或长轮询技术，具有更高的性能和更少的开销，是一种非常优秀的实时数据通信方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6496dff248841e9894410932