Vue封装websocket双向通讯

1. 封装的socket.js文件内容：

   var websock = null;

   var global_callback = null;
   var serverPort = '80'; // webSocket连接端口
   var wsuri = 'wss://uat.sssyin.cn/ws-reservation';

   function createWebSocket(callback) {

   if (websock == null || typeof websock !== WebSocket) {
   initWebSocket(callback);
   }
   }

   function initWebSocket(callback) {
   global_callback = callback;
   // 初始化websocket
   websock = new WebSocket(wsuri);
   websock.onmessage = function (e) {
   websocketonmessage(e);
   };
   websock.onclose = function (e) {
   websocketclose(e);
   };
   websock.onopen = function () {
   websocketOpen();
   };

   // 连接发生错误的回调方法
   websock.onerror = function () {
   console.log('WebSocket连接发生错误');
   //createWebSocket();啊，发现这样写会创建多个连接，加延时也不行
   };
   }

   // 实际调用的方法
   function sendSock(agentData ) {

   if (websock.readyState === websock.OPEN) {
   // 若是ws开启状态
   websocketsend(agentData);
   } else if (websock.readyState === websock.CONNECTING) {
   // 若是 正在开启状态，则等待1s后重新调用
   setTimeout(function () {
   sendSock(agentData);
   }, 1000);
   } else {
   // 若未开启 ，则等待1s后重新调用
   setTimeout(function () {
   sendSock(agentData);
   }, 1000);
   }
   }

   function closeSock() {
   websock.close();
   }

   // 数据接收
   function websocketonmessage(msg) {
   // console.log("收到数据："+JSON.parse(e.data));
   // console.log("收到数据："+msg);

   // global_callback(JSON.parse(msg.data));

   // 收到信息为Blob类型时
   let result = null;
   // debugger
   if (msg.data instanceof Blob) {
   const reader = new FileReader();
   reader.readAsText(msg.data, 'UTF-8');
   reader.onload = e => {
   result = JSON.parse(reader.result);
   //console.log("websocket收到", result);
   global_callback(result);
   };
   } else {
   result = JSON.parse(msg.data);
   //console.log("websocket收到", result);
   global_callback(result);
   }
   }

   // 数据发送
   function websocketsend(agentData) {
   console.log(发送数据：${ agentData });
   websock.send(agentData);
   }

   // 关闭
   function websocketclose(e) {
   console.log(connection closed (${ e.code }));
   }

   function websocketOpen(e) {
   console.log('连接打开');
   }

   export { sendSock, createWebSocket, closeSock };

2、页面调用

<template>
  <div>
    <button>发消息</button>
  </div>
</template>

<script>
import { sendSock, createWebSocket, closeSock } from './sockt.js';

export default {
  data () {
    return {

    }
  },
  created() {
    this.init();
  },
  destroyed(){
    closeSock();
  },
  methods: {
    init() {
      createWebSocket(this.global_callback);

    },
    send(){
      var sendData = {
        operate:'singleChannelSwitch',
        index:index+1,
        opera:row.button_relay
      };
      sendSock(1111);
    },
    // websocket的回调函数，msg表示收到的消息
    global_callback(msg) {
      console.log(`websocket的回调函数收到服务器信息：${ JSON.stringify(msg) }`);
      // console.log("收到服务器信息：" + msg);
    },
  }
}
</script>

<style>

</style>