1. 简介
SSE（Server-Sent Events）是一种服务器向客户端推送数据的技术，它允许服务器实时地向客户端发送数据流，而无需客户端发送请求。SSE 可以作为一种轻量级的替代 WebSocket 的方案，在前后端分离的应用中，它可以用来实现实时通知、实时更新等功能。
2. SSE 的优点
相比于 WebSocket，SSE 有以下优点：
- SSE 是基于 HTTP 的，因此不需要特殊的协议或端口，可以通过标准的 HTTP 端口（80 或 443）通信；
- SSE 可以在浏览器和服务器之间建立一个持久化的连接，而不需要像 WebSocket 那样需要建立一个新的 TCP 连接；
- SSE 可以使用标准的 HTTP 服务器和 Web 服务器软件，不需要额外的服务器软件支持；
- SSE 可以使用 HTTP 的缓存机制，从而减轻服务器的负担。
3. SSE 的实现
SSE 的实现需要客户端和服务器端的支持。客户端可以使用浏览器的原生 API（EventSource），也可以使用第三方库（如 jQuery 的 $.EventSource）；服务器端可以使用 Node.js 的第三方库（如 express、koa）等来实现。
3.1 客户端实现
客户端可以使用浏览器的原生 API（EventSource）来实现 SSE，也可以使用第三方库（如 jQuery 的 $.EventSource）。
3.1.1 使用原生 API
使用原生 API 的方式比较简单，只需要创建一个 EventSource 对象，然后监听其 onmessage 事件即可。
const eventSource = new EventSource('/sse');
eventSource.onmessage = function(event) {
console.log(event.data);
};3.1.2 使用第三方库
如果你使用的是 jQuery，可以使用其提供的 $.EventSource 来实现 SSE。
const eventSource = $.EventSource('/sse');
eventSource.onmessage = function(event) {
console.log(event.data);
};3.2 服务器端实现
服务器端可以使用 Node.js 的第三方库来实现 SSE，比如 express、koa 等，这里以 express 为例。
3.2.1 使用 express
使用 express 实现 SSE 需要安装一个中间件库（sse-express），然后在路由中使用即可。
// javascriptcn.com 代码示例
const express = require('express');
const sseExpress = require('sse-express');
const app = express();
app.get('/sse', sseExpress(), function(req, res) {
setInterval(function() {
res.sse('data: ' + new Date() + '\n\n');
}, 1000);
});
app.listen(3000);上面的代码中，首先使用 sseExpress 中间件来创建一个 SSE 服务器，然后在路由中使用 res.sse 发送数据流。
3.3 SSE 的协议
SSE 使用的协议比较简单，它是基于 HTTP/1.1 的，使用了一些特殊的响应头和事件类型，下面是一个 SSE 的响应示例：
HTTP/1.1 200 OK Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive data: Hello, World!\n\n
其中，Content-Type 为 text/event-stream，表示这是一个 SSE 的响应；Cache-Control 为 no-cache，表示不允许缓存；Connection 为 keep-alive，表示保持连接不断开；data 为数据流的前缀，表示这是一个数据流；\n\n 表示数据流的结束符。
4. SSE 的应用场景
在前后端分离的应用中，SSE 可以用来实现以下功能：
- 实时通知：比如新消息、新评论等，可以通过 SSE 来实现实时通知；
- 实时更新：比如股票行情、天气预报等，可以通过 SSE 来实现实时更新；
- 实时日志：比如服务器日志、应用日志等，可以通过 SSE 来实现实时日志监控。
5. 总结
SSE 是一种轻量级的服务器推送技术，它可以用来实现实时通知、实时更新等功能。在前后端分离的应用中，SSE 可以作为一种替代 WebSocket 的方案，具有更加简单、轻量、易用等优点。SSE 的实现需要客户端和服务器端的支持，客户端可以使用浏览器的原生 API 或第三方库，服务器端可以使用 Node.js 的第三方库来实现。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6561bb2cd2f5e1655dbc4f83