uniapp APP端实现打字机效果

打字机效果是在各个AI模型中都会看到的,数据传输主要是用sse,接口返回的数据是带markDown格式的字段(以下简称md字段),本文章主要将在安卓环境下的实现,仅供参考😀

打字机效果

打字机的实现是参考另一个大佬文章中的,直接使用,大佬的是ts版本,我的是js版本

js 复制代码
// 打字机队列
export class Typewriter {
	queue = []
	consuming = false
	constructor(onConsume) {
		this.onConsume = onConsume
	}
	// 输出速度动态控制
	dynamicSpeed() {
		const speed = 2000 / this.queue.length
		if (speed > 200) {
			return 200
		} else {
			return speed
		}
	}
	// 添加字符串到队列
	add(str) {
		if (!str) return
		str = str.replaceAll('\\n', '\n');
		this.queue.push(...str.split(''));
	}
	// 消费
	consume() {
		if (this.queue.length > 0) {
			const str = this.queue.shift()
			str && this.onConsume(str)
		}
	}
	// 消费下一个
	next() {
		this.consume()
		// 根据队列中字符的数量来设置消耗每一帧的速度,用定时器消耗
		this.timmer = setTimeout(() => {
			this.consume()
			if (this.consuming) {
				this.next()
			}
		}, this.dynamicSpeed())
	}
	// 开始消费队列
	start() {
		this.consuming = true
		this.next()
	}
	// 结束消费队列
	done() {
		this.consuming = false
		clearTimeout(this.timmer)
		// 把queue中剩下的字符一次性消费
		this.onConsume(this.queue.join(""))
		this.queue = []
	}
}
  • 引入使用
js 复制代码
import { Typewriter } from '@/utils/typeWriter.js';

由于uniapp 无法使用sse,需要使用到插件fetch-event-source加上renderjs

使用renderjs

使用rederjs 可参考uniapp官网 renderjs | uni-app官网 (dcloud.net.cn)

但是其中直接获取逻辑层option的值的写法只有在h5页面 才生效,在APP端用不了,那如何取逻辑层的数据呢?

获取逻辑层的数据

由于使用了renderjs,可以使用document

在逻辑层定义数据绑定在一个元素上(这个元素专门拿来传输数据),用document获取元素,再使用getAttribute去获取定义的数据

js 复制代码
//自定义数据绑定元素
<view id="transmit" :data-url="typeWriterUrl" :data-uid="curUid" :data-trainId="trainId" ></view>
//获取数据
let typeWriterView = document.getElementById('typeWriterView')
let url = transmit.getAttribute("data-url");
let uid = transmit.getAttribute("data-uid");
let fitnessAssessmentId = transmit.getAttribute("data-trainId");

那逻辑层的数据如何驱动renderjs的数据呢 可以绑定数据在元素上,:isInvoke="isInvoke"

使用:change:isInvoke="typeWriterRender.receiveMsg"renderjs中使用监听事件监听数据的变化

其中typeWriterRender 对应renderjs中声明的modulereceiveMsg是对应监听事件

js 复制代码
//元素
<view id="transmit" :data-url="typeWriterUrl" :data-uid="curUid" :data-trainId="trainId" :isInvoke="isInvoke" :change:isInvoke="typeWriterRender.receiveMsg"></view>
//renderjs中 receiveMsg 监听事件
receiveMsg(newValue, oldValue, ownerVm, vm) {}

使用fetch-event-source

  • 安装fetch-event-source
js 复制代码
npm install @microsoft/fetch-event-source
  • 引入fetch-event-source
js 复制代码
import { fetchEventSource } from '@microsoft/fetch-event-source';
  • 使用fetch-event-source 进行post请求

使用markdown-it

  • 安装markdown-it
js 复制代码
npm install markdown-it
  • 使用
js 复制代码
import MarkdownIt from 'markdown-it';
//初始化
let md = MarkdownIt({
  html: true,
  linkify: true,
  typographer: true,
});

总体实现

js 复制代码
//new 一个打字机类的对象 生成html
typeWriterSelf = new Typewriter((str) => {
		htmlmd += str;
                //获取元素
		let typeWriterView = document.getElementById('typeWriterView')
                //md字段转成html
		let html = md.render(htmlmd);
                //直接设置html
		typeWriterView.innerHTML = html;
});
//初始化
typeWriterSelf.start();
//监听接口返回的数据 添加到打字类中
const ctrl = new AbortController();
fetchEventSource(url + '/xxx/xxx', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json'
				},
				body: JSON.stringify({
					uid,
					fitnessAssessmentId
				}),
				signal: ctrl.signal,
				onmessage(msg) {
					if (msg.event === '') {
						var result = msg.data;
                                                //获取数据添加
						typeWriterSelf.add(result);
					} else if (msg.event === 'close') {
						ctrl.abort();
					}
				},
				onerror(err) {
					console.log('err=>>>',err);
					throw err; //必须throw才能停止
				}
			});

参考文章

相关推荐
tuokuac26 分钟前
nginx配置前端请求转发到指定的后端ip
前端·tcp/ip·nginx
程序员爱钓鱼30 分钟前
Go语言实战案例-开发一个Markdown转HTML工具
前端·后端·go
万少1 小时前
鸿蒙创新赛 HarmonyOS 6.0.0(20) 关键特性汇总
前端
还有多远.1 小时前
jsBridge接入流程
前端·javascript·vue.js·react.js
蝶恋舞者1 小时前
web 网页数据传输处理过程
前端
非凡ghost1 小时前
FxSound:提升音频体验,让音乐更动听
前端·学习·音视频·生活·软件需求
新智元2 小时前
不到 10 天,国产「香蕉」突袭!一次 7 图逼真还原,合成大法惊呆歪果仁
人工智能·openai
吃饭最爱2 小时前
html的基础知识
前端·html
我没想到原来他们都是一堆坏人2 小时前
(未完待续...)如何编写一个用于构建python web项目镜像的dockerfile文件
java·前端·python
前端Hardy2 小时前
HTML&CSS:有趣的漂流瓶
前端·javascript·css