vue+websocket，封装和页面实际使用情况

vue+websocket，封装和页面实际使用情况

一、 封装的socket.js

let webSocket = null;
let globalCallback = null;//定义外部接收数据的回调函数
 
//初始化websocket
function initWebSocket(url,headers=[]) {
  if ("WebSocket" in window) {
    webSocket = new WebSocket(url,headers);//创建socket对象
    console.log(webSocket)
  } else {
    alert("该浏览器不支持websocket!");
  }
  //打开
  webSocket.onopen = function() {
    webSocketOpen();
  };
  //收信
  webSocket.onmessage = function(e) {
    webSocketOnMessage(e);
  };
  //关闭
  webSocket.onclose = function() {
    webSocketClose();
  };
  //连接发生错误的回调方法
  webSocket.onerror = function() {
    console.log("WebSocket连接发生错误");
  };
}
 
//连接socket建立时触发
function webSocketOpen(e) {
  if (e === "LOGIN") {
    const data = {
      type: "CONNECT",
      token: sessionStorage.getItem("token") || ""
    };
    sendSock(data, function() {});
  }
  console.log("WebSocket连接成功");
}
 
//客户端接收服务端数据时触发,e为接受的数据对象
function webSocketOnMessage(e) {
  const data = JSON.parse(e.data);//根据自己的需要对接收到的数据进行格式化
  globalCallback(data);//将data传给在外定义的接收数据的函数，至关重要。
  /*在此函数中还可以继续根据项目需求来写其他东西。 比如我的项目里需要根据接收的数据来判断用户登录是否失效了，此时需要关闭此连接，跳转到登录页去。*/
}
 
//发送数据
function webSocketSend(data) {
  webSocket.send(JSON.stringify(data));//在这里根据自己的需要转换数据格式
}
 
//关闭socket
function webSocketClose() {
  //因为我建立了多个socket，所以我需要知道我关闭的是哪一个socket，就做了一些判断。
  if (
    webSocket.readyState === 1 &&
    webSocket.url === "ws:"
  ) {
    webSocket.close();//这句话是关键，之前我忘了写，一直没有真正的关闭socket
    console.log("对话连接已关闭");
  }
}
 
//在其他需要socket地方调用的函数，用来发送数据及接受数据
function sendSock(agentData, callback) {
  globalCallback = callback;//此callback为在其他地方调用时定义的接收socket数据的函数，此关重要。
 
//此处先判断socket连接状态 
 
  switch (webSocket.readyState) {
    //CONNECTING：值为0，表示正在连接。
    case webSocket.CONNECTING:
      setTimeout(function() {
        webSocketSend(agentData, callback);
      }, 1000);
      break;
    //OPEN：值为1，表示连接成功，可以通信了。
    case webSocket.OPEN:
      webSocketSend(agentData);
      break;
    //CLOSING：值为2，表示连接正在关闭。
    case webSocket.CLOSING:
      setTimeout(function() {
        webSocketSend(agentData, callback);
      }, 1000);
      break;
    //CLOSED：值为3，表示连接已经关闭，或者打开连接失败。
    case webSocket.CLOSED:
      // do something
      break;
    default:
      // this never happens
      break;
  }
}
 
//将初始化socket函数、发送（接收）数据的函数、关闭连接的函数export出去
export {
  initWebSocket,
  webSocketClose,
  sendSock
};

二、在main.js引用

```js
   //全局发送消息
	import * as socketApi from '@/utils/Socket'// 找到封装的socket.js文件
    Vue.prototype.socketApi = socketApi //将其挂在原型上，这样 $socketApi就在所有的 Vue 实例中可用了

三、应用页面

data(){
return{
  // websocket地址
      wsUrl: "ws://",//定义socket连接地址
}},
  mounted() {
    this.webSocketData();
  },
//离开页面关闭socket
 destroyed() {
     //在离开此页面的时候主动关闭socket
      this.socketApi.webSocketClose();
  },
    methods: {
      // 接收socket回调函数返回数据的方法
      getConfigResult(msg) {
       //服务端返回的数据
          // 业务逻辑处理
      this.sourceData = msg;
      },
       websocketSend(data) {
        //data为要发送的数据，this.getConfigResult为回调函数，用于在此页面接收socket返回的数据。
        //至关重要！我一开始没写这个，就蒙了，咋才能到拿到回来的数据呢。
        this.socketApi.sendSock(data, this.getConfigResult);
      },

    webSocketData() {
        //建立socket连接.
        const Authorization = getToken();
        this.socketApi.initWebSocket(this.wsUrl,Authorization);
         //data为和后端商量好的数据格式
        this.fun()
    },
    //发送消息得数据函数
    fun(){
         //data为和后端商量好的数据格式
       const queryRef = this.$refs.queryRef;
      if (queryRef) {
        const params = {
          satName: queryRef.formData.sat,
          dtS: queryRef.timeRange.length > 1 ? queryRef.timeRange[0] : "",
          dtE: queryRef.timeRange.length > 1 ? queryRef.timeRange[1] : "",
        };
         this.websocketSend(params);
      }
    },
    }