vue中运用websocket

需求:因为需要实时接收后台的消息,这次项目中用到websocket

一、websocket.js的封装,主要的步骤如下,大家可以根据自己的需求进行改(因为我这里需要接收到后台的消息后对某些vue组件进行央视改变,但是这个项目没有用vuex状态管理,所以接收消息的步骤我放到了组件里,同时在main.js里进行了全局的设置,具体的我们继续往下看)

/**
 * websockect通信
 * 调用
 * import {SocketMgr} from '../websocket';
 * SocketMgr.connect();
 * **/



let  socket = null;
let setIntervalWesocketPush = null;
let setTimeWesocket = null;
let isHaxWs = false;//避免连上多个ws
let SocketMgr = {
  ws:{},
  setWs:function(newWs){
    this.ws = newWs
  },
  connect:function() {
    let that = this;
    if ('WebSocket' in window) {
    socket = new WebSocket(WSS_URL);
    this.setWs(socket);
    /**打开WS之后发送心跳 */
    socket.onopen = function(){
      const json ={//参数需要和后台进行协商
        'user_id': window.config.user_info.user_id
        'session_id': window.config.user_info.sessionid
        'guosen':1
      }
      socket.send(JSON.stringify(json));
    }

    socket.onclose = function(e){
      console.log('websocket已断开*************************',e)
      that.reConnect()
    }
    socket.onerror = function (e) {
      console.log('连接失败',e);
      that.reConnect()
    };

    }
    else{
      this.$message('当前浏览器 Not support websocket');
    }
  },

  //重连
  reConnect:function(e){
    if (isHaxWs)return;
    clearInterval(setIntervalWesocketPush)
    clearTimeout(setTimeWesocket)
    isHaxWs = true
    setTimeWesocket = setTimeout(()=>{
      this.connect()
      isHaxWs = false;
    },2000)//重连
  },

}

export default SocketMgr;

 

二、main.js变为全局变量

import SocketMgr from './service/websocket'//引入
Vue.prototype.globalWs = SocketMgr;

 

三、组件里使用(这是父组件,子组件有数据变化,可以传值给付父组件,父组件进行更新),组件里创建之前就获取消息,然后把消息给当前组件得wsData,然后watch监听这个值得变化,进行逻辑处理

created() {
  let that = this;
  this.globalWs.ws.onmessage = function(e) {
    let data = JSON.parse(e.data);
    console.log('学生接受ws数据~~~~~~~~~~~~~~~~~~~~~e/data',e,data)
    that.globalWs.msgData = data;
    that.wsData = data
  };
},
//监听值变化
watch:{
  /**
   * {info: {content: "2019-12-24 17:30:34 张学生老师已将您踢出王老师的班级班级", badge: 20//未读消息数量},
          type: "guosen"}
   * **/
  wsData(val,oldVal){//data处设置的一个参数,用于存放ws推送的消息
    if (val.type=='guosen'){
      this.msgCount = val.info.badge;
    }
  },
},

 自此,vue里使用ws就可以成功连上了,ws后台设置不知,这个可能也和后台设置有关系

发布了57 篇原创文章 · 获赞 11 · 访问量 8万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览