Uniapp仿ChatGPT Stream流式输出(非Websocket)

Uniapp仿ChatGPT Stream流式输出(非Websocket)

前言:流式输出可以使用websocket也可以使用stream来实现EventSource是 HTML5 中的一个接口,用于接收服务器发送的事件流(Server - Sent Events,SSE)。它提供了一种从服务器单向推送实时数据到 Web 页面的方式,使得 Web 应用能够以类似于事件驱动的模式获取更新,而不需要通过传统的轮询方式(不断地向服务器询问是否有新数据)。

请求和接收

  1. 使用代码
javascript 复制代码
data (){
   return {
      task:null,
      msg:"" ,
      dataList:[], // 聊天内容
   }
},
methods:{
	askAgain() {
		if (this.msg) {
			this.$util.showToast(`请输入您的问题`)
			return
		}
		this.$refs.paging.scrollToBottom()
		setTimeout(() => {
			if (!item) {
			 this.dataList.unshift({
					content: msg, // 消息内容
					type: 1, // 此为消息类别,设 1 为发出去的消息,0 为收到对方的消息,
					end: true,
					name: 'me',
					list: [],
					id: new Date().getTime()
				})
			}
			this.dataList.unshift({
				content: '', // 消息内容
				content1: '', // 消息内容
				type: 0, // 此为消息类别,设 1 为发出去的消息,0 为收到对方的消息,
				end: false,
				name: 'ai',
				id: new Date().getTime()
			})
			this.toSend(msg);
			this.$refs.paging.scrollToBottom()
		}, 300)
	},
	toSend(msg) {
		const that = this;
		this.task = uni.request({
			url: `${ getApp().globalData.requestUrl }ai/app/escort/ai/chat?question=${msg}`, // 会话接口
			enableChunked: true, // 这意味着服务器会采用分块传输编码来发送数据。
			method: 'POST',
			timeout: 900000, // 设置超时时间为10秒
			data: {
				"question": msg, // 问题
				"userId": uni.getStorageSync('wxopenid'), // 此处参数更具自己的参数填写
			},
			success: (res) => {
				console.log(res)
				if (res.statusCode == 200) {
				  	// 本次回话是否完成
				}
			},
			fail: () => {
			
			}
		})
		// 监听流推送
		this.task.onChunkReceived((res) => {
			let uint8Array = new Uint8Array(res.data),
				txt;
			const type = Object.prototype.toString.call(uint8Array);
			if (type === "[object Uint8Array]") {
				txt = decodeURIComponent(escape(String.fromCharCode(...uint8Array)));
			} else if (uint8Array instanceof ArrayBuffer) {
				// 将ArrayBuffer转换为Uint8Array	
				const arr = new Uint8Array(uint8Array);
				txt = decodeURIComponent(escape(String.fromCharCode(...arr)));
			}
			console.log(txt)
			// 此处是我的逻辑  我推送的数据用^分割  所以要截取。
			txt.split('^').forEach(it => {
				if (it) {
					let res = JSON.parse(it)
					console.log(res)
					that.dataList[0].content1 += res.data
				}
			})
		});
	},
}
  1. 以上为对话请求 和 流响应接收逻辑。

框架使用 z-paging

  1. 插件地址 z-paging
  2. 我的框架使用 z-paging 插件

文本回显 普通文本

javascript 复制代码
<view class="text-warp">
	{{ item.content }}
</view>

含有标签结构的文本回显 如img video 等

  1. 插件地址 zero-markdown-view
javascript 复制代码
<zero-markdown-view :markdown="item.content"></zero-markdown-view>

流推送标签 会导致页面回显出标签 标签推送完才能展示出图片或视频

  1. 解决方法 声明新的变量接收 字符
  2. 遍历字符 当流中出现<img 字符开始截取 然后插入loading图片
  3. 当 图片标签尾部 /> 出现后 用截取的图片 替换掉 loading图片
  4. 以上为处理方法 , 可以解决zero-markdown-view 组件回显 带图片,标签的流数据时 闪烁的问题,以及标签的暴漏问题

流推送 字符长短不一,实现打字效果

  1. 每次推送调用递归方法 取一个字符
javascript 复制代码
	addNextCharacter() {
		if (this.index < this.newVal.length) { 
			this.messages[0].content += this.newVal[this.index];
			this.index++; 
			this.character = setTimeout(()=>{
				this.addNextCharacter()
			},Math.random() * 150 + 30)
		}else{
			clearTimeout(this.character)
			this.character = null
			if(!this.stratSet){
				// 此处在请求完成后 清空所有的数据
			}
		}
	},

以上为开发中聊天功能 问题整理。代码有点乱,暂不付代码。有问题还请私信。 代码地址https://gitee.com/xyx904/ai/tree/master/artShow

相关推荐
Q_Q51100828517 小时前
python+uniapp基于微信小程序团购系统
spring boot·python·微信小程序·django·uni-app·node.js·php
炒毛豆18 小时前
uniapp微信小程序+vue3基础内容介绍~(含标签、组件生命周期、页面生命周期、条件编译(一码多用)、分包))
vue.js·微信小程序·uni-app
盛夏绽放1 天前
关于 uni-app 与原生微信小程序中的生命周期 —— 一次“生命旅程”的解读
微信小程序·小程序·uni-app
Greedy Alg1 天前
Socket编程学习记录
网络·websocket·学习
知识分享小能手1 天前
uni-app 入门学习教程,从入门到精通,uni-app 基础知识详解 (2)
前端·javascript·windows·学习·微信小程序·小程序·uni-app
2501_916008891 天前
iOS 发布全流程详解,从开发到上架的流程与跨平台使用 开心上架 发布实战
android·macos·ios·小程序·uni-app·cocoa·iphone
风清云淡_A1 天前
【uniapp】uni.uploadFile上传数据多出一个304的get请求处理方法
uni-app
shykevin1 天前
uni-app x商城,商品列表组件封装以及使用
windows·uni-app
Cxiaomu1 天前
React Native 项目中 WebSocket 的完整实现方案
websocket·react native·react.js
cesske1 天前
uniapp 编译支付宝小程序canvas 合成图片实例,支付宝小程序 canvas 渲染图片 可以换成自己的图片即可
小程序·uni-app·apache