什么是 SSE
SSE即服务器发送事件（Server-Sent Events），是一种基于HTTP协议的服务器端推送技术，用于实时向客户端推送数据。相较于Websocket，SSE具有更轻量、更易实现、更符合RESTful架构等特点，缺点是单向通信，不适用于需要客户端请求服务端数据的场景。
SSE 协议的特点
- SSE 只能用于单向通信，对于需要双向通信的场景应该使用 Websocket。
- SSE 基于HTTP协议，使用 HTTP 的长连接机制，因此较容易实现。
- SSE 推送数据是文本格式，支持 Event 字段，可以按事件类型进行分类。
- SSE 相较于 Websocket 更符合 RESTful 架构，可以与现有的 RESTful API 很好地集成。
SSE 协议的使用方法
服务端
服务端需要提供 SSE 服务，提供以下 HTTP 接口：
- 建立连接接口（GET方法）。客户端通过该接口向服务端建立 SSE 连接。
- 推送数据接口（POST方法）。服务端向客户端推送数据时，使用该接口向客户端发送数据。
// javascriptcn.com 代码示例
// 建立 SSE 连接接口
app.get('/api/sse', (req, res) => {
// 设置响应头为SSE协议
res.set({
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive',
});
// 发送数据，使用 send 会自动添加 \n 分隔符。
res.write(`event: welcome\n`);
res.write(`data: ${JSON.stringify({ message: 'Welcome to SSE.' })}\n\n`);
});
// 推送数据接口
app.post('/api/sse/push', (req, res) => {
// 发送数据，使用 send 会自动添加 \n 分隔符。
res.write(`event: message\n`);
res.write(`data: ${JSON.stringify({ message: 'Hello, SSE!' })}\n\n`);
});客户端
客户端需要使用 JavaScript 创建 EventSource 对象，建立 SSE 连接，监听服务端的推送数据。
const eventSource = new EventSource('/api/sse');
eventSource.addEventListener('welcome', (event) => {
console.log(event.data);
});
eventSource.addEventListener('message', (event) => {
console.log(event.data);
});SSE 协议的案例
以下是一个 SSE 协议的案例。
服务端
// javascriptcn.com 代码示例
const express = require('express');
const app = express();
app.get('/api/sse', (req, res) => {
// 设置响应头为SSE协议
res.set({
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive',
});
// 定时向客户端发送数据
let count = 0;
const timer = setInterval(() => {
res.write(`event: message\n`);
res.write(`data: ${JSON.stringify({ message: `Hello, SSE! count: ${count++}` })}\n\n`);
}, 1000);
// 客户端连接关闭时，清除定时器
req.on('close', () => {
clearInterval(timer);
res.end();
});
});
app.listen(3000, () => {
console.log('SSE server started on http://localhost:3000');
});客户端
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SSE Example</title>
</head>
<body>
<h1>SSE Example</h1>
<ul></ul>
<script>
const eventSource = new EventSource('/api/sse');
eventSource.addEventListener('message', (event) => {
const message = JSON.parse(event.data);
const li = document.createElement('li');
li.textContent = message.message;
document.querySelector('ul').appendChild(li);
});
</script>
</body>
</html>总结
SSE 协议是基于 HTTP 协议的服务器端推送技术，能够实现实时向客户端推送数据。相较于 Websocket，SSE 更轻量、易于实现、符合 RESTful 架构等特点。但是，SSE 是单向通信的，不适用于需要客户端请求服务端数据的场景。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653640397d4982a6ebe3943f