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

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

问题描述

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

问题解决

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

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

    js 复制代码
    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)
        })
    }
  • 使用流失请求,一下以消息流作为的使用的式例

    js 复制代码
    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);
    		})
    		
    		// 成功回调 返回流传输信息 返回arrayBuffer
    		resp.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进行完成了流式数据的接受和实时的渲染.

相关推荐
百思可瑞教育5 小时前
Vue中使用keep-alive实现页面前进刷新、后退缓存的完整方案
前端·javascript·vue.js·缓存·uni-app·北京百思可瑞教育
风早爽太7 小时前
在uni-app中使用lottie-web来展示Lottie动画
uni-app
Autumn_yun7 小时前
uniapp 实现项目多语言切换
uni-app
懒大王95279 小时前
uni-app + Vue3 + EZUIKit.js 播放视频流
开发语言·javascript·uni-app
懒大王95279 小时前
uni-app + Vue3 开发展示 echarts 图表
前端·uni-app·echarts
百思可瑞教育12 小时前
Vue 生命周期详解:从初始化到销毁的全过程剖析
前端·javascript·vue.js·前端框架·uni-app·北京百思可瑞教育·百思可瑞教育
jingling55515 小时前
uniapp | 快速上手ThorUI组件
前端·笔记·前端框架·uni-app
百思可瑞教育21 小时前
uni-app 根据用户不同身份显示不同的tabBar
vue.js·uni-app·北京百思可瑞教育·北京百思教育
Q_Q19632884751 天前
python+springboot+uniapp微信小程序题库系统 在线答题 题目分类 错题本管理 学习记录查询系统
spring boot·python·django·uni-app·node.js·php
百思可瑞教育1 天前
使用UniApp实现一个AI对话页面
javascript·vue.js·人工智能·uni-app·xcode·北京百思可瑞教育·百思可瑞教育