小程序实现chatGpt功能

效果如下:
在这里插入图片描述

SSE问题太多,所以还是配合websorket实现

1.连接sorket

const handleConnectWebScoket = (session_id:Number) => {
	uni.showLoading({
		title: '加载中'
	})
	uni.connectSocket({
	  url: '' //后端url
	  , success(data) {
	    console.log("websocket连接成功");
	  },
	})
	uni.onSocketOpen(function (res_open) {
		console.log("websocket - onSocketOpen");
		sendWSMessage(session_id)
		receiveSocketMessage()
	})
	// 监听webSocket错误
	uni.onSocketError(function (res) {
		console.log("websocket监控服务暂时不可用", res);
	})
}

2.发布sorket的message

const sendWSMessage = (session_id:Number) => {
	let form = { // 后端定义的传参
	  params: {
	  }
	}
	console.log("websocket - sendSocketMessage");
	uni.sendSocketMessage({
	  data: JSON.stringify(form),
	  success: res => {
	  }
	});
}

3.获取sorket的内容

const receiveSocketMessage = () => {
	console.log("websocket - onSocketMessage");
	uni.onSocketMessage(function(res) {
		uni.hideLoading()
		if (res.data === 'PONG') {
			return
		}
		if (res.data && isJSON(res.data)) {
		  const data = JSON.parse(res.data)
		  if (data.code && data.code === 4002) {
		    if (interval.value){
		      clearInterval(interval.value)
		    }
			closeWS()
		    return
		  }
		  if (data.content) {
		    if (isJSON(data.content)) {
		      const content = JSON.parse(data.content)
		      if (content.choices[0].delta.content) {
		        list.value[index.value] += content.choices[0].delta.content
		        chatScroll()
		      }
		    }
		    if (data.content === '\\n\\n') {
		      list.value[index.value] += data.content
		    }
		  }
		}
	})
}

关闭sorket的方法

const closeWS = () => {
	uni.closeSocket({
		success(close_res) {
			console.log('close_res',close_res);
		},fail(e) {
			console.log('close_fail',e)
		}
	})
}

如何使用呢?

const index = ref<number>(0)
const list = ref<Array<string>>([])

页面如何展示
{{ list[index] }}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/172536.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux中Team链路聚合配置

目录 一、Team介绍 二、网卡的bonding和Teaming技术 三、Teaming常用工作模式 四、实验环境 五、添加物理网卡 1、给虚拟机新增四张物理网卡 2、查看网卡信息 六、Team链路聚合配置 1、创建team0的网络接口 2、为team0设置静态IP,掩码位&#xff0c;网关&#xff0c;dns…

NodeMCU ESP8266构建Web Server网页端控制设备

NodeMCU ESP8266构建Web Server网页端控制设备 前言 NodeMCU ESP8266 内部集成了TCP/IP协议栈&#xff0c;可以快速构建网络功能&#xff0c;搭建联网应用的硬件平台&#xff1b; ESP8266可以作为WiFi接入点&#xff08;Station&#xff09;&#xff0c;这样可以方便连接互联…

计算机网络——网络可靠性及网络出口配置

1. 前言&#xff1a; 学习目标&#xff1a; 1.了解链路聚合的作用 2. 了解ACL的工作原理 3. 了解NAT的工作原理和配置 2. 网络可靠性方案 网络可靠性是指网络在面对各种异常情况或故障时&#xff0c;能够维持正常运行和提供服务的能力。这包括防止网络中断、减小数据丢失的可能…

HelpLook VS Zendesk:哪种知识库软件更适合您的业务

为任何组织创造一个开放且协作的环境至关重要。然而&#xff0c;高水平的员工每周可能会花费多达30个小时处理电子邮件和协作&#xff0c;对他们的工作效率产生了重大影响。 为了解决这个挑战&#xff0c;建立一种高效的信息共享方法至关重要&#xff0c;不会妨碍团队的生产力…

hadoop 日志聚集功能配置 hadoop(十一)

由图所示&#xff0c;本文主要是将三台机器log 进行日志聚集查看。图更加直观 1. 首先需要配置历史服务器配置&#xff0c;才可以配置日志聚集功能&#xff1a; hadoop 配置历史服务器 开启历史服务器查看 hadoop (十)-CSDN博客 2. 配置了三台服务器&#xff0c;hadoop22, ha…

如何做好前端单元测试?字节5年测试老司机是这样说的!

近几年&#xff0c;前端发展越来越迅猛&#xff0c;各类框架层出不穷&#xff0c;前端实现的业务逻辑也越来越复杂&#xff0c;前端单元测试也越来越受重视&#xff0c;包括百度在内的一些大厂在面试中也会问到单元测试相关的题目。那么前端应该如何做好单元测试&#xff1f; 什…

深度学习之基于yolo的体育运动项目姿态估计识别计数系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 深度学习在体育运动项目姿态估计识别计数系统中的应用是一项具有挑战性和应用价值的研究领域。以下是对深度学习在体…

