在前端开发中，实时数据更新是非常常见的需求。例如，当我们需要展示实时股票价格、在线聊天信息、新闻更新等等，就需要实现实时数据更新的效果。在过去，实现实时数据更新通常需要使用轮询或 WebSocket 等技术，但这些技术都存在一些问题，例如轮询会消耗大量的带宽和服务器资源，WebSocket 实现起来比较复杂。而今天我们要介绍的 Server-sent Events 技术，可以轻松地实现实时数据更新效果，并且具有优秀的兼容性和易用性。
Server-sent Events 简介
Server-sent Events 是一种基于 HTTP 协议的服务器推送技术，它可以让服务器向客户端推送实时数据，而无需客户端发起请求。在 Server-sent Events 中，服务器会创建一个持久化的连接，然后向客户端发送数据，直到连接被关闭。客户端可以使用 JavaScript API 来监听服务器发送的数据，并对其进行处理。
Server-sent Events 的数据格式是纯文本，可以使用任何编码格式，例如 JSON、XML、HTML 等等。服务器可以定期或根据事件触发条件发送数据，同时可以设置数据的 ID、类型、重试时间等属性。客户端可以通过事件监听器来监听服务器发送的数据，并且可以通过 JavaScript API 来控制连接的状态。
Server-sent Events 具有以下优点：
- 兼容性好：Server-sent Events 是基于 HTTP 协议的，不需要使用额外的插件或库，因此具有非常好的兼容性。
- 简单易用：Server-sent Events 的 API 简单易用，可以轻松地实现实时数据更新效果。
- 轻量级：Server-sent Events 的数据格式是纯文本，可以使用任何编码格式，因此非常轻量级。
Server-sent Events 的使用
在使用 Server-sent Events 之前，我们需要先了解一下它的 API。Server-sent Events 的 API 包含两个主要部分：EventSource 对象和服务器端代码。
EventSource 对象
EventSource 对象是客户端 JavaScript API 的核心，它用于监听服务器发送的数据，并对其进行处理。EventSource 对象的使用非常简单，只需要创建一个 EventSource 对象，然后使用 addEventListener 方法来监听服务器发送的数据即可。下面是一个使用 EventSource 对象的示例代码：
const eventSource = new EventSource('/stream');
eventSource.addEventListener('message', event => {
console.log(event.data);
});在上面的代码中，我们创建了一个 EventSource 对象，并且将其连接到了服务器端的 /stream 路径。然后，我们使用 addEventListener 方法来监听服务器发送的 message 事件，并在事件处理函数中输出服务器发送的数据。
除了 message 事件之外，EventSource 对象还支持以下事件：
- open：当连接打开时触发。
- error：当连接发生错误时触发，例如服务器关闭连接或连接超时。
- messageevent：当接收到消息时触发，包含了服务器发送的数据。
EventSource 对象还有一些其他的属性和方法，例如 close 方法用于关闭连接，readyState 属性表示连接状态，withCredentials 属性表示是否发送 cookie 等等，具体可以参考 MDN 文档。
服务器端代码
在服务器端，我们需要创建一个持久化的连接，并向客户端发送实时数据。在 Node.js 中，可以使用 res.write 和 res.flush 方法来实现这个功能。下面是一个使用 Node.js 实现 Server-sent Events 的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- ---- - --- ----------------------------
---------------- --------------
------------
-- ------
--------------- -- -- -
------------------- -- ------- -- ---- -------
---在上面的代码中，我们创建了一个 HTTP 服务器，并设置了响应头的 Content-Type 为 text/event-stream，这是 Server-sent Events 的标准 MIME 类型。然后，我们使用 setInterval 方法定时向客户端发送数据，每秒发送一次时间字符串。注意，每条数据必须以 data: 开头，并以两个换行符结尾，这是 Server-sent Events 的数据格式要求。
Server-sent Events 的应用场景
Server-sent Events 可以用于实现各种实时数据更新效果，例如：
- 股票价格实时更新：当股票价格发生变化时，服务器可以向客户端发送最新的价格数据。
- 在线聊天信息实时更新：当有新的聊天信息时，服务器可以向客户端发送最新的消息数据。
- 新闻更新实时更新：当有新的新闻发布时，服务器可以向客户端发送最新的新闻数据。
- 游戏实时更新：当游戏状态发生变化时，服务器可以向客户端发送最新的游戏状态数据。
总结
Server-sent Events 是一种基于 HTTP 协议的服务器推送技术，可以轻松地实现实时数据更新效果，并且具有优秀的兼容性和易用性。在使用 Server-sent Events 时，我们需要使用 EventSource 对象来监听服务器发送的数据，并且需要在服务器端创建一个持久化的连接，并向客户端发送实时数据。Server-sent Events 可以用于实现各种实时数据更新效果，例如股票价格实时更新、在线聊天信息实时更新、新闻更新实时更新、游戏实时更新等等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660a31b9d10417a22297192d