心跳

pc_chat/src/components/chat.vue

@@ -448,8 +448,8 @@
 				userConversation: {}, //用户当前会话
 				machineAndAtl: 10, //默认为机器人，100为人工
 				satisfaction: 1, //评价满意度,1为满意，2为一般，3为不满意
-				// url: 'http://kfadmin.bocai186.com', // 域名地址
-				url :'http://192.168.2.186:8090', // 域名地址
+				url: 'http://kfadmin.bocai186.com', // 域名地址
+				//url :'http://192.168.2.186:8090', // 域名地址
 				user_info: '', // 用户信息
 				// 人工客服信息
 				service: '',
@@ -477,6 +477,13 @@
 				willOverTime: '', //超时关闭会话
 				allLoading: true, //整个页面加载中
 				webTime: '',//网络时间
+				/*****************websockt心跳变量*******************/
+				reconnectData:null,
+				lockReconnect:false,    //避免重复连接，因为onerror之后会立即触发 onclose
+				timeout:10000,          //10s一次心跳检测
+				timeoutObj:null,
+				serverTimeoutObj:null,
+				apiToken:''
 			}
 		},
 		methods: {
@@ -562,7 +569,7 @@
 
 			/***************传输成功之后返回图片*************** */
 			handleAvatarSuccess(res, file) {
-				console.log(res)
+				// console.log(res)
 				this.dialogUrl = true;
 				this.img = res.data.src;
 				this.sendMessage();
@@ -593,7 +600,9 @@
 				this.machineAndAtl = 10;
 				this.macNotPro = false;
 				this.jumpArtl = false;
-				this.automaticRolling();
+				this.time = '';
+				this.returnTimer = '';
+				// this.automaticRolling();
 				this.initWebSocket();
 				this.chatCont =[];
 				this.customerSviceChat =[];
@@ -758,20 +767,6 @@
 					this.sensitiveNumber++;
 					return str;
 				})
-				//console.log(this.senInfo);
-				// let params = {
-				//   'type' : 1,
-				//   'conversationId' : this.service.conversationId,
-				//   'number' : num
-				// }
-				// this.$axios.get('/api/index/alarm/sensitiveAlarm',{params,
-				//   headers:{
-				//     'Content-Type' :'application/x-www-form-urlencoded',
-				//     'apiToken' : this.setApiToken('sensitivealarm','alarm',this.currTime,'index')
-				//   }
-				// }).then(res =>{
-
-				// })
 			},
 
 			/*---------------------------------------------------------------------------------*/
