当前位置：首页 > news >正文

关于uniapp解析SSE响应数据的处理

news 2025/6/23 8:10:40

通过uniapp开发与大模型对话的微信小程序，并且后端需要通过SSE向小程序返回响应数据。

微信小程序端需要展示响应数据，在这个过程中，数据解析这里踩了不少坑。

uniapp端开发微信小程序时，SSE连接处理的代码如下：

  const initSSE2 = () => {console.log(uni.getStorageSync('token'))requestTask = uni.request({url: 'http://127.0.0.1:8889/connect',timeout: 30000,responseType: 'text',method: 'POST',enableChunked: true, //配置这里header: {Accept: 'text/event-stream','Authorization': uni.getStorageSync('token') //自定义请求头信息},responseType: 'arraybuffer',data: {},success: response => {console.log("success:" + JSON.stringify(response))},fail: error => {console.log("error:" + JSON.stringify(error))}})requestTask.onHeadersReceived((res) => {console.log("header:" + JSON.stringify(res.header));});// 这里监听消息requestTask.onChunkReceived((res) => {const uint8Array = new Uint8Array(res.data);let text = String.fromCharCode.apply(null, uint8Array);text = decodeURIComponent(escape(text));// 将后台通过streaming response返回的消息拼接到消息中messages.value[messages.value.length - 1].content += text;})}

后端返回的数据，在小程序端展示后结果如下：

从展示效果看，返回的数据都以“data:”开头，而且数据都发生了换行。经过查询资料，了解到SSE返回的数据以"data:"开头，"\n\n"进行结尾，比如上面返回的数据类似这样的格式：

data:你好\n\n

SSE客户端端打印返回的数据：

        requestTask.onChunkReceived((res) => {console.log('响应数据:', res.data)const uint8Array = new Uint8Array(res.data);let text = String.fromCharCode.apply(null, uint8Array);text = decodeURIComponent(escape(text));// 将后台通过streaming response返回的消息拼接到消息中messages.value[messages.value.length - 1].content += text;})

打印内容如下：

其中，"100 97 116 97 58"表示"data:"，"10 10"表示"\n\n"，而且根据响应数据，我们发现SSE客户端是一次处理一批后端响应的数据。

于是修改客户端解析数据的逻辑为：

requestTask.onChunkReceived((res) => {console.log('响应数据:', res.data)const uint8Array = new Uint8Array(res.data);let text = String.fromCharCode.apply(null, uint8Array);text = decodeURIComponent(escape(text));console.log('处理前:', text);let info = text.replace(/data:|\n\n/g, '')console.log('处理后:', info)// 将后台通过streaming response返回的消息拼接到消息中messages.value[messages.value.length - 1].content += info;})

其中通过正则表达式替换所有的"data:"和"\n\n"。替换后，展示效果如下：