uni.socket流式打字效果

创建websocket链接，发送链接请求

uni.onSocketOpen函数监听是否链接成功这里调用了发送心跳机制，一会儿有讲到。

uni.onSocketMessage为监听收到的信息，res为接受到返回的参数

uni.onSocketClose为监听链接关闭

createSocket: function() {
				// 创建 WebSocket 连接
				try {
					let that = this
					uni.connectSocket({
						url: `${host}/open/chat/ask`,
						header: {
							'content-type': 'application/json',
							'Access-Control-Allow-Credentials': true,
							'Access-Control-Allow-Origin': '*'
						},
						success: data => {
							console.log('socket 连接成功', data.errMsg);
							that.socketClose = 1;
						},
						fail: data => {
							console.error('socket 连接失败', data);
						},
					});
					uni.onSocketOpen(function(err) {
						that.socketClose = 2;
						//发送心跳
						that.startHeartbeat();
						console.log('链接成功', that.socketClose)
					});
					// 监听收到信息
					uni.onSocketMessage(function(res) {
						console.log(res.data,'onSocketMessage')
						// if(!that.desitory) return
						//与后端规定好返回值分别代表什么，写业务逻辑
						let serverData = JSON.parse(res.data) //这是字符串，如果要对象记得转换一下
						if (serverData.response.split("\n").length > 1) {
							// that.sleep(5)
							console.log(serverData.response, 'serverData.response')
							that.chatList.push({
								isself: false,
								msg: serverData.response
							})

						} else {
							if (serverData.doc != null) {
								that.isLoading = false
								return
							}
							that.chatList[that.chatList.length - 1].msg += serverData.response
						}

						// console.log(that.chatList, 'that.chatList')
						that.setScroll()
						that.session = serverData.session
					});
					uni.onSocketClose(function(res) {
						that.socketClose = 3;
						that.desitory = true
					})
				} catch (error) {
					console.log('err:' + error)
				}
			},

向websocket发送请求

这里就是向服务器发送消息，uni.sendSocketMessage这个方法里面发了消息，那么在上图的

uni.onSocketMessage()这个方法里面就可以获取到服务器返回的数据了

		sendMessage: function() {
				let datas = JSON.stringify({
					"prompt": `${this.inputText}`,
					"session": this.session,
					"name": uni.getStorageSync('user_name')
				})
				uni.sendSocketMessage({
					data: datas
				})
				this.inputText = "";
				this.isLoading = true
				this.chatList.push({
					isself: false,
					msg: ''
				})
			},

websocket重连机制

通过定时器去调用，通过定时器循环调用进行重连，目的是为了网络波动使得websocket断开链接，这里重新调用that.createSocket()函数，并且通过判断语句来监听是否链接成功，如果链接成功则清除定时器

	//定时调用
			interval() {
				let that = this
				  //coket断开开始重新链接
				that.isCron = setInterval(function() {
					if (that.socketClose !== 2 && that.desitory) {
						console.log('setInterval', that.socketClose, that.desitory)
						if (that.socketClose === 1) {
							uni.closeSocket();
						}
						that.createSocket()
						 clearTimeout(this.socketTimer);
						that.show = true
					} else {
						that.show = false
					}
				}, 3000);
			},

websocket心跳机制

心跳机制目的是websocket是一个长链接，如果长时间或者几分钟不进行链接，那么websocket会自动进行断开，虽然上面的重连机制会重新链接，但是重连的时候会弹窗，这样对用户的体验性就不好，所以我们利用定时器每个20秒向服务器发送一条消息，这里和后端商量好发送这条固定的消息服务器不返回东西就可以了。

  // 发送心跳包
			        startHeartbeat () {
			            // HeartBeat 这里是和后端约定好的值，我们发送给后端，后端再把这个值返给我们
			            // 目的就是让后端知道我们一直在    
			            const sendHeartbeat = () => {
			                if (this.socketClose===2) {
								const heartbeatMsg = JSON.stringify({
									cmd:'HeartBeat'
								})
			                    uni.sendSocketMessage({
			                        data: heartbeatMsg,
			                    }).catch(error => {
			                        console.log('发送心跳消息失败:', error);
			                    });
			                }
			            };
			            this.socketTimer = setInterval(sendHeartbeat, 20000);
			        },

接下来是时间节点也就是生命周期

我们在创建组件时的生命周期和销毁组件这两个生命周期里面调用this.createSocket()建立socket链接，this.interval()和重连机制

在uni.onSocketMessage()监听到链接成功的时候发送心跳机制

友情提示记得用that哟，因为在uni的这些api里面使用this去调用自身定义的属性或方法this指向会不正确的