封装websocket vue

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

var websock = null;
 
var global_callback = null;
var serverPort = "80"; // webSocket连接端口
var wsuri = "ws://" + window.location.hostname + ":" + serverPort;
 
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 };

封装的websocke暴露三个接口

sendSock用于发送数据
createWebSocket用于创建连接、对收到的数据进行处理
closeSock 用于关闭连接

1、建立连接

import { sendSock, createWebSocket, closeSock } from "@/api/socket";
created() {
    this.init();
  },
  methods: {
    init() {
      createWebSocket(this.global_callback); 
    },
 
    // websocket的回调函数，msg表示收到的消息
    global_callback(msg) {
      console.log("websocket的回调函数收到服务器信息：" + JSON.stringify(msg));
      // console.log("收到服务器信息：" + msg);
    },
  }

2、发送数据

import { sendSock } from "@/api/socket";
 
 var sendData = {
        operate:"singleChannelSwitch",
        index:index+1,
        opera:row.button_relay
      };
      sendSock(JSON.stringify(sendData));

3、关闭连接
第一步：导入文件

import { closeSock} from "@/api/socket";

第二步：关闭连接

closeSock();