uniapp renderjs使用 SSE方案

已于 2023-12-25 19:11:48 修改
阅读量1.5k 收藏 9
点赞数 10
文章标签： uni-app javascript 前端 vue.js
于 2023-11-30 17:54:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45047834/article/details/134718117
版权

uniapp中renderjs使用主要解决在APP端无法使用web端的js问题
如果只开发web端就不用考虑renderjs 跨端app中可以使用，解决通信阻塞问题
这是一个在app端使用sse的方案
下面展示一些。

<template>
	<!-- #ifdef APP -->
	<page-meta :root-font-size="footSize" style="display: block;"></page-meta>
	<!-- #endif -->
	<view class="page-top">
		<!-- #ifdef APP -->
		<view class="status_bar">
			<view class="top_view"></view>
		</view>
		<!-- #endif -->
		<uni-nav-bar fixed class="nav-title" left-icon="back" :title="aiName" backgroundColor="#f8f8f8" @clickLeft="toPrev"></uni-nav-bar>
		<view class="cu-chat">
			<blockquote v-for="(item,index) in chatList" :key="item.id">
				<view class="cu-item" :class="{'self':item.self == 1}"  v-if="item.self == 1">
					<view class="main">
						<view class="content shadow">
							<text class="self-content">{{item.content}}</text>
						</view>
					</view>
					<view class="cu-avatar radius" :style="{'background-image': 'url('+item.avatarImg+')'}"></view>
				</view>
				<view class="cu-item" v-else>
					<view class="cu-avatar radius" :style="{'background-image': 'url('+item.avatarImg+')'}"></view>
					<view class="main">
						<view class="content shadow">
							<text class="self-content">{{item.content}}</text>
						</view>
						<view class="flex chat-tools" v-if="item.isEnd && !item.self">
							<view class="reloadContent cu-btn bg-blue sm" @click="reloadContent()" v-if="chatList.length == (index+1)">
								刷新
							</view>
							<view class="copyContent cu-btn bg-blue sm" @click="copyContentBtn(item.content)">
								复制
							</view>
						</view>
					</view>
				</view>
			</blockquote>	
		</view>
		<view class="cu-bar foot input">
			<input class="solid-bottom" :placeholder="placeholderStr"
			v-model="content"
				placeholder-class="input-placeholder" 
				:adjust-position="false" 
				:focus="false" 
				maxlength="2500" 
				cursor-spacing="10"></input>
			<button :prop="msg" :change:prop="renderScript.onChange" class="cu-btn bg-blue shadow" :disabled="ifSend" @click="sendMsg">发送</button>
		</view>
	</view>
</template>

