如何通过Express和React处理SSE

通过Express和React处理SSE（Server-Sent Events）实现流式数据传输和打字机效果，可以按照以下步骤实现：

• Express后端设置

  创建一个Express应用，并设置一个路由来处理SSE连接。

  在路由处理函数中，设置必要的响应头，包括Content-Type: text/event-stream，Cache-Control: no-cache，和Connection: keep-alive。

  使用setInterval来模拟流式数据发送，每次发送一个字符，并在所有字符发送完毕后结束连接。

  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!'; 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}`);});

• React前端处理

  在React组件中，使用useEffect钩子来在组件挂载时发起SSE连接。

  使用fetch API来发起请求，并通过getReader方法获取一个ReadableStreamDefaultReader对象来逐步读取响应数据。

  将读取到的Uint8Array数据转换为字符串，并解析出content字段的值。

  将解析出的字符逐个拼接到状态变量中，并通过重新渲染来显示打字机效果。

  import { useEffect, useState } from "react";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("nn"); 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>;}export default App;

• 注意事项

  跨域问题：确保Express后端设置了正确的CORS头，以便前端能够成功发起请求。

  数据格式：SSE要求数据以data:开头，后跟实际数据内容。前端在处理时需要正确解析这种格式。

  错误处理：在前端代码中添加适当的错误处理逻辑，以防止因数据格式错误或网络问题导致的应用崩溃。

  性能优化：对于大量数据的流式传输，考虑使用更高效的数据解析和渲染方法，以减少性能开销。

通过以上步骤，你可以实现一个基于Express和React的SSE应用，模拟出类似真人打字的流式输出效果。