uniapp如何实现接收AI流式数据

在uniapp中如何实现接收AI返回的流式数据？我现在对接了一个AI接口，它是以流式传输的方式返回数据的，但在uniapp里不知道该怎么处理这种分块接收的数据。有没有具体的代码示例或实现思路？需要考虑到数据的拼接和实时显示效果。

2 回复

在uniapp中，可通过WebSocket连接AI服务端，监听onMessage事件接收流式数据。使用uni.connectSocket建立连接，在回调中处理分块数据并实时更新页面显示。


在 UniApp 中实现接收 AI 流式数据（如 ChatGPT 流式响应），通常使用 WebSocket 或 Server-Sent Events (SSE)。以下是两种方法的实现步骤和示例代码：

方法一：使用 WebSocket（推荐用于双向通信）

WebSocket 适合实时双向数据流。假设后端支持 WebSocket 协议传输 AI 流式数据。

步骤：

  1. 在 UniApp 中创建 WebSocket 连接。
  2. 监听 onMessage 事件接收数据流。
  3. 处理数据并更新 UI（例如逐字显示）。

示例代码：

// 在 Vue 页面或组件中
export default {
  data() {
    return {
      socketTask: null,
      responseText: '' // 用于存储流式数据
    }
  },
  onLoad() {
    this.connectWebSocket();
  },
  onUnload() {
    this.closeWebSocket(); // 页面卸载时关闭连接
  },
  methods: {
    connectWebSocket() {
      // 创建 WebSocket 连接，替换为你的 AI 服务地址
      this.socketTask = uni.connectSocket({
        url: 'wss://your-ai-service.com/stream',
        success: () => {
          console.log('WebSocket 连接成功');
        }
      });

      // 监听 WebSocket 接收消息
      this.socketTask.onMessage((res) => {
        if (res.data) {
          // 假设数据为文本，逐条追加
          this.responseText += res.data;
          // 可选：触发 UI 更新（如绑定到视图）
        }
      });

      // 监听错误
      this.socketTask.onError((err) => {
        console.error('WebSocket 错误:', err);
      });
    },
    closeWebSocket() {
      if (this.socketTask) {
        this.socketTask.close();
      }
    }
  }
}

模板中使用：

<view>{{ responseText }}</view>

方法二：使用 Server-Sent Events (SSE)

如果后端使用 SSE（单向流），UniApp 可通过标准 HTTP 请求处理。注意：UniApp 的 uni.request 不支持直接 SSE，但可用 fetch 或 polyfill 实现。

步骤：

  1. 使用 fetch 或兼容库（如 sse.js）处理 SSE 流。
  2. 监听 message 事件获取数据块。
  3. 在 UniApp 中集成（可能需要条件编译）。

示例代码（使用 fetch）：

// 注意：此方法在部分平台可能受限，建议测试兼容性
async function connectSSE() {
  try {
    const response = await fetch('https://your-ai-service.com/stream', {
      method: 'GET',
      headers: {
        'Accept': 'text/event-stream' // 确保请求 SSE 类型
      }
    });
    
    if (response.body) {
      const reader = response.body.getReader();
      const decoder = new TextDecoder();
      
      while (true) {
        const { value, done } = await reader.read();
        if (done) break;
        
        // 解码并处理数据
        const chunk = decoder.decode(value);
        this.responseText += chunk; // 更新数据
      }
    }
  } catch (error) {
    console.error('SSE 连接失败:', error);
  }
}

注意事项：

  • 跨平台兼容性：WebSocket 在 UniApp 中支持良好；SSE 需检查各平台（如小程序可能受限）。
  • 数据格式：根据 AI 服务调整解析逻辑（如 JSON 解析）。
  • 性能优化：频繁更新 UI 时，可使用防抖或虚拟滚动。
  • 错误处理：添加重连机制应对网络中断。

根据后端支持选择合适方案。WebSocket 更通用，SSE 适用于简单推送场景。

回到顶部