<script>
	// import {BASE_URL} from '@/util/request.js'
	import {copyContent} from '@/util/tools.js'
	// import {EventSourcePolyfill} from 'event-source-polyfill'
	import avatarDef from '@/static/img/avatar_deft.png'
	import aislogo from '@/static/img/aislogo.png'
	export default {
		data() {
			return {
				footSize: this.$footFontSize,
				msg:{//监听msg中的变化去执行renderjs中的onchange方法
					userId:'',
					conversationId:'',
					renderContent:''
				},
				chatList:[],
				answerWords:[],
				eventSource:null,
				contentIdx:0,
				placeholderStr:'',
				aiLoadding:'',
				aiName:'',
				content:'',
				welcome:'',
				ifSend:false,
				conversationId:'',
				userId:'',
				quesId:'',
				quesIds:'',
				subjectId:'',
				planId:'',
				batchId:'',
				userPlanId:'',
				user:{
					nickName: '',
					avatar: avatarDef,
				},
				aiUser:{
					nickName: '',
					avatar: aislogo,
				}
			}
		},
		onLoad(options){
			this.quesId = options.quesID;
			this.quesIds = options.quesIds;
			this.subjectId = options.subjectId;
			this.planId = options.planId;
			this.batchId = options.batchId;
			this.userPlanId = options.userPlanId;
			let buffer = {
				quesId:this.quesId
			}
			var that = this;
			this.$myRequest({
				url:'/api/bot/conversation',
				method:'POST',
				data:{
					userPlanId:this.userPlanId,
					quesId:this.quesId,
					ran:Math.random()
				}
			}).then(res=>{
				that.welcome = res.data.welcome;
				that.conversationId = res.data.conversation_id;
				that.content = res.data.first_content;
				that.userId = res.data.userId;
				that.placeholderStr = res.data.placeholder;
				that.aiLoadding = res.data.aiLoadding;
				that.aiName = res.data.aiName;
				that.msg.userId = res.data.userId;
				that.msg.conversationId = res.data.conversation_id;
				that.msg.renderContent = res.data.first_content;
				that.firstChat();
			})
		},
		methods: {
			firstChat(){
				//首次进入在内容生成之前发送按钮不可使用
				this.ifSend = true;
				this.chatList.push({
					modelRole: this.aiUser.nickName,
					avatarImg: this.aiUser.avatar,
					self: 0,
					id: +new Date(),
					content: this.welcome,
					isEnd: false,
					isList:false
				})
				this.chatList.push({
					modelRole: this.user.nickName,
					avatarImg: this.user.avatar,
					self: 1,
					id: +new Date()+1,
					content: this.content,
					isEnd: false,
					isList:false
				})
				this.chatList.push({
					modelRole: this.aiUser.nickName,
					avatarImg: this.aiUser.avatar,
					self: 0,
					id: +new Date()+10,
					content: this.aiLoadding,
					isEnd: false,
					isList:false
				})
				this.content = '';
				this.scrollBottom(10000);
				//创建EventSource 并发起会话
				// this.eventSourceBox();
			},
			eventSourceBox(){
				let lastItem = this.chatList[this.chatList.length - 1];
				var that = this;
				const url = BASE_URL+"/stream-chat/chat.php?question="+encodeURIComponent(this.content.replace(/\+/g, '{[$add$]}'))+"&conversationId="+this.conversationId+"&userId="+this.userId;
				this.eventSource = new EventSourcePolyfill(url);
				this.eventSource.onopen = (event)=>{
					console.log("连接已建立");
				}
				this.content = '';
				lastItem.contentList = [];
				this.eventSource.onmessage = (event)=>{
					try {
						var result = JSON.parse(event.data);
						// console.log(result);
						if(result.time && result.content ){
							lastItem.isList = true;
							that.ifSend = true;//没有生成完毕禁止点击
							if(lastItem.content == this.aiLoadding){
								lastItem.content = '';
								lastItem.content += result.content;
							}else{
								lastItem.content += result.content;
							}
							that.contentIdx += 1;
							that.scrollBottom();
						}
					} catch (error) {
						console.log(error);
					}
				}
				// this.chatList[this.chatList.length - 1]['contentList'];
				this.eventSource.onerror = (event)=>{
					let lastItem = that.chatList[that.chatList.length - 1];
					this.eventSource.close();
					lastItem.isEnd = true;
					that.ifSend = false;
					console.log((new Date().getTime()), 'answer end error')
					// console.error("发生错误：", JSON.stringify(event));
					// console.error("发生错误：");
				}
				this.eventSource.onclose = (event)=>{
					let lastItem = that.chatList[that.chatList.length - 1];
					// console.log("连接已关闭", JSON.stringify(event.data));
					this.eventSource.close();
					isEnd = true;
					console.log((new Date().getTime()), 'answer end close');
				}
			},
			sendMsg(){
				if (!this.content) {
					return uni.showToast({
						title:'发送内容不能为空',
						icon:'none'
					});
				}
				this.chatList.push({
					modelRole: this.user.nickName,
					avatarImg: this.user.avatar,
					self: 1,
					id: +new Date()+1,
					content: this.content,
				})
				this.chatList.push({
					modelRole: this.aiUser.nickName,
					avatarImg: this.aiUser.avatar,
					self: 0,
					id: +new Date()+10,
					content: this.aiLoadding,
					isEnd: false,
					isList:false
				})
				this.ifSend = true;
				this.msg.renderContent = this.content;
				this.content = '';
				this.$nextTick(this.scrollBottom());
				//创建eventSource
				// this.eventSourceBox();
			},
			scrollBottom(height){
				const query = uni.createSelectorQuery().select('.page-top');
				query.boundingClientRect((data) => {
						let pageScrollTop = Math.round(data.height);
						if(height != undefined){
							pageScrollTop = height;
						}
						// console.log(pageScrollTop);
						setTimeout(() => {
							uni.pageScrollTo({
								scrollTop: pageScrollTop, //滚动的距离
								duration: 0, //过渡时间
							})
						},50)
					}).exec()
			},
			toPrev(){
				uni.reLaunch({
					url:'/pages/print/worksDetail/worksDetail?batchId='+this.batchId+'&subjectId=' + this.subjectId + "&quesIds=" + this.quesIds + "&planId=" + this.planId + '&userPlanId=' +this.userPlanId
				})
			},
			copyContentBtn(item){
				copyContent(item)
			},
			reloadContent(){
				let ques = this.chatList[this.chatList.length - 2]['content'];
				this.chatList[this.chatList.length - 1]['content'] = this.aiLoadding;
				this.chatList[this.chatList.length - 1]['isEnd'] = false;
				this.ifSend = true;
				// console.log(ques);
				this.msg.renderContent = '';
				this.msg.renderContent = ' '+ques;
				this.$nextTick(this.scrollBottom());
				// this.eventSourceBox();
			},
			// 接收renderjs发回的数据
			acceptDataFromRenderjs(options) {
				let lastItem = this.chatList[this.chatList.length - 1];
				this.ifSend = true;//没有生成完毕禁止点击
				if(lastItem.content == this.aiLoadding){
					lastItem.content = '';
					lastItem.content += options.messageData;
				}else{
					lastItem.content += options.messageData;
				}
				this.scrollBottom();
				// this.projNotices = JSON.parse(options.type)
			},
			acceptDataFromRenderjsEnd(options){
				let lastItem = this.chatList[this.chatList.length - 1];
				lastItem.isEnd = options.renderIsEnd;
				this.ifSend = options.renderIfSend;//没有生成完毕禁止点击
			}
		}
	}
