Uniapp 中使用 EventSource 实现服务器推送功能（SSE），实现对接ChatGPT，进行流式输出。

在 Uniapp 中，如果需要实现服务器推送功能（Server-Sent Events, SSE），可以使用 EventSource。然而，在 App 端，EventSource 并不被原生支持，因此需要使用 EventSourcePolyfill 来实现跨平台兼容。

1. 什么是 SSE？

SSE（Server-Sent Events）是一种服务器向客户端推送实时数据的技术。与 WebSocket 不同，SSE 是单向的，服务器可以主动向客户端推送数据，而客户端只能接收数据。

---

​2. 实现步骤

​2.1 安装依赖

首先，安装 EventSourcePolyfill 和 axios：

npm install event-source-polyfill
npm install axios

​2.2 使用 renderjs 实现跨平台兼容

由于 App 端不支持原生的 EventSource，需要使用 renderjs 来实现跨平台兼容。

​代码实现

​2.3 在 script 层接收数据

在 script 层中，通过 acceptDataFromRenderjs 方法接收 renderjs 层传递的数据，并处理显示。

export default {
  data() {
    return {
      curStreamMsgObj: null, // 当前接收到的数据
    };
  },
  methods: {
    async acceptDataFromRenderjs(options) {
      // 控制页面向下滚动到底部
      uni.pageScrollTo({
        scrollTop: 99999999999999999,
        duration: 0,
      });

      if (this.curStreamMsgObj) {
        // 正常接收数据，追加显示到前端
        this.curStreamMsgObj.content += JSON.parse(options.type);
      } else {
        // 第一次接收数据
        this.curStreamMsgObj = {
          role: 'gpt',
          content: JSON.parse(options.type),
        };
        this.gpt.push(this.curStreamMsgObj); // 添加到消息列表
        await this.$nextTick();
      }
      console.log('接收 renderjs 发回的数据:', JSON.parse(options.type));
    },
  },
};

---

​3. 注意事项

1. ​跨平台兼容性

   • 在 App 端，必须使用 renderjs 和 EventSourcePolyfill 来实现 SSE 功能。

2. ​性能优化

   • 避免频繁创建和关闭 SSE 连接，合理设置 heartbeatTimeout。

3. ​数据格式

   • 确保服务器返回的数据格式与前端处理逻辑一致。

uniapp怎么使用EventSourcePolyfill  

参考链接：uniapp怎么使用EventSourcePolyfill - DCloud问答

renderjs内如何主动发起通讯？ ：renderjs内如何主动发起通讯？ - DCloud问答

SSE（Server-Sent Events)请求之EventSource ：

SSE（Server-Sent Events)请求之EventSource_sse请求-CSDN博客