UniApp + Dify 实战：详解 SSE 流式响应解析与前端渲染

1. 理解核心机制：拼接而非替换

Dify 的 streaming 模式下，服务器会不断推送形如 data: {"event": "message", "answer": "字"} 的数据包。 核心逻辑是： 收到一个包，解析出 answer 字段，将其**追加（Append）**到当前正在显示的对话变量后，而不是直接替换。

2. 关键数据解析逻辑

Dify 返回的数据流格式如下：

data: {"event": "message", "answer": "我", ...}\n\n data: {"event": "message", "answer": "是", ...}\n\n data: {"event": "message_end", ...}\n\n 

处理难点：

1. 前缀处理：每行数据都以 data: 开头，解析 JSON 前必须去掉。
2. 粘包处理：有时候一次网络请求回调会收到多条 data，需要用 \n\n 分割。
3. 事件区分：必须判断 event 字段。
   • message: 文本块，核心展示内容。
   • message_replace: 敏感词替换，需要替换整段文本。
   • message_end: 结束标志。
   • ping: 心跳，忽略即可。

3. UniApp 代码实现方案

在 UniApp 中（特别是微信小程序端），不能直接使用浏览器原生的 EventSource。推荐使用 uni.request 的 enableChunked: true 参数。

以下是一个完整的处理示例代码：

// 假设这是发送消息的方法
sendMessage(userQuery) {
  const that = this;
  // 1. 在界面先创建一个空的回答占位（为了立刻显示 loading 或光标）
  this.messageList.push({ role: 'user', content: userQuery });
  this.messageList.push({ role: 'assistant', content: '' }); // 初始为空，稍后拼接

  // 获取当前正在更新的这条消息在数组中的索引
  const currentMsgIndex = this.messageList.length - 1;

  // 2. 发起请求
  const requestTask = uni.request({
    url: 'http://47.243.127.167:4010/v1/chat-messages',
    method: 'POST',
    header: {
      'Authorization': 'Bearer {API_KEY}', // 替换为真实 Key
      'Content-Type': 'application/json'
    },
    data: {
      inputs: {},
      query: userQuery,
      response_mode: 'streaming', // 必须是 streaming
      user: 'uni-user-123',
      conversation_id: that.conversationId || '' // 如果是连续对话，需传入
    },
    enableChunked: true, // 【关键】开启流式传输支持
    success: (res) => {
      // 这里是请求完成后的回调，流式通常不在这里处理数据
    }
  });

  // 3. 监听流式数据头（可选）
  requestTask.onHeadersReceived((headers) => {
    // console.log('Header received', headers);
  });

  // 4. 【核心】监听分片数据
  requestTask.onChunkReceived((res) => {
    // res.data 是 ArrayBuffer，需要转换
    const arrayBuffer = res.data;
    // 小程序/App 端需要 TextDecoder，或者使用第三方库转换
    // 如果环境不支持 TextDecoder，需使用类似 text-encoding 的 polyfill
    const uint8Array = new Uint8Array(arrayBuffer);
    let text = '';
    // 简易转换 (注意：中文可能乱码，生产环境建议用专业库如 fast-text-encoding)
    // 微信小程序基础库高版本已支持 TextDecoder
    try {
      const decoder = new TextDecoder('utf-8');
      text = decoder.decode(uint8Array, { stream: true });
    } catch (e) {
      // 兼容写法，逐字节处理（此处仅为示意，建议引入库）
      text = String.fromCharCode.apply(null, uint8Array);
      // 实际开发请务必处理 UTF-8 多字节中文乱码问题
      text = decodeURIComponent(escape(text));
    }

    // 5. 处理 Dify 返回的原始数据字符串
    that.processDifyStream(text, currentMsgIndex);
  });
},

// 处理 Dify 数据流的专用函数
processDifyStream(chunkText, msgIndex) {
  // Dify 的数据块以 \n\n 分隔
  const lines = chunkText.split('\n\n');
  lines.forEach(line => {
    // 去掉 data: 前缀
    if (line.startsWith('data: ')) {
      const jsonStr = line.replace('data: ', '');
      try {
        const data = JSON.parse(jsonStr);
        // 根据 Dify 文档判断 event 类型
        if (data.event === 'message') {
          // 【关键步骤】拼接 answer 字段到当前消息
          this.messageList[msgIndex].content += data.answer;
          // 保存 conversation_id 以便下一轮对话
          if (!this.conversationId && data.conversation_id) {
            this.conversationId = data.conversation_id;
          }
        } else if (data.event === 'message_replace') {
          // 内容审查替换，直接覆盖
          this.messageList[msgIndex].content = data.answer;
        } else if (data.event === 'message_end') {
          console.log('生成结束', data);
          // 可以在这里处理 metadata，比如 token 消耗
        } else if (data.event === 'error') {
          console.error('Dify 报错:', data);
          this.messageList[msgIndex].content += '\n[出错：' + data.message + ']';
        }
        // 【重要】强制触发 Vue 视图更新（如果在某些层级深的结构中）
        // 这一步在 Vue2 中可能不需要，但在某些 UniApp 场景下需要
        // this.$forceUpdate();
      } catch (e) {
        // JSON 解析失败通常是因为数据包不完整（被截断），
        // 生产环境需要做一个 buffer 缓存上一块未解析完的字符串
        // 暂时忽略或存入 buffer
        console.log('JSON parse error (ignore partial chunk):', e);
      }
    }
  });
}

4. 常见坑排查清单

如果还是展示不出来，请按以下顺序检查：

1. ArrayBuffer 解码乱码：
   • UniApp 的 onChunkReceived 返回的是 ArrayBuffer。如果不进行 UTF-8 解码直接转字符串，中文会显示乱码或空白。
   • 解决：确保使用了 TextDecoder 或者 decodeURIComponent(escape(String.fromCharCode(...))) 这种方式正确解码。
2. Vue 响应式失效：
   • 如果在 onChunkReceived 这种异步回调中，this 指向可能丢失。
   • 解决：确保在外部定义了 const that = this;，或者使用箭头函数。
   • 解决：如果是 Vue 2，修改数组索引可能不会触发视图更新。使用 this.$set(this.messageList, index, newValue) 或者直接修改对象属性 this.messageList[index].content += '...' 通常是有效的，但要确保 messageList 是在 data 中定义的。
3. Markdown 渲染：
   • Dify 输出的是 Markdown 格式（包含 **加粗**，Code Block 等）。
   • 如果直接用 <text>{{ content }}</text>，只能显示纯文本。
   • 建议：在 UniApp 中引入 mp-html 或 towxml 等组件来渲染 Markdown，这样能正确展示代码块和格式。
4. JSON 解析报错：
   • 流式传输网络抖动时，JSON 可能会被截断（比如 {"answer": "你好 后面断了）。
   • 解决：需要实现一个 buffer 变量，如果 JSON.parse 失败，将当前字符串存起来，等下一个 chunk 来了拼接到头部再解析。