update

service/src/src/App.vue

@@ -0,0 +1,287 @@
+<template>
+  <div id="app">
+    <transition name='fade' mode="out-in">
+      <router-view/>
+    </transition>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+export default {
+  name: 'App',
+  // apiToken:'',//WebSocket链接凭证
+  // time:'',
+  data(){
+    return{
+      reconnectData:null,
+      lockReconnect:false,    //避免重复连接，因为onerror之后会立即触发 onclose
+      timeout:10000,          //10s一次心跳检测
+      timeoutObj:null,
+      serverTimeoutObj:null,
+      apiToken:'',
+      linkfailure:true,
+
+    }
+  },
+  methods:{
+    /**************************************/
+    //初始化weosocket
+    initWebSocket(apiToken) {
+      // 书写接口信息
+      const wsuri = "ws://103.108.43.176:9101?apiToken=" + apiToken;//www.service.com 线上
+      //const wsuri = "ws://192.168.2.186:9101?apiToken=" + apiToken;//www.service.com //192.168.2.186 本地
+      // 创建websocket实例
+      Vue.prototype.$websocket = new WebSocket(wsuri);
+      this.$websocket.onopen = this.websocketonopen; //连接成功
+      this.$websocket.onmessage = this.websocketonmessage; //接收消息
+      this.$websocket.onerror = this.websocketonerror;//链接错误提示
+      this.$websocket.onclose = this.socket_close;//链接断开提示
+    },
+
+    
+    /**************************************/
+    //连接成功
+    websocketonopen() {
+      console.log('已经链接');
+      Vue.prototype.$socket_open = true;
+      this.heatBeat();
+    },
+
+    /*******************************************/  
+    //连接关闭触发
+    socket_close(e){  
+      console.log('断开连接',e);
+      //this.init()
+      this.reconnect();
+    },
+
+    /******************************************/
+    //数据接收
+    websocketonmessage(e){
+      this.heatBeat();//收到消息会刷新心跳检测，如果一直收到消息，就推迟心跳发送
+      const redata = JSON.parse(e.data);//接收数据源
+      if(redata.type != "pong"){
+        console.log(redata);
+      }
+      let  getters = this.$store.getters;
+      //获取vuex数据
+      let session = getters.get_session;//会话列表
+      let offline  = getters.get_offline;//离线列表
+      let sessionType  = getters.get_type;//选择状态(会话/离线)
+      let dataIndex  = getters.get_num;//列表下标
+      let current_session  = getters.get_current;//当前会话
+      let session_name  = getters.get_session_name;//当前用户名
+      
+      if(e.data.type == "pong" ) return
+      this.$store.dispatch("SET_SESSION_MESSAGE",JSON.parse(e.data));
+
+      	// 用户接入数据
+				if(redata.message_type == "connect"){
+					let _this  = this;
+					let arr =[
+						redata.data,
+						offline,
+						session,
+						sessionType,
+						dataIndex,
+						current_session,
+						session_name
+					]
+					_this.$public.visitorsConnect(arr,function(data){
+						//离线匹配列表访客链接回调
+            _this.$store.dispatch("SET_OFFLINE",data);
+            
+					},function(data,session,offline,type,num,dataList,name){
+						//将用户添加到会话列表中
+						session.push(data.user_info);
+						//获取接入的用户信息
+						//_this.get_user_info(list);
+						//获取接入的用户信息写入vuex
+						_this.$store.dispatch("SET_SESSION",session);//会话列表
+						_this.$store.dispatch("SET_OFFLINE",offline);//离线列表
+						_this.$store.dispatch("SET_TYPE",type);//选择类型(会话/离线)
+						_this.$store.dispatch("SET_NUM",num);//列表下标
+						_this.$store.dispatch("SET_CURRENT",dataList);//当前会话数据
+						_this.$store.dispatch("SET_SESSION_NAME",name);//当前会话对象名
+						
+					})
+				}
+				
+
+				//用户离线后会话窗口切换
+				if(redata.message_type == "userClose"){
+					let _this =this;
+					let	arr= [
+						redata.data,
+						session,
+            offline,
+						sessionType,
+						dataIndex,
+						session_name,
+						current_session,
+					]
+					_this.$public.userOffline(arr,function(session,offline,type,index,name,list,userInfo){
+            _this.$store.dispatch("SET_CURRENT",list);//当前会话数据
+						_this.$store.dispatch("SET_SESSION_NAME",name);//当前会话对象名
+						_this.$store.dispatch("SET_NUM",index);
+						_this.$store.dispatch("SET_TYPE",type);
+						_this.$store.dispatch("SET_SESSION",session);
+						_this.$store.dispatch("SET_OFFLINE",offline);
+						// _this.get_user_info(userInfo);
+					})
+				}
+
+
+				//用户会话结束窗口切换
+				if(redata.message_type == "delUser"){
+					let _this =this;
+					let	arr= [
+						redata.data,
+						session,
+            offline,
+						sessionType,
+						dataIndex,
+						session_name,
+						current_session,
+					]
+					_this.$public.sessionEnd(arr,function(session,offline,type,index,name,list,userInfo){
+            _this.$store.dispatch("SET_CURRENT",list);//当前会话数据
+						_this.$store.dispatch("SET_SESSION_NAME",name);//当前会话对象名
+						_this.$store.dispatch("SET_NUM",index);
+						_this.$store.dispatch("SET_TYPE",type);
+						_this.$store.dispatch("SET_SESSION",session);
+						_this.$store.dispatch("SET_OFFLINE",offline);
+					//	_this.get_user_info(userInfo);
+					})
+				}
+
+				//接收用户消息数据
+				if(redata.message_type == "chatMessage"){
+					let _this =this;
+					this.$public.receivesMessage(redata.data,session,this.$frce,function(data,chatList,index){
+						//判断是否是当前对话信息
+						if(dataIndex == index){
+						    // _this.data =[];
+                // _this.data = chatList.data;
+                _this.$store.dispatch("SET_CURRENT",chatList.data);//当前会话数据
+						}else{
+						    let num = Number.isInteger(chatList.num) ? chatList.num : 0;
+                // _this.$set(chatList,'num',num+1)
+                session[index].num = num+1
+						}
+						//更新会话时间
+            // _this.$set(chatList,'intime',data.time);
+            session[index].intime =data.time
+				
+						//更新会话列表中最新回复消息
+						if(data.content.text){
+              // _this.$set(chatList,'text',data.content.text)
+              session[index].text =data.content.text
+            }
+             _this.$store.dispatch("SET_SESSION",session);
+					})
+				}
+      
+        //reLoginErr
+        if(redata.message_type == "reLoginErr"){
+          console.log('haha');
+          this.init()
+        }
+
+    },   
+
+    /**************************************/
+    //连接断开，失败
+    websocketonerror(e) {
+      console.log('失败',e);
+      if(this.linkfailure){
+        this.init()
+      }
+    },
+
+    /******************************************/
+    //断开链接数据初始化
+    init(){
+      this.$store.dispatch("SET_STATEVALUE",'隐身');
+      this.$store.dispatch("SET_SESSION",[]);
+      this.$store.dispatch("SET_OFFLINE",[]);
+      this.$store.dispatch("SET_SESSION",[]);//会话列表
+			this.$store.dispatch("SET_OFFLINE",[]);//离线列表
+		  this.$store.dispatch("SET_TYPE",1);//选择类型(会话/离线)
+			this.$store.dispatch("SET_NUM",0);//列表下标
+			this.$store.dispatch("SET_CURRENT",[]);//当前会话数据
+      this.$store.dispatch("SET_SESSION_NAME",'');//当前会话对象名
+      this.$store.dispatch("SET_SESSION_MESSAGE",{});
+      this.$store.dispatch("SET_IS_INIT",false);
+      this.$token = '';
+      this.$router.push('/login')
+      this.linkfailure = true;
+      //this.reconnect();
+    },
+
+    /***************************************/
+    //socket重连
+    reconnect(){
+      if(this.lockReconnect){   //这里很关键，因为连接失败之后之后会相继触发 连接关闭，不然会连接上两个 WebSocket
+          return
+      }
+      this.lockReconnect = true;
+      this.reconnectData && clearTimeout(this.reconnectData);
+      this.reconnectData = setTimeout(()=>{
+          this.initWebSocket(this.apiToken);
+          this.lockReconnect = false;
+      },3000)
+    },  
+
+    /*************************************/
+    //心跳检测
+    heatBeat(){
+      this.timeoutObj && clearTimeout(this.timeoutObj);
+      this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
+      this.timeoutObj = setTimeout(()=>{
+        // console.log('发送',{type:'ping'});
+        this.$websocket.send(JSON.stringify({type:'ping'}))   //根据后台要求发送
+        this.serverTimeoutObj = setTimeout(()=> {
+            this.$websocket.close(); //如果  5秒之后我们没有收到 后台返回的心跳检测数据 断开socket，断开后会启动重连机制
+        }, 5000);
+      }, this.timeout)
+    }, 
+    
+    /******************************/
+    
+  },
+  mounted() {
+    // 获取系统时间
+    let t = new Date().getTime();
+    // this.get('api'+this.$ports.TIME+'?t='+t).then(res => {
+    this.get('http://kfadmin.bocai186.com'+this.$ports.TIME+'?t='+t).then(res => {
+      if (res.data.code == 1) {
+        let time = res.data.data.time.split(' ');
+        time[0] =(new Date( time[0].replace(/-/g,'/')).getTime()) /1000;
+        sessionStorage.setItem("time",JSON.stringify(time));
+        sessionStorage.setItem("logo",res.data.data.logo);
+        this.apiToken = this.$md5('customer-service'+time[0]+window.location.origin)
+        this.initWebSocket(this.apiToken);
+      }
+    });
+  },
+  destroyed() {
+    this.lockReconnect = true;
+    this.websock.close()                   //离开路由之后断开websocket连接
+    clearTimeout(this.reconnectData);      //离开清除 timeout
+    clearTimeout(this.timeoutObj);         //离开清除 timeout
+    clearTimeout(this.serverTimeoutObj);   //离开清除 timeout
+  }
+}
+</script>
+
+<style>
+  .fade-enter-active, .fade-leave-active {
+      transition: opacity .5s;
+  }
+     
+  .fade-enter, .fade-leave-to {
+    opacity: 0;
+  }
+</style>

service/src/src/api/ports.js

@@ -0,0 +1,34 @@
+export default {
+  login: '/service/Login/doLogin',
+  // 获取时间
+  TIME:'/index/index/systime',
+  // 快捷回复
+  FastReply:{
+    userWords:'/service/index/userWords',//获取快捷回复列表
+    addWords:'/service/words/addWords',//新增快捷回复
+    deleteWords:'/service/words/deleteWords',//删除快捷回复/service/words/deleteWords
+    updateWords:'/service/words/updateWords',//修改快捷语
+
+    
+  },
+  // 历史会话
+  SessionHistory:{
+    historyList:'/service/history/historyList',//历史会话列表
+  },
+
+  //图片上传
+  uploadImg:'index/upload/uploadImg',
+
+  //获取配置信息
+  minRound:'/index/evaluate/minRound',
+
+  //获取敏感词
+  sensitiveWords:'/index/index/sensitiveWords',
+
+  //用户信息 
+  userInfo:{
+    updateinfo:'/service/Services/updateinfo',
+    updatepwd:'/service/Services/updatepwd'
+  }
+  
+}