在前端开发中，以往实现对服务端数据的推送需要依赖 WebSocket 等技术，不过在一些场景中，使用简单的 Server-sent Events 技术就足以满足需求。本文将向您介绍 Server-sent Events 技术如何实现对服务端数据的分类推送，让您对该技术有更深入的理解。
什么是 Server-sent Events
Server-sent Events （SSE）是 HTML5 的一个新 API，它使我们能够在服务器端创建一个单向连接(connection)，从而让服务器向客户端推送数据。与 WebSocket 不同的是，SSE 的连接是单向的，服务器只能主动向客户端推送数据，而客户端却无法向服务器发送数据。
SSE 协议具有以下特点：
- 基于 HTTP，通过 HTTP 命令进行传输；
- 数据格式为纯文本；
- 服务器可以主动发起推送，客户端也可以停止推送；
- 可以配置重连机制。
Server-sent Events 如何实现数据推送
在服务器端，需要按照以下步骤来实现 SSE 数据推送：
- 通过 HTTP 头部 Content-Type 指定数据格式为
text/event-stream。 - 在网页中使用 JavaScript 创建一个 EventSource 对象，用于与服务器端建立 SSE 连接。
- 服务器向客户端推送数据时，按照以下格式构建数据并返回给客户端：
event: <事件类型> data: <数据>
其中，event 为自定义的事件类型，可以用于客户端针对不同事件类型做出不同的处理；data 则为具体的数据内容。
客户端接收到数据时，使用 onmessage 事件进行处理。下面是客户端的示例代码：
const eventSource = new EventSource('/sse');
eventSource.onmessage = function(event) {
console.log('收到 SSE 数据:', event.data);
};
eventSource.onerror = function(event) {
console.error('SSE 连接出错:', event);
};这里 EventSource 对象的构造函数接受一个 URL 参数，用于指定 SSE 连接的后端服务地址。在示例代码中，我们使用 /sse。
如何实现对服务端数据的分类推送
SSE 可以通过自定义事件类型实现对服务端数据的分类推送。以一个聊天室场景为例，假设聊天消息分为两种类型：系统消息和用户消息。我们可以在服务器端按照以下方式推送数据：
// 推送系统消息
res.write('event: system\ndata: 欢迎进入聊天室！\n\n');
// 推送用户消息
res.write('event: user\ndata: 用户A: 你好！\n\n');在客户端，我们可以为不同的事件类型设置不同的事件处理器，这样就能区分不同类型的数据了：
const eventSource = new EventSource('/sse');
eventSource.addEventListener('system', function(event) {
console.log('收到系统消息:', event.data);
});
eventSource.addEventListener('user', function(event) {
console.log('收到用户消息:', event.data);
});示例代码中，我们使用了 addEventListener 方法为不同事件类型分别设置事件处理器。当接收到事件类型为 system 的数据时，触发对应事件处理器并打印系统消息；同样地，当接收到事件类型为 user 的数据时，触发对应事件处理器并打印用户消息。
总结
本文向您介绍了 Server-sent Events 技术如何实现对服务端数据的分类推送，希望通过本文的阐述，能够让您对该技术有更深入的认识及理解。值得注意的是，由于 SSE 技术的浏览器兼容性并不是很好，因此在应用 SSE 技术时需要注意浏览器的限制情况。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6590cb5feb4cecbf2d60f690