xiangmu--
作者：互联网
## 课堂笔记
### 一、问题列表做了缓存处理后，如何让从首页进去的问题列表取消之前的缓存？ ```javascript beforeRouteLeave(to,from,next){ // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `this` console.log(to) if(to.name!=='myQuestionDetail') { this.searchQAData= { curPage:0, questionTypeId:1, question:'' }; this.getQuestionList(); } next(); },
beforeRouteUpdate(to, from, next){ next(); } ```
### 二、交流数字的实时更新
#### 2.1 通过在store里添加 chatBadgeNum来记录底栏交流数字 * 添加函数名为UpdateChatBadge的相关mutations和 actions方法 * 在 src/components/tabBar 通过辅助函数mapState获取到 状态值 chatBadgeNum ...mapState(['chatBadgeNum'])
#### 2.2 通过webscoket建立ws服务，握手成功以后就可以保持通信
在src/common/webSocket.js对文件进行封装
注意： window.socketServer 用来存储websocket对象实例
功能包括：
1. 建立websocket服务，保持通信 2. 异常重连ws 3. 心跳检测 ```javascript //心跳检测 var heartCheck = { timeout: 3000, //每隔三秒发送心跳 num: 3, //3次心跳均未响应重连 timeoutObj: null, reset: function(){//接收成功一次推送，就将心跳检测的倒计时重置为30秒 clearTimeout(this.timeoutObj);//重置倒计时 this.start(); }, start: function(){//启动心跳检测机制，设置倒计时30秒一次 this.timeoutObj = setTimeout(function(){ //这里发送一个心跳，后端收到后，返回一个心跳消息， //onmessage拿到返回的心跳就说明连接正常 var userId = localStorage.getItem('userId'); if(!userId){ return; } window.socketServer.send(JSON.stringify({ photographerObjectId:'', type:'6', leavingContent:'', photographerId:userId //留言摄影师编号 })); //给后端发送信息 },this.timeout) } //onopen连接上，就开始start及时，如果在定时时间范围内，onmessage获取到了服务端消息， //就重置reset倒计时，距离上次从后端获取消息30秒后，执行心跳检测，看是不是断了。 }
/**建立连接 */ function createWSConnect(path){ var _store = this; try { if (typeof WebSocket === "undefined") { alert("您的浏览器不支持socket"); return; } return new Promise((resolve,reject)=>{ // 实例化socket var socket = new WebSocket(path); // 监听socket连接 socket.onopen = function(){ console.log("socket连接成功，握手成功!!!"); // _store.dispatch('updateSocket',socket); window.socketServer = socket; resolve(socket); //心跳检测启动 heartCheck.start(); //订阅业务发送之后启动心跳检测 }; socket.onclose = function (e) { console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean) console.log(e); reconnect(path); }
// 监听socket错误信息 socket.onerror = function(){ socket.close(); reject(); console.log("wesocket连接错误"); reconnect(path); }; //监听socket消息 //如果获取到消息，心跳检测重置 //拿到任何消息都说明当前连接是正常的 socket.onmessage = function(res){ //心跳检测重置 var data = res.data; if(data==1) { //接收一次后台推送的消息，即进行一次心跳检测重置 heartCheck.reset(); } else { data = JSON.parse(res.data); updateMsgForType.call(_store,data); } }; }) } catch(e) { reconnect(path); } }
//重新建立链接 reconnect.lockReconnect = false;//避免重复连接 reconnect.timer = ''; function reconnect(url) { if (reconnect.lockReconnect) return; reconnect.lockReconnect = true;
reconnect.timer && clearTimeout(reconnect.timer); //没连接上会一直重连，设置延迟避免请求过多 reconnect.timer = setTimeout(function () { createWSConnect(url); reconnect.lockReconnect = false; }, 4000); }
function updateMsgForType(data){ if(data.error){ $toast.show(data.error, 4000); return; } this.dispatch('UpdateChatBadge',{count:data.count}) switch(data.type){ case '0': // 0 一对一交流文字 this.dispatch('communication/addOneToOne',data.siteComm) break; case '1': //1 一对一交流图片 this.dispatch('communication/addOneToOne',data.siteComm) break; case '2': //2 未读总条数 break; case '3': //撤回被删除的信息 this.dispatch('communication/withdrawOneToOne',{count:data.siteComm})
break; case '4': //单条代表删除一对一信息 this.dispatch('communication/delOneToOne',data.siteComm) break; case '5': //批量删除一对一信息 this.dispatch('communication/delAllOneToOne',data.siteComm) break; } } export default createWSConnect;
```
#### 2.3 在工具函数里封装好发送的函数
```javascript websocktSend(paramsObj){ //这个是用来向后端websocket发送信息，发送之前需要先判断是否还处理链接状态 var userId = localStorage.getItem('userId'); var sendMsg = ()=>{ window.socketServer.send(JSON.stringify(paramsObj)); //给后端发送信息 } if(window.socketServer.readyState==1){ sendMsg(); } else { // 这里的this是$store,传递进来的 webSocket.call(this,wsconPath[sceneParam]+userId).then(()=>{ sendMsg(); }); } },
``` #### 2.4 在工具函数统一设置发送的逻辑
如果已经链接 就直接发送数据，如果检测ws已经断开，需要每次重新链接webscoket服务
common/utils/utils.js ```javascript import webSocket from 'common/webSocket.js'; ....
websocktSend(paramsObj){ //这个是用来向后端websocket发送信息，发送之前需要先判断是否还处理链接状态 var userId = localStorage.getItem('userId'); var sendMsg = ()=>{ window.socketServer.send(JSON.stringify(paramsObj)); //给后端发送信息 } if(window.socketServer.readyState==1){ sendMsg(); } else { // 这里的this是$store,传递进来的 webSocket.call(this,wsconPath[sceneParam]+userId).then(()=>{ sendMsg(); }); } },
``` #### 2.5 在首页建立与ws的服务 import utils from "common/utils/utils.js";
注意这里 我需要把store对象作为作用域传递进去
//登陆成功以后就与后端websocket链接服务器链接
utils.websocktSend.call(this.$store,{ photographerObjectId:'', type:'2', leavingContent:'', photographerId:this.userId //留言摄影师编号 });
### 一、问题列表做了缓存处理后，如何让从首页进去的问题列表取消之前的缓存？ ```javascript beforeRouteLeave(to,from,next){ // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `this` console.log(to) if(to.name!=='myQuestionDetail') { this.searchQAData= { curPage:0, questionTypeId:1, question:'' }; this.getQuestionList(); } next(); },
beforeRouteUpdate(to, from, next){ next(); } ```
### 二、交流数字的实时更新
#### 2.1 通过在store里添加 chatBadgeNum来记录底栏交流数字 * 添加函数名为UpdateChatBadge的相关mutations和 actions方法 * 在 src/components/tabBar 通过辅助函数mapState获取到 状态值 chatBadgeNum ...mapState(['chatBadgeNum'])
#### 2.2 通过webscoket建立ws服务，握手成功以后就可以保持通信
在src/common/webSocket.js对文件进行封装
注意： window.socketServer 用来存储websocket对象实例
功能包括：
1. 建立websocket服务，保持通信 2. 异常重连ws 3. 心跳检测 ```javascript //心跳检测 var heartCheck = { timeout: 3000, //每隔三秒发送心跳 num: 3, //3次心跳均未响应重连 timeoutObj: null, reset: function(){//接收成功一次推送，就将心跳检测的倒计时重置为30秒 clearTimeout(this.timeoutObj);//重置倒计时 this.start(); }, start: function(){//启动心跳检测机制，设置倒计时30秒一次 this.timeoutObj = setTimeout(function(){ //这里发送一个心跳，后端收到后，返回一个心跳消息， //onmessage拿到返回的心跳就说明连接正常 var userId = localStorage.getItem('userId'); if(!userId){ return; } window.socketServer.send(JSON.stringify({ photographerObjectId:'', type:'6', leavingContent:'', photographerId:userId //留言摄影师编号 })); //给后端发送信息 },this.timeout) } //onopen连接上，就开始start及时，如果在定时时间范围内，onmessage获取到了服务端消息， //就重置reset倒计时，距离上次从后端获取消息30秒后，执行心跳检测，看是不是断了。 }
/**建立连接 */ function createWSConnect(path){ var _store = this; try { if (typeof WebSocket === "undefined") { alert("您的浏览器不支持socket"); return; } return new Promise((resolve,reject)=>{ // 实例化socket var socket = new WebSocket(path); // 监听socket连接 socket.onopen = function(){ console.log("socket连接成功，握手成功!!!"); // _store.dispatch('updateSocket',socket); window.socketServer = socket; resolve(socket); //心跳检测启动 heartCheck.start(); //订阅业务发送之后启动心跳检测 }; socket.onclose = function (e) { console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean) console.log(e); reconnect(path); }
// 监听socket错误信息 socket.onerror = function(){ socket.close(); reject(); console.log("wesocket连接错误"); reconnect(path); }; //监听socket消息 //如果获取到消息，心跳检测重置 //拿到任何消息都说明当前连接是正常的 socket.onmessage = function(res){ //心跳检测重置 var data = res.data; if(data==1) { //接收一次后台推送的消息，即进行一次心跳检测重置 heartCheck.reset(); } else { data = JSON.parse(res.data); updateMsgForType.call(_store,data); } }; }) } catch(e) { reconnect(path); } }
//重新建立链接 reconnect.lockReconnect = false;//避免重复连接 reconnect.timer = ''; function reconnect(url) { if (reconnect.lockReconnect) return; reconnect.lockReconnect = true;
reconnect.timer && clearTimeout(reconnect.timer); //没连接上会一直重连，设置延迟避免请求过多 reconnect.timer = setTimeout(function () { createWSConnect(url); reconnect.lockReconnect = false; }, 4000); }
function updateMsgForType(data){ if(data.error){ $toast.show(data.error, 4000); return; } this.dispatch('UpdateChatBadge',{count:data.count}) switch(data.type){ case '0': // 0 一对一交流文字 this.dispatch('communication/addOneToOne',data.siteComm) break; case '1': //1 一对一交流图片 this.dispatch('communication/addOneToOne',data.siteComm) break; case '2': //2 未读总条数 break; case '3': //撤回被删除的信息 this.dispatch('communication/withdrawOneToOne',{count:data.siteComm})
break; case '4': //单条代表删除一对一信息 this.dispatch('communication/delOneToOne',data.siteComm) break; case '5': //批量删除一对一信息 this.dispatch('communication/delAllOneToOne',data.siteComm) break; } } export default createWSConnect;
```
#### 2.3 在工具函数里封装好发送的函数
```javascript websocktSend(paramsObj){ //这个是用来向后端websocket发送信息，发送之前需要先判断是否还处理链接状态 var userId = localStorage.getItem('userId'); var sendMsg = ()=>{ window.socketServer.send(JSON.stringify(paramsObj)); //给后端发送信息 } if(window.socketServer.readyState==1){ sendMsg(); } else { // 这里的this是$store,传递进来的 webSocket.call(this,wsconPath[sceneParam]+userId).then(()=>{ sendMsg(); }); } },
``` #### 2.4 在工具函数统一设置发送的逻辑
如果已经链接 就直接发送数据，如果检测ws已经断开，需要每次重新链接webscoket服务
common/utils/utils.js ```javascript import webSocket from 'common/webSocket.js'; ....
websocktSend(paramsObj){ //这个是用来向后端websocket发送信息，发送之前需要先判断是否还处理链接状态 var userId = localStorage.getItem('userId'); var sendMsg = ()=>{ window.socketServer.send(JSON.stringify(paramsObj)); //给后端发送信息 } if(window.socketServer.readyState==1){ sendMsg(); } else { // 这里的this是$store,传递进来的 webSocket.call(this,wsconPath[sceneParam]+userId).then(()=>{ sendMsg(); }); } },
``` #### 2.5 在首页建立与ws的服务 import utils from "common/utils/utils.js";
注意这里 我需要把store对象作为作用域传递进去
//登陆成功以后就与后端websocket链接服务器链接
utils.websocktSend.call(this.$store,{ photographerObjectId:'', type:'2', leavingContent:'', photographerId:this.userId //留言摄影师编号 });
标签：function,xiangmu,socket,userId,reconnect,心跳,data 来源： https://www.cnblogs.com/laneyfu/p/12526721.html