使用SSE技术开发聊天遇到的坑

推荐一篇文章，写的相当全面

juejin.cn/post/722112…

推荐一个对接流接口的插件 @microsoft/fetch-event-source

用法相当简单

fetchEventSource("/api/bot/stream/msg", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({input: '你是谁'}),
      onmessage: (data) => {
        // 连接后，后端不断向前端通过这个回调推送数据
        // 前端在这里不断拼接数据，就能达到像chatGpt一样的效果，答案逐步呈现在页面上
      },
});

本来一切都好好的，但是 本地运行 测试，发现onmessage 是进入了n次，但是数据却不是我想象中逐步呈现，而是最后一下展示到页面上

解决

使用create-react-app时，代理使用 http-proxy-middleware 插件可以正常返回

如果没有使用中间件插件，devServer需要添加配置项

devServer: {
    compress: false, 
    headers: { 'Content-Type': 'no-transform', },
}

其他要点

• 接口禁用缓存 Cache-Control: no-cache
• 流接口返回格式为字符串 data: 'xxxx' \n 为一次返回，其中前面的data 和 后面的 \n是必须得

如果使用nginx部署有问题，可以试试下面的配置

location /api { 
    proxy_pass https://xx.xx; 
    # 开启可使用https接口 
    proxy_ssl_server_name on; 
    # 如果是SSE返回流event-stream, 无法实时展示，可使用以下配置 
    proxy_buffering off; 
    proxy_cache off; 
}