uniapp中的流式输出

一、完整代码展示

• 目前大多数的ai对话都是流式输出，也就是对话是一个字或者多个字逐一进行显示的
• 下面是一个完整的流式显示程序，包含的用户的消息发出和ai的消息回复

二、流式传输核心代码讲解

1、请求发起

• 设置Accept: text/event-stream告知服务器需要流式响应
• 通过session_id传递认证信息
• 使用GET请求发送消息内容

uni.request({
  url: url + '?' + this.serializeParams(params),
  method: 'GET',
  header: {
    'Accept': 'text/event-stream',
  },
  success: (res) => {
    this.processStreamResponse(res.data, aiIndex);
  }
});

2、流式响应处理

• 将响应数据按换行符分割成块
• 使用setInterval控制显示速度（这里设置为 50ms / 块）
• 逐块追加到 AI 消息中
• 使用$forceUpdate强制刷新视图

processStreamResponse(data, aiIndex) {
  const chunks = data.split('\n');
  let chunkIndex = 0;
  const interval = setInterval(() => {
    if (chunkIndex >= chunks.length) {
      clearInterval(interval);
      this.isLoading = false;
      return;
    }

    const chunk = chunks[chunkIndex].replace('data:', '').trim();
    if (chunk) {
      this.messages[aiIndex].text += chunk;
      this.$forceUpdate();
    }
    chunkIndex++;
  }, 50);
}

3、加载状态管理

• 在请求发起时显示加载状态
• 响应处理完成后隐藏加载状态

// 发送消息时
this.isLoading = true;

// 响应处理完成
clearInterval(interval);
this.isLoading = false;

4、数据格式处理 

• 将参数对象序列化为 URL 查询字符串
• 使用encodeURIComponent处理特殊字符

serializeParams(params) {
  return Object.entries(params)
    .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
    .join('&');
}

5、消息显示 

• 使用 flex 布局实现消息气泡
• 通过selectable="true"实现文本选中
• 根据 sender 添加不同样式

  {{ message.text }}