</script>
<script module="renderScript" lang="renderjs">
	import {BASE_URL} from '@/util/request.js'
	import {EventSourcePolyfill} from 'event-source-polyfill'
	
	export default {
		data(){
			return {
				message:'',
				renderIsEnd:false,
				renderIfSend:false
			}
		},
		mounted() {
			
		},
		methods: {
			onChange(newValue, oldValue, ownerInstance, instance){
				if(newValue.userId != '' && newValue.conversationId != ''){
					this.sse(newValue.userId,newValue.conversationId,newValue.renderContent)
				}
			},
			// 发送数据到service层
			emitData() {
				// #ifdef APP
				UniViewJSBridge.publishHandler('onWxsInvokeCallMethod', {
					cid: this._$id,
					method: 'acceptDataFromRenderjs',
					args: {
						messageData: this.messageData
					}
				})
				// #endif
				// #ifdef H5
				var options = {
					messageData:this.messageData
				};
				this.acceptDataFromRenderjs(options);
				// #endif
			},
			emitDataEnd(){
				// #ifdef APP
				UniViewJSBridge.publishHandler('onWxsInvokeCallMethod', {
					cid: this._$id,
					method: 'acceptDataFromRenderjsEnd',
					args: {
						renderIsEnd: this.renderIsEnd,
						renderIfSend:this.renderIfSend
					}
				})
				// #endif
				// #ifdef H5
				var options = {
					renderIsEnd: this.renderIsEnd,
					renderIfSend:this.renderIfSend
				};
				this.acceptDataFromRenderjsEnd(options);
				// #endif
			},
			sse(userId,conversationId,renderContent){
				// console.log(renderContent);
				let that = this;
				const url = BASE_URL+"/stream-chat/chat.php?question="+encodeURIComponent(renderContent.replace(/\+/g, '{[$add$]}'))+"&conversationId="+conversationId+"&userId="+userId;
				const eventSource = new EventSourcePolyfill(url);
				eventSource.onopen = (event)=>{
					console.log("连接已建立");
				}
				eventSource.onmessage = (event)=>{
					var result = JSON.parse(event.data);
					if(result.time && result.content ){
						that.messageData = '';
						that.messageData = result.content;
						that.emitData();
					}
				}
				eventSource.onerror = (event)=>{
					console.log((new Date().getTime()), 'answer end error')
					that.renderIsEnd = true;
					that.renderIfSend = false;
					that.emitDataEnd();
				}
				eventSource.onclose = (event)=>{
					// console.log("连接已关闭", JSON.stringify(event.data));
					eventSource.close();
					console.log((new Date().getTime()), 'answer end close');
				}
			}
		}
	}
