随着前端技术的不断发展，前后端分离的架构模式越来越受到开发者的欢迎。在前后端分离架构中，前端负责展示和交互，而后端则负责数据处理和业务逻辑。这种架构模式能够有效提高开发效率和系统的可维护性。
在前后端分离架构中，前端需要通过接口从后端获取数据。传统的接口调用方式是通过 HTTP 请求获取数据，这种方式的缺点是需要频繁的请求和响应，会增加网络负担和服务器压力。而服务端 Sent Event（以下简称 SSE）则提供了一种更加高效的数据推送方式，能够在数据更新时主动推送数据给前端，有效减少了网络传输和服务器压力。
什么是 SSE
SSE 是一种基于 HTTP 协议的服务器推送技术，它允许服务器向客户端发送事件流，客户端通过监听事件流来实现数据的实时更新。SSE 的优点在于它是一个轻量级的协议，不需要额外的握手和头部数据，在数据更新时能够快速的推送数据给客户端。
SSE 的核心是事件流，事件流是由一系列事件组成的流式数据，每个事件都是一个文本字符串，格式如下：
event: 事件名称 data: 事件数据
其中，event 表示事件的名称，data 表示事件的数据。事件流是通过 HTTP 连接进行传输的，当事件流传输到客户端时，客户端会根据事件名称和事件数据进行相应的处理。
如何使用 SSE
使用 SSE 需要在服务端和客户端分别进行配置和实现。
服务端配置
在服务端实现 SSE 需要使用到的是 EventSource 对象，这个对象可以通过 res.write() 方法来向客户端发送事件流。具体实现方式如下：
// javascriptcn.com 代码示例
const http = require('http');
http.createServer((req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
setInterval(() => {
const data = new Date().toLocaleTimeString();
res.write(`event: update\n`);
res.write(`data: ${data}\n\n`);
}, 1000);
}).listen(3000);在上面的例子中，我们使用 setInterval() 方法每隔一秒向客户端发送一个名为 update 的事件流，事件数据为当前时间戳。需要注意的是，每个事件流必须以两个换行符结尾，这是 SSE 的规定。
客户端配置
在客户端实现 SSE 需要使用到 EventSource 对象，这个对象可以通过监听事件流来实现数据的实时更新。具体实现方式如下：
const source = new EventSource('/sse');
source.addEventListener('update', (event) => {
const data = event.data;
console.log(data);
});在上面的例子中，我们通过 new EventSource() 方法建立与服务端的连接，连接的地址为 /sse。在连接建立后，我们通过 addEventListener() 方法来监听名为 update 的事件流，并在事件流到达时获取事件数据并输出。
SSE 的优缺点
SSE 相比传统的 HTTP 请求方式有以下优点：
- 实时性更强：SSE 可以实现数据的实时推送，能够更快的将数据更新给客户端。
- 减少网络负载：SSE 的数据传输是单向的，不需要客户端频繁的请求和响应，能够有效减少网络负载。
- 代码实现简单：SSE 的实现代码非常简单，服务端只需要使用 EventSource 对象向客户端推送事件流，客户端只需要通过 EventSource 对象监听事件流即可。
SSE 相比传统的 HTTP 请求方式也有以下缺点：
- 兼容性问题：SSE 的兼容性并不好，部分浏览器不支持 SSE。
- 长连接问题：SSE 的实现需要使用长连接，长时间的连接会增加服务器的负担。
- 安全问题：SSE 的实现需要允许跨域访问，存在一定的安全风险。
总结
SSE 是一种高效的数据推送技术，能够实现数据的实时更新，减少网络负载，代码实现简单。在前后端分离的架构中，SSE 可以作为一种替代传统 HTTP 请求的数据传输方式，提高系统的性能和用户体验。但是，SSE 的兼容性较差，需要注意安全问题和长连接问题。在使用 SSE 时需要权衡其优缺点，根据实际情况选择是否使用 SSE。
以上是关于前后端分离中服务端 Sent Event 的详细介绍和实现方式，希望对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653ca0d17d4982a6eb6b1fb6