OpenStack-train版安装之环境准备

环境准备 环境介绍VMware配置WMware虚拟机最低配置WMware添加网卡WMware添加硬盘 基础环境安装修改各节点的主机名修改各节点的hosts文件修改各节点的内核参数关闭各节点的防火墙和selinux安装NPT&#xff08;时间同步&#xff09;安装OpenStack基础服务包 CentOS升级内核 环境…

【STM32】W25Q64 SPI(串行外设接口)

一、SPI通信 0.IIC与SPI的优缺点 https://blog.csdn.net/weixin_44575952/article/details/124182011 1.SPI介绍 同步&#xff08;有时钟线&#xff09;&#xff0c;高速&#xff0c;全双工&#xff08;数据发送和数据接收各占一条线&#xff09; 1&#xff09;SCK:时钟线--&…

ODBC配置数据源及相关问题(“找不到工程和库”“实时错误91对象变量或with块变量未设置”等)

目录 背景遇到的问题及解决步骤1、找不到工程和库问题分析问题解决 2、 实时错误91&#xff0c;对象变量或with块变量未设置问题分析问题解决 3、文件dsn配置问题什么是dsn文件&#xff0c;内容是什么&#xff0c;作用是什么ODBC配置dsn文件配置文件dsn默认路径ODBC 32位和64位…

使用DHorse发布SpringBoot项目到K8S

前言 在介绍DHorse的操作之前&#xff0c;先来介绍一下使用k8s发布应用的步骤&#xff0c;以SpringBoot应用为例进行说明。 1.首先从代码仓库下载代码&#xff0c;比如GitLab&#xff1b; 2.接着进行构建&#xff0c;比如使用Maven&#xff1b; 3.如果要使用k8s作为编排&am…

实在智能出席山东省数据科学大会,构建产学研教数智创新生态

11月18日至19日&#xff0c;由山东大学、山东省科学技术协会、山东省大数据局主办的首届“山东省数据科学大会暨泰山科技论坛”在山东大学&#xff08;中心校区&#xff09;隆重召开&#xff0c;以“数聚慧能 科创未来”为主题&#xff0c;来自全国各地的高校、科研机构、企事业…

数据结构与算法之美学习笔记:24 | 二叉树基础(下):有了如此高效的散列表,为什么还需要二叉树?

目录 前言二叉查找树&#xff08;Binary Search Tree&#xff09;二叉查找树的时间复杂度分析解答开篇内容小结 前言 本节课程思维导图&#xff1a; 二叉查找树最大的特点就是&#xff0c;支持动态数据集合的快速插入、删除、查找操作。我们之前说过&#xff0c;散列表也是支持…

idea中的sout、psvm快捷键输入,不要太好用了

目录 一、操作环境 二、psvm、sout 操作介绍 2.1 psvm&#xff0c;快捷生成main方法 2.2 sout&#xff0c;快捷生成打印方法 三、探索 psvm、sout 底层逻辑 一、操作环境 语言&#xff1a;Java 工具&#xff1a; 二、psvm、sout 操作介绍 2.1 psvm&#xff0c;快捷生成m…

SpringCloud原理-OpenFeign篇(三、FeignClient的动态代理原理)

文章目录 前言正文一、前戏&#xff0c;FeignClientFactoryBean入口方法的分析1.1 从BeanFactory入手1.2 AbstractBeanFactory#doGetBean(...)中对FactoryBean的处理1.3 结论 FactoryBean#getObject() 二、FeignClientFactoryBean实现的getObject()2.1 FeignClientFactoryBean#…

Flutter笔记:使用相机

Flutter笔记 使用相机 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/qq_28550263/article/details/134493373 【简介】本文介绍在 Fl…

用VS编译ROS包

扩展安装 在扩展中搜索并安装ROS、C、python、CMake和CMake Tools。 打开工作空间 文件→打开文件夹 新建功能包 右键src文件夹&#xff0c;选择新建功能包&#xff08;通常是最后一条命令&#xff09; 编译 如果需要新建终端的话&#xff0c;就点击下图中的加号 创建la…

Git 笔记之gitignore

解释为&#xff1a;git ignore 即&#xff0c;此类型的文件将会被忽略掉&#xff0c;从而不会进行管理 具体的模板可以从 GitHub 网站上来进行设置 GitHub - github/gitignore: A collection of useful .gitignore templates Common_gitignore: gitignoregithub开源项目&…

Spring-IOC-@Value和@PropertySource用法

1、Book.java PropertySource(value"classpath:配置文件地址") 替代 <context:property-placeholder location"配置文件地址"/> Value("${book.bid}") Value("${book.bname}") Value("${book.price}") <bean id&…

C++ STL -->string类

文章目录 STL什么是STL String类string类对象的构造方式string类对象的容量操作string类对象的访问及遍历操作string迭代器函数遍历类对象 stirng类对象的修改操作string类非成员函数 STL 什么是STL STL全称standard template libaray-标准模板库 是C标准库的重要组成部分 不…
最新文章