</script>

<style lang="less">
	/* #ifdef APP */
	page {
		background-color: #F1F1F1;
	}
	/* #endif */
</style>
<style lang="less" scoped>
	/* #ifdef H5 */
	page {
		background-color: #F1F1F1;
	}
	/* #endif */
	
	/* #ifdef APP */
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
	.top_view {  
	    height: var(--status-bar-height);  
	    width: 100%;
	    position: fixed;  
	    background-color: #F8F8F8;  
	    top: 0;  
	    z-index: 999;  
	} 
	/* #endif */
	.nav-title /deep/ .uni-nav-bar-text{
		font-size: 0.3rem;
		overflow: initial;
	}
	.cu-avatar{
		background-color: #ffffff !important;
	}
	.self-content{
		overflow: auto;
	}
	.main{
		flex-direction: column;
		align-items: flex-end !important;
	}
	.chat-tools{
		padding: 10rpx;
		justify-content: flex-end;
	}
	.chat-tools .cu-btn{
		border-radius: 10rpx;
		margin-left: 12rpx;
	}
</style>
Mr.5先生
关注
  • 10
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
sse：GoHTML5服务器发送事件
02-03
SSE-服务器发送的事件 的Go 为什么要使用服务器发送事件 无需实现自定义协议（WebSockets），只需使用HTTP 便捷JavaScript API，可触发易于处理的事件 自动重新连接 与WebSockets不同，仅单向（服务器->客户端） 去做 身份证处理 改善客户端通道缓冲 进一步阅读
uniapp中使用renderjs(示例sse即时通讯)
最新发布
weixin_45389051的博客
04-24 355
比如我们在uniapp中使用sse(即时通讯)
uniapp中的renderjs使用
dai556688的博客
04-07 1万+
需求是用openlayers在uniapp框架下做一个地图类的软件，选择用renderjs实现地图与dom的交互，一开始也是小白，通过百度资料以及一步步测试后掌握了renderjs的使用，以及地图功能的实现。
Taro/react/微信小程序 对接chatgpt(SSE) 无需websocket
weixin_41792662的博客
08-16 3113
Taro/react/微信小程序 对接chatgpt(SSE) 无需websocket
【SpringBoot】服务器端主动推送SSE技术讲解
weixin_30894583的博客
03-21 527
=====================16、高级篇幅之SpringBoot2.0服务器端主动推送SSE技术讲解 ============================ 1、服务端推送常用技术介绍 简介：服务端常用推送技术介绍，如websocket，sse轮询等 1、客户端轮询:ajax定时拉取 2、服务端主动推送:WebSocket 全双工的，本质上是一个额外的tcp连接...
使用uniapp做ai开发，太简单了。无论是chatgpt还是国内的大语言模型，都可以随意使用
qq_34274756的博客
05-14 4281
做小程序开发的应该都知道uniapp，这是Dcloud推出的一款跨端开发框架。是一个使用开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。目前uniapp的用户非常多，基本上是开发多端小程序的不二之选。最近，chatgpt爆火，很多人也想要进行相关应用的开发，那么，如果用uniapp来做ai开发呢？
springboot+uniapp实战对接ChatGPT, 实现移动端应用对话
码世界
04-18 3795
助力AI解决方案： 文本摘要：给定一篇文章，生成一个简短的摘要。 语言翻译：将一种语言的文本翻译成另一种语言的文本。 文章生成：生成一篇文章，可以用于自动写作、内容创作等领域。 问答系统：回答用户提出的问题，可以用于智能客服、知识库等领域。 自动化写作：自动生成各种类型的文本，例如广告文案、新闻报道、小说等。 论文润色：自动润色用户输入的文章，输出润色后的文章， 代码语法检查： 输入一段代码，给出代码解析和有语法错误的提示。 代码自动生成： 用户简要出入需要的代码场景，即可输出对应的代码片段。
uniapp(一)
m0_74331185的博客
02-03 5910
微信小程序简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验uni-app 是一个使用 Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。
uniapp 小程序端，使用uni-ai-chat对接百度大模型知识库，保留uni-ai-chat流式响应，删除广告及其他冗余代码
weixin_43922504的博客
12-05 2334
uniapp 小程序端，使用uni-ai-chat对接百度大模型知识库，保留uni-ai-chat流式响应，删除广告及其他冗余代码
SSE介绍及使用文档
12-06
SSE的介绍及其使用文档，里边介绍了sse相关运算的相关函数及数据操作
使用sse服务推送消息案例代码
11-19
使用sse服务推送消息案例代码
sse-now：使用SSE的简单节点服务器
02-20
现在使用SSE的简单节点服务器。用法： var source = new EventSource ( 'https://sse.now.sh' ) ;source . onmessage = function ( e ) { console . log ( e . data ) ;} ; 随时查看执照麻省理工学院:copyright:
使用SSE指令加速的电子相册实现
11-12
使用MFC设计照片淡入淡出的电子相册，（项目使用opencv类库，SSE和openmp加速），环境：vs2013和opencv库
SSE使用方式记录(自己做的PPT)
02-27
SSE使用方式记录(自己做的PPT)
分享一个让 uniapp 微信小程序支持 EventSource 的方法
qq_26450889的博客
02-29 1243
然而，根据现有的信息，uni-app并没有直接支持EventSource，这意味着开发者需要寻找其他技术或替代方案来实现类似的效果。尽管有些主流浏览器支持SSE，但小程序目前还不能兼容这个API，这可能是由于微信平台对新技术的兼容性考虑或是开发生态的限制。EventSource（SSE）是一种HTML5标准，旨在提供一种方式来在Web应用中实现异步通信和事件处理。
uniapp中用renderjs，弄明白关系
半朵梨花压海棠
11-04 3096
只要看明白这个代码，就明白了其中关系，注释已经写的很清楚了 <template> <view> <view :msg="msg" :change:msg="renderScript.receiveMsg" class="renderjs" id="renderjs-view"> {{msg}} </view> <button @click="renderScript.emitData">直接调用ren
【用vue开发微信小程序】（uni-app）（自用，不推荐参考）
热门推荐
sp_zhaoyun的博客
07-29 3万+
笔记自用
uniapp中使用render.js进行openlayers、arcgis等地图操作
happy81997的博客
11-17 4554
uniapp中使用render.js进行openers、arcgis等地图操作。
uniapp SSE
10-10
对于您的第一个问题，uniapp SSE（Server-Sent Events）是一种用于从服务器向客户端发送实时数据的技术。它与传统的轮询或长轮询相比，具有更低的延迟和更高的效率。 使用uniapp SSE，您可以在客户端与服务器之间建立一个持久的连接，并通过该连接实时接收服务器端发送的数据。服务器端可以主动推送数据给客户端，而不需要客户端发送请求。这对于实时更新数据、推送通知等场景非常有用。 在uniapp中使用SSE可以通过以下步骤实现： 1. 在客户端：通过uni.request方法向服务器发起一个GET请求，指定请求地址和头部参数。 2. 在服务器端：接受到该请求后，创建一个SSE连接，并将响应头设置为"text/event-stream"。 3. 服务器端：定时向SSE连接发送数据，通过响应流发送，并且每条数据以 "data:" 开头，以 "\n\n" 结尾。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值