最新公告  | 
  • CTRL + D 加入收藏不迷路哦!

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

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封装方法的使用

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发