微信小程序-接入sse数据流并实现打字机效果（ ChatGPT )

liminla!

已于 2024-12-17 14:35:16 修改

阅读量7k

点赞数 6

CC 4.0 BY-SA版权

文章标签：微信小程序小程序

于 2024-04-08 18:47:54 首次发布

本文链接：https://blog.csdn.net/m0_45857808/article/details/137519589

文章讲述了如何在微信小程序中使用SSE接口接收数据，特别关注了从Uint8Array转换为text格式的过程，并实现了聊天对话的打字效果和自动滚动功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

从流中获取的数据格式如下

小程序调用SSE接口

const requestTask = wx.request({
   
   
      url: `xxx`, // 需要请求的接口地址
      enableChunked: true, // enableChunked必须为true
      method: "GET",
      timeout: '120000',
      success(res) {
   
   
        console.log(res.data)
      },
      fail: function (error) {
   
   
        // 请求失败的操作
        console.error(error);
      },
      complete: function () {
   
   
        // 请求完成的操作，无论成功或失败都会执行
        console.log('请求完成', str);
      }
    })
    // 监听服务端返回的数据
    requestTask.onChunkReceived(res => {
   
   
      console.log( res, res.data);
    })

我这边接收到的数据类型为Uint8Array，需要处理成text文本（如上图）

在这里插入图片描述

 // 监听服务端返回的数据
    requestTask.onChunkReceived(res => {
   
   
      console.log( res, res.data);
      // Uint8Array转为text格式
      let arrayBuffer = res.data;
      let decoder = new TextDecoder('utf-8');
      let text = decoder.decode(arrayBuffer);
      //let text = that.arrayBufferToString(arrayBuffer)//真机使用
      //正则匹配上所有event:data后面的文字
      const eventRegex = /event:data\ndata:"data:(.*?)"/g;
      const eventRegexErr = /event:600\ndata:"(.*?)"/g;
      let matches = [];
      let match;
      if (text.indexOf('600') != -1) {
   
   //如果获取响应失败
        while ((match = eventRegexErr.exec(text)) !== null) {
   
   
          wx.showToast({
   
   
            title: match[1],
          })
          matches.push(match[1]);
        }
        str = str + matches.join('')
      } else {
   
   //如果获取响应成功
        while ((match = eventRegex.exec(text)) !== null) {
   
   
          matches.push(match[1]);
        }
        //处理成字符串
        str = str + matches.join('')
        console.log(text, str);
      }
    })

TextDecoder在真机上没法使用，真机上需要使用另一种

  arrayBufferToString(arr) {
   
   
    if (typeof arr === 'string') {
   
   
      return arr;
    }
    var dataview = new DataView(arr);
    var ints = new Uint8Array(arr.byteLength);
    for (var i = 0; i < ints.length; i++) {
   
   
      ints[i] = dataview.getUint8(i);
    }
    var str = '',
      _arr = ints;
    for (var i = 0; i < _arr.length; i++) {
   
   
      if (_arr[i]) {
   
   
        var one = _arr[i].toString(2),
          v = one.match(/^1+?(?=0)/);
        if (v && one.length == 8) {
   
   
          var bytesLength = v[0].length;
          var store = _arr[i].toString(2).slice(7 - bytesLength);
          for (var st = 1; st < bytesLength; st++) {
   
   
            if (_arr[st + i]) {
   
   
              store += _arr[st + i].toString(2).slice(2);
            }
          }
          str += String.fromCharCode(parseInt(store, 2));
          i += bytesLength