@@ -779,8 +774,8 @@
 			initWebSocket() {
 				let _this = this;
 				let apiToken = this.$md5.hex_md5('customer-service' + this.currTime + window.location.origin);
-				// this.websock = new WebSocket('ws://103.108.43.176:9101?apiToken=' + apiToken);
-				this.websock = new WebSocket('ws://192.168.2.186:9101?apiToken=' + apiToken);
+				this.websock = new WebSocket('ws://103.108.43.176:9101?apiToken=' + apiToken);
+				//this.websock = new WebSocket('ws://192.168.2.186:9101?apiToken=' + apiToken);
 				// 数据接收
 				this.websock.onmessage = this.websocketonmessage;
 				// 连接建立之后
@@ -794,16 +789,22 @@
 			/****************连接建立成功***************/
 			websocketonopen() {
 				console.log('链接成功');
+				//心跳检测
+				this.heatBeat()
 			},
 
 			/*************连接建立失败重连***************** */
 			websocketonerror() {
-				// this.initWebSocket();
+				console.log('连接建立失败重连');
+				//重新链接
+				this.reconnect();
 			},
 
 			/**************数据接收***************** */
 			websocketonmessage(e) {
 				const redata = JSON.parse(e.data);
+				//心跳检测
+				this.heatBeat()
 				console.log(redata)
 				// 欢迎语
 				if (redata.message_type == 'helloMessage') {
@@ -812,7 +813,6 @@
 				// 广告语
 				if (redata.message_type == 'advertisement') {
 					this.advert = redata.data;
-					console.log(this.advert)
 				}
 				// 评价
 				if (redata.message_type == 'getEvaluate') {
@@ -821,20 +821,19 @@
 
 				//返回的会话时间
 				if (redata.message_type == 'webTime') {
-					this.webTime = redata.data.time;
+					//处理会话时间大于两分钟显示会话时间并且储存本次会话时间
 					if (this.machineAndAtl == 100) {
 						let num = this.customerSviceChat.length - 1;
 						if (this.customerSviceChat[num].type == "user") {
-							this.$set(this.customerSviceChat[num], 'time', redata.data.time);
-						}
-					} else if (this.machineAndAtl == 10) {
-						let num = this.chatCont.length - 1;
-						if (this.chatCont[num].type == "user") {
-							this.$set(this.chatCont[num], 'time', redata.data.time);
+							if(redata.data.webTime.split(":")[1] - this.webTime.split(":")[1] > 2){
+								this.$set(this.customerSviceChat[num],'time', redata.data.webTime);
+								this.webTime = redata.data.webTime;
+							}else{
+								this.$set(this.customerSviceChat[num],'time', '');
+							}
 						}
-					}
-
-					console.log(redata.data);
+					} 
+					
 				}
 
 				//会话超时提示
@@ -920,8 +919,9 @@
 				}
 				// 客服关闭会话.
 				if (redata.message_type == 'closeBysever') {
-					this.closeByServer = true;
-					this.automaticRolling();
+					this.goBack();
+					// this.closeByServer = true;
+					// this.automaticRolling();
 				}
 				// 客服掉线.
 				if (redata.message_type == 'serviceoffline') {
@@ -937,34 +937,55 @@
 			},
 
 
-			/************关闭会话****************** */
+			/************关闭会话*******************/
 			websocketonclose(e) {
 				console.log('断开会话', e);
+				this.reconnect()
 			},
 
+			/*************数据发送***************** */
+			websocketsend(data) {
+				this.websock.send(data);
+			},
 
-			/******************消息发送数据处理********************/
-			sendMessage() {
-				// this.doubSensitive = [];
-
-				this.senType = '';
 
-				//发送消息时间获取服务器时间
-				let currentdate = '';
-				if (this.timerVote != '') {
-					currentdate = this.newTimer();
-				} else {
-					let date = new Date();
-					let curtDate = date.getHours() * 60 + date.getMinutes()
-					this.timerVote = curtDate;
-					currentdate = '';
+			/***************************************/
+			//socket重连
+			reconnect(){
+				if(this.lockReconnect){       //这里很关键，因为连接失败之后之后会相继触发 连接关闭，不然会连接上两个 WebSocket
+					return
 				}
+				this.lockReconnect = true;
+				this.reconnectData && clearTimeout(this.reconnectData);
+				this.reconnectData = setTimeout(()=>{
 
+					this.initWebSocket();
+					this.lockReconnect = false;
+				},5000)
+			},  
+
+			/*************************************/
+			//心跳检测
+			heatBeat(){
+				this.timeoutObj && clearTimeout(this.timeoutObj);
+				this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
+				this.timeoutObj = setTimeout(()=>{
+					console.log('发送',{type:'ping'});
+					this.websocketsend(JSON.stringify({type:'ping'}))   //根据后台要求发送
+					this.serverTimeoutObj = setTimeout(()=> {
+						this.websock.close(); //如果  5秒之后我们没有收到 后台返回的心跳检测数据 断开socket，断开后会启动重连机制
+					}, 5000);
+				}, this.timeout)
+			},  
+
+
+			/******************消息发送数据处理********************/
+			sendMessage() {
 				// 给机器人发送文本消息
 				if (this.machineAndAtl == 10) {
 					//给机器人发送文本消息-本地储存
 					let datas = {
-						time: currentdate,
+						time: '',
 						chat: this.turnFace(this.shieldingKeyword(this.information)),
 						imgUrl: this.img,
 						type: 'user'
@@ -983,12 +1004,11 @@
 				} else if (this.machineAndAtl == 100) { //人工聊天
 					//发送给客服消息-本地储存
 					this.customerSviceChat.push({
-						time: currentdate,
+						time: '',
 						content: this.turnFace(this.shieldingKeyword(this.information)),
 						imgUrl: this.img,
 						type: 'user',
 					});
-					console.log(this.customerSviceChat);
 
 					//消息发送-客服
 					this.websocketsend(JSON.stringify({
@@ -1017,27 +1037,6 @@
 				this.automaticRolling();
 			},
 
-			/**************获取会话间隔是否大于2分钟**************** */
-			newTimer() {
-				//console.log('house',this.hourse)
-				this.timerVote = this.curtTimer;
-				let currentdate = this.hourse;
-				this.curtTimer = this.hourse;
-				if (this.timerVote != '') {
-					let timeDiffence = this.curtTimer - this.timerVote;
-					if (timeDiffence < 2) {
-						currentdate = ''
-					}
-				}
-				return currentdate;
-			},
-
-			/*************数据发送***************** */
-			websocketsend(data) {
-				this.websock.send(data);
-			},
-
-
 			/*************设置token加密***************** */
 			setApiToken(name, controller, time, modules) {
 				return this.$md5.hex_md5(name + 'customer-service' + controller + time + modules)
@@ -1388,7 +1387,7 @@
 		position: absolute;
 		content: "";
 		display: inline-block;
-		right: -3px;
+		right: -2px;
 		top: 6px;
 		width: 5px;
 		height: 9px;