如何通过Express和React处理SSE

最新推荐文章于 2025-04-02 05:40:32 发布

奇舞周刊

最新推荐文章于 2025-04-02 05:40:32 发布

阅读量814

点赞数

文章标签： express react.js 前端前端框架 javascript

本文链接：https://blog.csdn.net/qiwoo_weekly/article/details/133781603

版权

本文介绍如何利用Express发送流式输出和React处理SSE，展示实时数据更新的实现过程。通过Express设置响应头和定时发送数据模拟长连接，React端使用fetch和getReader读取并处理stream，实现类似真人的打字效果。同时，文章讨论了EventSource和Fetch API的选择，并提到了数据格式处理的两种方法：正则匹配和JSON.parse。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文作者为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 相关的