uni-app流式接受消息/文件

问题描述

今天利用fastgpt搭建了一个局域网进行访问Ai助理，在前端通过api接口进行请求，用于接收后端的发送的流式消息，那么前端可以进行流式的获取到这个消息，也可以进行直接进行在请求发送完成以后，再进行渲染这个数据，后者显然不符合我们的需求的。今天再进行完成的时候，但是进行今天进行请求的时候，每次都是通过请求完成获取到所有的消息以后再进行渲染的。

问题解决

本来的说法是通过流式使用websocket进行接受这个数据也可以进行实现流式的消息,但是后端需要的请求的方式是POST请求,并不是WS请求,所以只能通过基本请求的方式进行完成接受的流式的数据,在普通的js或者vue项目是可以通过fetch来进行发送请求,来进行完成这个需求的,但是在uniapp中却并不支持进行使用fetch进行完成,所以这里记录一下在uniapp中如何的进行接受流数据.

• 流式数据请求进行异步封装

  const StreamRequest = (content) => {return new Promise((resolve, reject) => {const response = uni.request({url: 'https://www.', // 请求地址method: "POST", // 你的请求方法dataType: "json", // 请求的数据类型data: content, // 请求体header: {'Authorization': `Bearer `,},responseType: "text",enableChunked: true, // 开启流传输success: (res) => {resolve(res)}, // 请求成功回调fail: (err) => {reject(err)} // 请求失败回调})// 返回请求的响应resolve(response)})
  }
  

• 使用流失请求,一下以消息流作为的使用的式例

  const fetchStreamedResponse = async (message)=>{const content={"chatId": "111", "stream": true,"detail": false,'messages': [{'role': 'user', // 用户角色，可以是user,assistant,system,function等，具体可以参考openai文档。'content': `${message}`, // 用户输入的内容，可以是文本，也可以是json格式。}]}// 假设已经完成了封装,并进行了导入  const resp= await StreamRequest(content)console.log(resp);// 返回请求头信息resp.onHeadersReceived((e)=>{console.log(e);})// 成功回调 返回流传输信息 返回arrayBufferresp.onChunkReceived((e)=>{e// 进行处理二进制编码const decoder = new TextDecoder('utf-8'); // 创建一个utf-8解码器，用于解码二进制数据为文本。const txt = decoder.decode(e.data); // 解码二进制数据为文本。const a=parseStream(txt)console.log(a); // 打印解码后的文本数据。})}
  

总结

前端进行通过API接口进行请求流式数据,因为在uniapp中是无法通过fetch进行实时的响应的,所以在uniapp中通过对于请求进行拿到他们的hook进行完成了流式数据的接受和实时的渲染.