简介
Server-Sent Events (SSE) 是一种基于 HTTP 协议的服务器推送技术，它允许服务器向客户端发送实时事件流，而不需要客户端不断地发起请求。SSE 是一种轻量级的通信协议，适合于实现实时通知、聊天室、在线游戏等应用场景。
本文将介绍如何在 Web 浏览器上使用 SSE 技术实现实时通知功能，包括 SSE 的基本原理、浏览器端的实现方法和一些注意事项。
SSE 原理
SSE 基于 HTTP 协议，使用长连接（Long Polling）实现服务器向客户端的实时通知。客户端通过向服务器发送一个 HTTP 请求，请求头中包含 Accept: text/event-stream，表示客户端希望接收服务器发送的事件流。服务器在接收到该请求后，保持连接打开状态，并向客户端发送一系列格式化的事件数据，每个事件数据以两个换行符结尾，客户端通过监听 EventSource 对象的 message 事件来接收数据。
SSE 事件数据的格式如下：
event: <event-name> data: <event-data> event: <event-name> data: <event-data>
其中，event 表示事件名称，data 表示事件数据。如果事件名称为空，则表示这是一个普通的事件数据，否则表示这是一个具有事件名称的事件数据。
浏览器端实现
在浏览器端，我们可以使用 EventSource 对象来实现 SSE 功能。以下是一个简单的 SSE 示例代码：
// javascriptcn.com 代码示例
const eventSource = new EventSource('/sse');
eventSource.addEventListener('message', (event) => {
console.log(`Received event: ${event.data}`);
});
eventSource.addEventListener('error', (event) => {
console.error(`Error occurred: ${event}`);
});在上面的代码中，我们通过 EventSource 对象向服务器发送一个 SSE 请求，请求的 URL 是 /sse。然后监听 message 事件和 error 事件，分别处理服务器发送的事件数据和错误信息。
在服务器端，我们可以使用 Node.js 的 http 模块和 sse-stream 模块来实现 SSE 功能。以下是一个简单的 SSE 服务器示例代码：
// javascriptcn.com 代码示例
const http = require('http');
const sseStream = require('sse-stream');
const server = http.createServer((req, res) => {
if (req.url === '/sse') {
const sse = sseStream(req);
setInterval(() => {
sse.writeEvent({
data: `Current time is ${new Date().toLocaleTimeString()}`,
});
}, 1000);
} else {
res.end('Hello, World!');
}
});
server.listen(3000, () => {
console.log('Server is running at http://localhost:3000');
});在上面的代码中，我们创建了一个 HTTP 服务器，并监听 /sse 路径的请求。当客户端发送 SSE 请求时，服务器会创建一个 sse 对象，并使用 setInterval 定时向客户端发送事件数据。
注意事项
在使用 SSE 技术时，需要注意以下几点：
- SSE 只能使用 HTTP 协议，不能使用 HTTPS 协议。
- SSE 请求是单向的，客户端只能接收服务器发送的事件数据，不能向服务器发送数据。
- SSE 请求不支持跨域访问，需要在服务器端设置 CORS 头部信息。
- SSE 请求可能会被浏览器缓存，需要在服务器端设置响应头部信息，禁止缓存。
总结
本文介绍了如何在 Web 浏览器上使用 Server-Sent Events 实现实时通知功能。我们了解了 SSE 的基本原理、浏览器端的实现方法和一些注意事项。使用 SSE 技术可以轻松实现实时通知、聊天室、在线游戏等应用场景，是一种非常有用的技术。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657d2c99d2f5e1655d7f920c