最简单的WebScoket长连接

1.新建websocket.js文件

let webSock = null;

// 成功接收主题
let messageCallback = null;

// 失败接收主题
let errorCallback = null;

// 给后台推送数据
let params = null;

// 初始化
function initWebSocket(url) {
  if (typeof WebSocket === "undefined") {
    window.vm.$Message.error("您的浏览器不支持WebSocket，无法获取数据");
    return false;
  }
  // ws请求完整地址
  const requestWebSocketUrl = "ws://test.ws.com" + url;
  webSock = new WebSocket(requestWebSocketUrl);
  webSock.onmessage = function(e) {
    webSocketOnMessage(e);
  };
  webSock.onopen = function() {
    websocketOpen();
  };
  webSock.onerror = function() {
    window.vm.$Message.error("ws连接异常，请稍候重试");
    errorCallback();
  };
  webSock.onclose = function(e) {
    webSocketClose(e);
  };
}
// 建立ws连接
function websocketOpen(e) {
  console.log("ws连接成功");
  websocketSend(params);
}
/**
 * 发起websocket连接
 * @param {Object} params 需要向后台传递的参数数据
 */
function websocketSend(params) {
  // 添加状态判断，当为OPEN时，发送消息
  if (webSock.readyState === webSock.OPEN) {
    // 发给后端的数据需要字符串化
    webSock.send(JSON.stringify(params));
  }
  // 报错之后调用失败的回调
  if (webSock.readyState === webSock.CLOSED) {
    errorCallback();
  }
}
// 成功返回数据
function webSocketOnMessage(e) {
  messageCallback(JSON.parse(e.data));
}

// 关闭ws连接
function webSocketClose(e) {
  // e.code === 100 正常关闭  else  非正常关闭
  if (e && e.code !== 1000) {
    // 关闭socket失败处理
  }
}

/**
 * 发起websocket请求函数
 * @param {string} url 地址
 * @param {Object} params 参数
 * @param {function} successCallback 成功的回调函数
 * @param {function} errCallback ws连接错误的回调函数
 */
export const sendWebsocket = (url, params, successCallback, errCallback) => {
  initWebSocket(url);
  messageCallback = successCallback;
  errorCallback = errCallback;
  params = params;
};

/**
 * 关闭websocket函数
 */
export const closeWebsocket = () => {
  if (webSock) {
    webSock.onclose(); // 关闭websocket
  }
};

2.页面中使用

export default {
  beforeDestroy() {
    // 页面销毁时关闭ws。因为有可能ws连接接收数据尚未完成，用户就跳转了页面
    // 在需要主动关闭ws的地方都可以调用该方法
    closeWebsocket()
  },
  data() {
    return {
    }
  },
  mounted() {
  },
  methods: {
    // 成功的回调函数
    wsSuccess(data) {
      const dataJson = data
    },
    // 失败的回调函数,例如需要取消或者弹框提示等
    wsError() {
        console.log('错误啦')
    },
    // 发起websocket
    searchList() {
      // 每次连接时，关闭上次的websocket。
      closeWebsocket()
      // 发起ws请求
      let params = {
      	id:1
      }
      sendWebsocket('ws://test.ws.com', params, this.wsSuccess, this.wsError)
    },
  },
}