✨ChatGPT 之 Fetch 请求?
随着 ChatGPT 已生活工作中的一部分，介绍其中一种服务器端推送技术——Server-Sent Events (SSE)，并简单实现其效果。
SSE 介绍
SSE 是一种 HTML5 技术，它允许服务器向客户端发送事件，从而实现服务器端推送。相对于 WebSockets 或长轮询技术，SSE 提供了更简单的方式来实现服务器端推送，并且支持更广泛的客户端和服务器端。
在 SSE 中，客户端通过向服务器端发送一个 HTTP 请求，请求某个资源，并且指定响应的类型是"text/event-stream"。服务器端在响应请求时，将数据格式化为事件流的形式，并通过 HTTP 响应发送回客户端。客户端通过事件流中的数据，可以实现实时地更新 UI 等操作。
下面是一个 SSE 的 Demo，展示了如何通过 SSE 实现一个简单的服务器端推送应用。
服务端代码：
const express = require('express');
const app = express();
const port = 3600;
app.get('/stream', (req, res) => {
const { message = '' } = req.query
// 3个请求头重点，需要返回text/event-stream，告知浏览器以何种类型解析
res.set({
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive',
});
let step = 0;
// 定时器依次返回message
const time = setInterval(() => {
const data = { message: message[step++]};
// 每个消息以 \n\n分割
res.write(`data: ${JSON.stringify(data)}\n\n`);
if (step > message.length - 1) {
res.end()
clearInterval(time)
}
}, 500);
});
app.listen(port, () => console.log(`Server running at http://localhost:${port}`));
客户端代码：
// 创建一个EventSource
const eventSource = new EventSource(`/stream?message=${message}`);
// 监听服务器返回的数据
eventSource.onmessage = function (event) {
console.log(event.data);
};
eventSource.onerror = function () {
eventSource.close();
};
在上面的代码中，我们通过 EventSource 对象创建了一个 SSE 连接，并指定了服务器端的 URL。当有事件流数据时，onmessage 回调函数会被调用。
network 中可看到一条类型为eventsource的请求，其以下内容
