uniapp h5项目AI会话聊天功能的实现

        最近公司h5项目需要做一个简单的ai聊天功能，用的智普ai。实现过程是将问题发给自家后端，后端返回一个答案获取接口，前端再调用答案接口，获取流式答案，并以类似打字的方式显示到聊天窗口中。

        聊天窗口代码参考的文章1，根据自己的需求稍稍做了调整；流式数据获取参考的文章2，主要是用到了fecthEventSource。感谢两位大神！

        AI接口文档地址：Docs

参考文章：

1、前端对接AI模型接口 实现ChatGPT流式数据并【实现打字效果】和【终止会话】_event:conversation.message.delta-CSDN博客

2、基于uniapp开发的智能客服（接入api，附完整代码）_uni-app 智能客服-CSDN博客 

         上代码：

	
		
			
				
				
			
			
				
				
					
						
						{item.time}} -->
						
							
						
					
					
						{item.time}} -->
						
							{{item.content}}
						
					
				
			
			
				
				
				
					
						发 送
					
				
			
		
	


	// 自家后端的接口,发送问题,返回ai答案获取接口
	import {
		getSign
	} from '@/api/aiChat/aiChat.js';
	// 安装fetch-event-source后引入，通过fetch-event-source获取流式答案数据
	import {
		fetchEventSource
	} from '@microsoft/fetch-event-source'
	
	export default {
		name: "onlineCustomer",
		components: {},
		computed: {},
		data() {
			return {
				userId: null,
				customerText: "",
				isShow: true,
				Sending: true,
				getHistoryId: "",
				info: [{
					type: "leftinfo",
					time: this.getTodayTime(),
					name: "robot",
					content: "你好，这里是智能匹配",
					question: [],
				}, ],
				timer: null,
				keyboardHeight: 0,
			};
		},
		created() {
			this.showTimer();
		},
		onLoad() {
			this.GetRequest();
		},
		mounted() {
			window.addEventListener('resize', this.handleResize);
		},
		beforeDestroy() {
			uni.offKeyboardHeightChange();
			window.removeEventListener('resize', this.handleResize);
		},
		watch: {
			keyboardHeight(newHeight) {
				this.onKeyboardShow(300);
				if (newHeight > 0) {
					// this.onKeyboardShow(230);
				} else {
					this.onKeyboardHide();
				}
			}
		},
		methods: {
			///换行符、加粗符更换为适配html
			formatContent(content) {
				// 处理换行符
				let formattedContent = content.replace(/\n/g, '
');
				// 处理加粗
				formattedContent = formattedContent.replace(/\*\*(.*?)\*\*/g, '$1');
				return formattedContent;
			},
			handleResize() {
				this.keyboardHeight = 0; // 重置键盘高度
			},
			onKeyboardShow(height) {
				this.$nextTick(() => {
					const content = document.getElementById('content');
					content.style.paddingBottom = `${height}rpx`;
					content.scrollTop = content.scrollHeight;
				});
			},
			onKeyboardHide() {
				this.$nextTick(() => {
					const content = document.getElementById('content');
					content.style.paddingBottom = '0px';
				});
			},
			scrollToView() {
				this.$nextTick(() => {
					document.getElementById('text').scrollIntoView({
						behavior: 'smooth',
						block: 'center'
					});
				});
			},
			//获取历史数据
			getHistory() {
				var getHistory = uni.getStorageSync(this.getHistoryId);
				if (!getHistory) {
					uni.showToast({
						title: '暂无历史记录', 
						icon: 'none',
						duration: 2000
					});
					return;
				}
				console.log('获取历史数据');
				this.info = [];
				console.log(getHistory);
				var i = 0;
				for (i; i  {
						var contentHeight = document.getElementById("content");
						contentHeight.scrollTop = contentHeight.scrollHeight;
					});
				}
			},
			// 机器人回答消息
			async appendRobotMsg(text) {
				clearTimeout(this.timer);
				this.showTimer();
				text = text.trim();
				
				// 获取ai答案接口
				var data = {
					question: text
				}
				const answerUrl = await getSign(data)
				
				let obj2 = {
					type: "leftinfo",
					time: this.getTodayTime(),
					name: "robot",
					content: '正在输入中...',
					question: [],
				};
				
				this.info.push(obj2);
				this.$nextTick(() => {			//滚动聊天到底部
				  var contentHeight = document.getElementById("content");
				  contentHeight.scrollTop = contentHeight.scrollHeight;
				});
				let abortController = new AbortController()
				
				// 存获取到的流式数据中要显示的内容
				let answerArr = []
				
				const that = this
				fetchEventSource(answerUrl, {
					method: 'post',
					headers: {
						Accept: 'text/event-stream',
						Authorization: 'Bearer ' // 智谱AI的key，后端提供
					},
					signal: abortController.signal,
					async onopen(response) {
						//建立连接的回调
						console.log('建立连接的回调')
					},
					onmessage(msg) {
						// console.log("流式数据", msg);
						//接收一次数据段时回调，因为是流式返回，所以这个回调会被调用多次
						if (msg.event == 'add' && JSON.parse(msg.data).msg) {
							//进行连接正常的操作
							try {
								const dataObj = JSON.parse(msg.data).msg
								
								// 存获取到的流式数据中要显示的内容
								answerArr.push(dataObj)
								
							} catch (e) {}
						}
					},
					onclose() {
						// 流式数据获取结束后的操作
						
						// that.info[that.info.length - 1].content = answerArr.join('')
						
						// 将获取到的流式数据要显示的内容以类似打字的方式展示到聊天窗口中
						let index = 0;
						let combinedString = '';
						const intervalId = setInterval(() => {
						  // 检查是否还有未处理的数组项
						  if (index  { //滚动聊天到底部
								var contentHeight = document.getElementById("content");
								contentHeight.scrollTop = contentHeight.scrollHeight;
							});
						    index++;
						  } else {
                              // 答案都显示后，才能再次提问
							  that.Sending = true;
						    // 如果所有项都已处理完毕，清除定时器
						    clearInterval(intervalId);
						  }
						}, 200);
						
						that.$nextTick(() => { //滚动聊天到底部
							var contentHeight = document.getElementById("content");
							contentHeight.scrollTop = contentHeight.scrollHeight;
						});
					},
					onerror(err) {
						//连接出现异常回调
						// 取消请求
						throw err
					}
				})
			},
			saveChatRecord(newChatRecord) {
				// 获取当前存储的聊天记录列表，如果不存在则初始化为空数组
				let chatRecords = uni.getStorageSync(this.getHistoryId);
				// 如果不存在，则初始化为空数组
				if (!Array.isArray(chatRecords)) {
					chatRecords = [];
				}
				// 将新的聊天记录对象追加到聊天记录列表中
				chatRecords.push(newChatRecord);
				// 将更新后的聊天记录列表保存回本地存储
				uni.setStorageSync(this.getHistoryId, chatRecords);
			},
			// 结束语
			endMsg() {
				let happyEnding = {
					type: "leftinfo",
					time: this.getTodayTime(),
					content: "感谢您使用智能匹配，祝您生活愉快",
					question: [],
				};
				this.info.push(happyEnding);
				this.$nextTick(() => {
					var contentHeight = document.getElementById("content");
					contentHeight.scrollTop = contentHeight.scrollHeight;
				});
			},
			showTimer() {
				// this.timer = setTimeout(this.endMsg, 1000 * 180);
			},
			getTodayTime() {
				// 获取当前时间
				var day = new Date();
				let seconds = day.getSeconds();
				if (seconds