uniapp微信小程序端接收ai模型返回的SSE流式数据

文章目录

• 前言
• 一、将enableChunked属性改为true
• 二、通过onChunkReceived监听分段的数据

---

前言

微信小程序原本不支持接收SSE数据,但是request提供了一个enableChunked的属性可以监听到SSE数据

---

一、将enableChunked属性改为true

    const requestTask = uni.request({
      url: "https://xxx",
      enableChunked: true,
      method: "POST",
      data: data,
      header: {
        token: uni.getStorageSync("token"),
      },
      success(res) {
        // console.log("请求成功:", res);
        // console.log("最终结果:", fullResponse.value);
      },
    });

二、通过onChunkReceived监听分段的数据

因为微信小程序端本身不支持流式数据,所以处理起来很麻烦,需要先把获取到的ArrayBuffer转为Uint8Array之后还要把Uint8Array转成字符串,最后将解码之后的字符串转换为JSON对象才是我们真正需要的

     // 创建一个AI消息占位符
    let aiMessageIndex = messages.value.length;
    messages.value.push({
      role: "ai",
      content: "正在思考中...",
    });

    requestTask.onChunkReceived((res) => {
      // 1. 将ArrayBuffer转换为Uint8Array
      const u8a = new Uint8Array(res.data);

      // 2. 将Uint8Array转换为字符串
      var str = String.fromCharCode.apply(null, u8a);
      str = decodeURIComponent(escape(str));
      // console.log("接收到数据", str);
      //将解码后的字符串转换为JSON对象
      let data = parseEventString(str);
      let parsedContents = JSON.parse(data.contents);
      let con = "";
      if (parsedContents) {
        if (Array.isArray(parsedContents)) {
          // 如果是数组，尝试获取最后一个元素的内容
          const lastItem = parsedContents[parsedContents.length - 1];
          con = (lastItem && lastItem.content) || "";
        } else if (parsedContents.content) {
          // 如果是单个对象且有content属性
          con = parsedContents.content;
        }
      }
      if (con == "") {
        con = "正在思考中...";
      }
      messages.value[aiMessageIndex].content = con;

      scrollToBottom();
    });