SSE
服务端发送事件（SSE）技术早在很久以前就已存在，但其在实际应用场景中并不十分常见。随着ChatGPT的出现，SSE技术得到了重新关注并被广泛应用于实现流式输出。本文将介绍SSE技术的使用
概念
Event Stream：是一种通过 HTTP 协议实现的服务器推送技术，也被称为 Server-Sent Events（SSE）。
EventSource：是 HTML5 中定义的用于接收服务器端推送事件的 API。
SSE 是指 Server-Sent Events（服务器发送事件），是一种用于在客户端和服务器之间单向实时通信的 Web 技术。通过 SSE，服务器可以向客户端推送数据，而无需客户端再次发起请求。
SSE的核心流程是在客户端发送一个的http请求，在服务端响应的header中设置传输类型(MIME)为text/event-stream，就会在客户端与服务器之前建立一个持久的单向连接，实现服务器向客户端推送实时数据的能力。
EventSource会发送一个get类型的http请求，也可以通过fetch实现post类型的请求
API 介绍
EventSource： SSE的接口，通过new EventSource(url)对象来向url发送http请求
主要事件
- message：默认服务器发送的数据会在这里被监听到，也可以在服务器端通过定义“event: xxx”使用xxx监听
- open：在成功建立连接后触发，断连后自动重连后也会触发
- error：出现错误后触发
实例方法
- close：用于关闭连接
step by step 实现chatGPT流式输出的效果
使用EventSource
web 中创建一个EventSource对象，指定服务器url，可以在url中拼接query参数。随后监听message事件，处理对应的操作即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script>
function createSSE(url) {
const eventSource = new EventSource(url);
eventSource.onmessage = function (event) {
const data = JSON.parse(event?.data || "{}");
if (data.type === "close") {
eventSource.close();
} else {
const root = document.getElementById("root");
root.innerText += data.msg;
}
};
return eventSource;
}
const sse = createSSE("http://localhost:3000/sse");
</script>
</body>
</html>
服务器处理，这里用了Nodejs中http模块，创建一个服务用来监听3000端口。
匹配一个url path，当请求url path是sse时设置对应的响应头：
const http = require("http");
const server = http.createServer((req, res) => {
if (req.url === "/sse") {
res.writeHead(200, {
"Content-Type": "text/event-stream", // 必须指定
"Access-Control-Allow-Origin": "*", // demo中解决跨域
Connection: "keep-alive", // 请求完成后依旧保持连接不关闭，不同http版本默认值不同
"Cache-Control": "no-cache", // 不缓存
});
// 业务逻辑
// ...
}
});
server.listen(3000, "localhost", () => {
console.log("Server is running at 3000");
});
必须指明 Content-Type为 text/event-stream，SSE规定了一种特定的事件流格式，包括事件标识符、事件类型、数据等，浏览器通过text/event-stream类型可以正确解析这些格式。
可以通过定义json类型的数据格式，来传输更丰富的数据，通常也会约定一个type来标记请求是否完成，需要关闭长连接
const http = require("http");
const server = http.createServer((req, res) => {
if (req.url === "/sse") {
res.writeHead(200, {
"Content-Type": "text/event-stream",
"Access-Control-Allow-Origin": "*", // 解决跨域
Connection: "keep-alive", // 请求完成后依旧保持连接不关闭，不同http版本默认值不同
"Cache-Control": "no-cache", // 不缓存
});
// 业务逻辑 模拟请求
let count = 0;
let str =
"SSE 是指 Server-Sent Events（服务器发送事件），是一种用于在客户端和服务器之间单向实时通信的 Web 技术。通过 SSE，服务器可以向客户端推送数据，而无需客户端发起请求。";
const timer = setInterval(() => {
let info = {};
if (count < str.length) {
info = { type: "keep-alive", msg: str[count] };
} else {
info = { type: "close", msg: "" };
clearInterval(timer);
}
count += 1;
res.write(`data: ${JSON.stringify(info)}\n\n`);
/** 测试代码: 会触发 http 自动重连 & 触发onerror */
// if (count === 10) {
// res.end(); // 触发重连
// clearInterval(timer);
// }
}, 100);
}
});
server.listen(3000, "localhost", () => {
console.log("Server is running at 3000");
});
你可能不知道的
-
使用EventSource可以在devtool中看到字节流信息
-
服务器响应的数据必须以data:开头，浏览器会解析此标记符中的数据并触发message事件，并将数据放在 event.data中
-
服务器响应的数据必须用 \n\n 来结尾，标记本次结束，浏览器会解析 \n\n 标记符，做为一次数据传输完成记为一次完整数据
-
服务器响应可以通过event: xxx\n 来定义事件监听的名称，定义的事件名称只在本次 \n\n 结束标记的数据生效，比如下面一次请求中发送3条信息，分别需要用“foo”、“message”、“bar”事件监听
res.write(`event: foo\n`); // 使用foo事件监听
res.write(`data: foo listener\n\n`);
res.write(`data: message listener\n\n`); // 未声明名称，默认使用message事件监听
res.write(`event: bar\n`); // 使用bar事件监听
res.write(`data: bar listener\n\n`);
- 断连后，浏览器会自动重连，但并不会记录断开前的最后一次数据。SSE的初衷是实时信息推送，想要记录就需要在客户端或者服务器中做缓存
使用fetch
EventSource是浏览器已经帮你封装好所需的meesage、open、error等事件，通过标准去使用即可，但只能是get请求。如果需要其他请求类型，比如POST，我们也可以自己封装fetch。
SSE本质是字节流的传输，fetch中处理对应的字节流信息，同样可以实现EventSource的功能
使用“text/event-stream”类型传输，在fetch的响应结果中，拿到的是一个ReadableStream类型，通过ReadableStream.getReader().read()读取字节流，再将字节流转换成string即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script>
const createFetchSSE = (url) => {
const decoder = new TextDecoder();
fetch(url, {
method: "POST",
body: JSON.stringify({ query: "hello" }),
signal: controller.signal,
}).then((res) => {
// 创建一个 ReadableStreamDefaultReader 去读取字节流数据
const reader = res.body.getReader();
const processHandle = ({ value }) => {
// value 为 Uint8Array 二进制数组
const decodeValue = decoder.decode(value);
// 业务代码
// ...
// 读取下一个流数据
return reader.read().then(processHandle);
};
reader.read().then(processHandle);
});
};
const sse = createFetchSSE("http://localhost:3000/sse");
</script>
</body>
</html>
使用fetch实现SSE是需要自己实现close、open等事件和方法，举个例子，用AbortController实现EventSource.close()方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script>
const createFetchSSE = (url) => {
const decoder = new TextDecoder();
const controller = new AbortController();
const root = document.getElementById("root");
fetch(url, {
method: "POST",
body: JSON.stringify({ query: "hello" }),
signal: controller.signal,
}).then((res) => {
const reader = res.body.getReader();
const processHandle = ({ value }) => {
const decodeValue = decoder.decode(value);
const data = JSON.parse(decodeValue || "{}");
if (data.type === "close") {
controller.abort();
return;
}
root.innerText += data.msg;
return reader.read().then(processHandle);
};
reader.read().then(processHandle);
});
};
const sse = createFetchSSE("http://localhost:3000/sse");
</script>
</body>
</html>
对于server端的代码和使用EventSource相同，区别是，你不需要遵循 data: 开头、不需要使用 \n\n 划分数据，同样也无法使用 event: 定义事件名
const http = require("http");
const server = http.createServer((req, res) => {
if (req.url === "/sse") {
res.writeHead(200, {
"Content-Type": "text/event-stream",
"Access-Control-Allow-Origin": "*", // 解决跨域
Connection: "keep-alive",
"Cache-Control": "no-cache",
});
let count = 0;
let str =
"SSE 是指 Server-Sent Events（服务器发送事件），是一种用于在客户端和服务器之间单向实时通信的 Web 技术。通过 SSE，服务器可以向客户端推送数据，而无需客户端发起请求。";
const timer = setInterval(() => {
let info = {};
if (count < str.length) {
info = { type: "keep-alive", msg: str[count] };
} else {
info = { type: "close", msg: "" };
clearInterval(timer);
}
count += 1;
res.write(`${JSON.stringify(info)}`);
}, 1000);
}
});
server.listen(3000, "localhost", () => {
console.log("Server is running at 3000");
});
你可能不知道的
-
使用fetch是无法在devtool中看到字节流的数据信息
-
chatGPT就是使用的fetch，因为你看不到信息
SSE与WebScoket区别
| SSE | WebScoket | |
|---|---|---|
| 协议 | http | ws |
| 通信方式 | 单工只允许服务器向客户端发送消息 | 全双工服务器和客户端可互相发送消息 |
| 优势 | 开发简单轻量，基于http协议，服务器均支持 | 数据传输无数据格式的限制 |
| 劣势 | 受http最大数限制使用 HTTP/2 时，最大并发 HTTP 流的数量是由服务器和客户端协商的（默认为 100）不使用 HTTP/2 时，最大并发数为6-8，不同浏览器的限制不同只能单向数据传输传输内容只能为简单文本 | 服务器端开发成本高 |
reference
https://developer.mozilla.org/zh-CN/docs/Web/API/EventSource
https://www.ruanyifeng.com/blog/2017/05/server-sent_events.html
4617
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
