HTML5 的 Server-sent Events 是一种全新的通信方式，可以使服务端向客户端实时推送数据，并且具有高性能、低延迟等优势。本文将为大家详细介绍 Server-sent Events 的原理、使用方法以及示例代码，以便读者深入学习和实践。
什么是 Server-sent Events
Server-sent Events 是一种轻量级的服务器推送技术，可以让服务端向客户端主动地发送事件消息。与传统的轮询或长轮询方式相比，Server-sent Events 更能提高性能、降低延迟，同时也更易于使用和维护。
Server-sent Events 实现了在单个 HTTP 连接上发送多条消息的功能，避免了频繁建立和关闭连接的繁琐过程，从而节省了服务器和客户端的资源。此外，Server-sent Events 还具备事件流的特点，即客户端可以实时接收服务器端发送的消息，而不需要先进行请求和等待。
Server-sent Events 使用的协议是 HTTP（或 HTTPS），并且只能从服务器向浏览器端发送数据，不能反过来，在此意义下，它更适用于一些不需要多方通信或者不需要及时响应的场景，例如数据推送、系统监控等。
Server-sent Events 的应用场景
- 通知系统：将服务器产生的事件消息实时推送到客户端，例如社交网络的通知、邮件系统的推送等。
- 实时数据更新：通过 Server-sent Events，可以迅速更新客户端展示的数据，而不需要页面刷新，例如在线股票行情、即时天气预报等。
- 聊天室：服务端可以通过 Server-sent Events 实现与客户端的即时聊天交互。
Server-sent Events 原理
Server-sent Events 的核心是通过 EventSource 对象与服务端进行连接，该对象可以接收从服务器推送的事件消息，并且在收到消息时可以触发 onmessage 事件。
在浏览器端创建 EventSource 对象时，需指定连接的 URL 地址，例如：
const eventSource = new EventSource('/events');此处的 URL 地址是服务器端的服务地址，可以是一个 RESTful API、WebSocket 或者其他形式的服务端接口。需要注意的是，Server-sent Events 和 WebSocket 的使用方式类似，但不同之处在于 Server-sent Events 是基于 HTTP 协议通信的。
服务端向客户端推送消息的格式如下：
event: <事件类型> data: <事件数据>
其中，事件数据必须是字符串，事件类型可以不指定，若指定则必须在前面加上“event:”前缀。
客户端收到服务端推送的消息后，可以通过 onmessage 事件做出响应，例如：
eventSource.onmessage = function(event) {
const data = JSON.parse(event.data); // 解析服务器传递的 JSON 格式数据
// 处理数据
};Server-sent Events 示例代码
下面是一个简单的 Server-sent Events 的示例代码，展示了如何实现一个服务端推送消息给客户端的功能：
服务端示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
-- -------- --- ---------- -
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
-------------- -- -
----- ---- - ----------------
----- --- ----------------------------
---
----------------- ----------- --------------
-- ------
- ---- -
-------------------
-------------- ---------
-
----------------客户端示例代码：
const eventSource = new EventSource('/events');
eventSource.onmessage = function(event) {
const data = JSON.parse(event.data);
console.log(`收到消息：${data.time}`);
};以上代码实现了每秒钟向客户端推送当前的时间。在客户端控制台中，会不断输出类似于“收到消息：23:29:12”这样的内容。
总结
HTML5 的 Server-sent Events 是一种高性能、低延迟的服务端推送技术，使用起来非常便捷，适用于许多实时数据更新、聊天室等场景。本文通过深入剖析 Server-sent Events 的原理和示例代码，希望能够帮助读者更好地理解和应用这一技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6503c2b095b1f8cacd089be0