如何通过Express和React处理SSE
如何通过Express和React处理SSE
本文作者为360奇舞团前端开发工程师
最近AIGC技术的大热，市面上也出现了许多类似生产的AI工具，其中有一大特色就是对话的输出结果是类似真人的打字效果出现，要呈现出这种效果，最主要的就是要利用SSE技术（Server-Sent Events是一种基于HTTP长连接的“服务器推”技术，其特点在于建立更长时间的连接以等待后续数据的传输。具体来说，当客户端请求），下面我就通过一个案例，使用Express和React来为大家进行演示如何在项目中实现这种效果。
效果如下
使用Express发送流式输出
我们后端使用Express来搭建并发送数据
const express = require('express')
const app = express()
const port = 3000
//允许跨域
app.all('*', function (req, res, next) {
res.setHeader("Access-Control-Allow-Origin", "*");
next();
});
app.get('/sse', (req, res) => {
const str = 'hello word!'
// 设置 SSE 相关的响应头
res.setHeader('Content-Type', 'text/event-stream;charset=utf-8');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
let index = 0
const timer = setInterval(() => {
if (index < str.length) {
res.write("data: " + JSON.stringify({ content: str[index] }));
index++
} else {
// 当所有数据都发送完毕时，结束响应
clearInterval(timer); // 停止定时器
res.end();
}
}, 100);
});
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})
因为我们是作为简单案例讲解，就直接先添加一个通用的中间件，来解决跨域问题。sse传输，我们需要在响应头中将Content-Type和Connection都设置为对应的字段，以此来保证，我们的响应能够被前端正确的处理。我们通过定时器，每次读取一个字符，来模拟每次响应的结果，读取完所有字符后，我们就将响应停止。
注意我们发送的数据格式要以data: 开头，因为这是SSE规范的一部分。
- 标识行类型：以
data:开头的行告诉客户端这是一个数据行，而不是其他类型的事件，比如注释或者消息标识。这样客户端可以正确地解析和处理接收到的数据。 - 易于解析：SSE 是一个文本协议，因此易于解析。以
data:开头的行让客户端能够轻松地区分和提取事件数据部分，因为它们遵循明确的格式。 - 浏览器支持：大多数现代浏览器支持 SSE 协议，可以正确地处理以
data:开头的行。这使得在客户端上使用 SSE 变得更加容易，因为浏览器会自动解析 SSE 响应中的数据。 - 规范要求：SSE 规范要求以
data:开头的行用于传输数据，这是根据规范的定义来执行的。
使用React对数据进行处理
传统的请求方式主要依赖于使用Ajax来向后端发起请求，这种方式有一个明显的特点：一次请求只能接收一次响应数据，接收到单次响应结果后，即请求结束。然而，在某些场景下，我们需要持续地接收来自后端的数据更新，这时就需要摒弃传统的Ajax方式，而选择一些更适合实现实时数据更新的方法。
最终关注到了两个主要的API：EventSource和Fetch，它们分别具有不同的优势和用途。于是我们分别对两个api做了对比。
| 特性 | EventSource | fetch API |
|---|---|---|
| 兼容性 | 广泛支持，包括Internet Explorer 8及更高版本 | 在较新的浏览器中得到支持，不完全支持Internet Explorer |
| 数据格式 | 只支持服务器发送的文本数据，自动转换为文本 | 可以获取包括文本、JSON、Blob等在内的各种数据格式 |
| 错误处理 | 自动尝试重新连接，可以监听'error'事件来处理错误 | 没有内置的重试机制，需要手动处理错误并可能需要进行重试 |
| 流式处理 | 支持简单处理服务器发送的流式数据 | 不直接支持流式处理，但可以使用Response对象的body属性获取流式接口 |
| CORS问题 | 受同源策略限制，除非服务器配置了适当的CORS头，否则无法跨源加载 | 不受同源策略限制，可以跨源请求数据，但需要服务器配置适当的CORS头 |
| 灵活性 | 只能发送GET请求，拼接字符串传参 | 可以发起任意类型请求。传参灵活 |
通过对比，我们可以发现使用fetch能有更多优势，所以下面我们的案例，就是基于fetch来实现：
import { useEffect, useState } from "react";
import "./App.scss";
function App() {
const [chatText, setChatText] = useState("");
const getRes = async () => {
try {
const res = await fetch("http://localhost:3000/sse", {
method: "get",
});
const reader = res.body?.getReader();
let text = "";
while (reader) {
const { value, done } = await reader.read();
const chars = new TextDecoder().decode(value);
if (done) {
break;
}
const dataArray = chars.trim().split("\n\n");
const jsonObjects = dataArray.map((data) => {
const jsonString = data.substring("data: ".length);
return JSON.parse(jsonString);
});
jsonObjects.forEach((item) => {
text += item.content;
});
setChatText(text);
}
} catch (error) {
console.log("error", error);
}
};
useEffect(() => {
getRes();
}, []);
return <div>{chatText}</div>;
}
在使用fecth的过程中，我们还需要注意getReader这个方法， getReader 方法是用于处理响应体（response body）的一种方式，它返回一个可用于异步读取响应数据的 ReadableStreamDefaultReader 对象。这个方法通常用于处理大型响应或流式数据，以便在数据逐步到达时逐步处理它们，而不是一次性将整个响应数据加载到内存中。
通过read方法，读取stream的返回值，我们可以从返回值中解构出value和done这个两个值，但是value值是Uint8Array，我们需要将其转化成UTF-8的字符。done值主要是来区分是否读取完毕，读取中，done会返回false，所有内容都读取完成后，就会返回true，我们可以done的值，来判断响应是否结束。
前端处理SSE时，我们还需要注意数据格式，后端返回的是数据格式是以data开头的字符串。而我们所需要的内容是content所对应的值，我们就需要采取一些方法，将其值获取出来。
- 使用正则表达式可以轻松地提取出content数据部分
{"content":"克服"}，但是后期维护性和代码可读性上较低 - 使用JSON.parse，需要先将字符串转化为标准的json字符串，然后转化为对象，这样进行处理的话，我们能更加灵活的进行操作，但是如果如果数据不符合JSON格式，会抛出解析错误，这就要求我们在代码中进行适当的错误处理，以防止应用崩溃。
获取的内容后，我们只需要每次将字符串进行拼接，然后重新渲染页面，就能实现打字机效果了。
