vue项目中websocket封装方法的使用
这套代码目前个人在项目中已使用,大家可以直接拿去使用,相关注意点已在代码中注释,方便大家阅读。
核心代码:
//这里需要引入vuex import store from './store'; let wsConnection = { $ws: null, lockReturn: false, timeout: 60 * 1000 * 5, timeoutObj: null, timeoutNum: null, serverTimeoutObj: null, //初始化webSocket长连接 initWebSocket: function () { let corpId = localStorage.getItem('corpId'); let name = localStorage.getItem('username'); this.$ws = new WebSocket(wsurl);//写入地址 这里的地址可以在initWebSocket方法加入参数 this.$ws.onopen = this.wsOpen; this.$ws.onclose = this.wsClose; this.$ws.onmessage = this.wsMsg; this.$ws.onerror = this.wsError; }, //打开websocket wsOpen: function (e) { //开始websocket心跳 wsConnection.startWsHeartbeat(); console.log('ws success') }, wsClose: function (e) { console.log(e, 'ws close') }, wsMsg: function (msg) { //每次接收到服务端消息后 重置websocket心跳 wsConnection.resetHeartbeat(); //服务端发送来的消息存到vuex store.commit('web_socket_msg', msg) }, wsError: function (err) { console.log(err, 'ws error'); wsConnection.reconnect() }, //重启websocket reconnect: function () { let _this = this; if (_this.lockReturn) { return; } _this.lockReturn = true; _this.timeoutNum && clearTimeout(_this.timeoutNum); _this.timeoutNum = setTimeout(function () { _this.initWebSocket(); _this.lockReturn = false; }, 3000); }, startWsHeartbeat: function () { let _this = this; _this.timeoutObj && clearTimeout(_this.timeoutObj); _this.serverTimeoutObj && clearTimeout(_this.serverTimeoutObj); _this.timeoutObj = setInterval(function () { //判断websocket当前状态 if (_this.$ws.readyState != 1) { _this.reconnect() } }, _this.timeout); }, //重置websocket心跳 resetHeartbeat: function () { let _this = this; clearTimeout(_this.timeoutObj); clearTimeout(_this.serverTimeoutObj); _this.startWsHeartbeat() } }; //抛出websocket对象 export default wsConnection
websocket方法调用
//在main.js引入 import wsConnection from './vuex/wsStore' //挂载vue原型链 Vue.prototype.$setWs = wsConnection; //在使用地方调用 $this.$setWs.initWebSocket(); //在需要使用服务端推送过来的消息时 //在computed方法声明 getWsMsg() { //在核心代码接收到的服务端信息存储到vuex的属性 return this.$store.state.webSocketMsg } //在watch方法 监听 getWsMsg getWsMsg: function (data, val) { console.log(data); //....... }
以上就是关于在vue项目中封装websocket使用方法的全部代码。
1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » vue项目中websocket封装方法的使用
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » vue项目中websocket封装方法的使用