vue中运用websocket_vue websocket sessionid-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_36706903/article/details/104001051

在项目需求中，为了实现实时接收后台消息，本文详细介绍了如何在Vue中集成WebSocket。首先封装了websocket.js，接着在main.js中将其设置为全局变量。在组件中，通过监听wsData的变化来处理接收到的消息，实现数据的动态更新。虽然没有使用Vuex，但依然能有效地在组件间传递和更新数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：因为需要实时接收后台的消息，这次项目中用到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后台设置不知，这个可能也和后台设置有关系