前端封装websocket，好用的话留个赞哦！

let socket = null;

let socketUrl = '';

let timeoutObj = null;

let global_callback = null; // 回调函数-用来调用socket的方法

/**建立连接 */

export const createSocket = (url) => {

  if (!socket) {

    socket = new WebSocket(url);

    socketUrl = url;

    socket.onopen = onopenWS;

    socket.onerror = onerrorWS;

    socket.onclose = oncloseWS;

    socket.onmessage = onmessageWS;

  }

};

/**接收的消息回调*/

export const getMessage = (callback) => {

  global_callback = callback;

};

/**关闭连接*/

export const closeSocket = () => {

  socket.close();

};

/**打开WS之后发送心跳 */

const onopenWS = () => {

  sendPing();

};

/**失败重连 */

const onerrorWS = () => {

  console.log('连接失败');

  reconnect();

};

/**断开连接 */

const oncloseWS = () => {

  console.log('断开连接');

};

/**接收消息 */

const onmessageWS = (e) => {

// 如果接收到的消息不是心跳消息，则立刻重置心跳时间，并再次发起一次心跳

// 避免了传统的轮询心跳带来的不必要的损耗

// 如果接收到的消息是心跳消息，则会继续发送心跳，保持连接畅通

  clearTimeout(timeoutObj); 

  sendPing();

// 这里把接收到的消息传入到回调函数中，在组件内可获取接收的消息

  global_callback && global_callback(e);

};

/**

 * 发送数据但连接未建立时进行处理等待重发

 * @param {any} message 需要发送的数据

 */

const connecting = message => {

  setTimeout(() => {

    if (socket.readyState === 0) {

      connecting(message);

    } else {

      socket.send(JSON.stringify(message));

    }

  }, 1000);

};

/**

* 发送数据

* @param {any} message 需要发送的数据

*/

export const sendWSPush = message => {

  if (socket.readyState === 1) {

    socket.send(JSON.stringify(message));

  } else if (socket.readyState === 0) {

    connecting(message);

  }

};

/**发送心跳 */

const sendPing = () => {

  let params = {

    'cmd': 1001,

    'time': new Date().getTime(),

    'message': 'ping'

  };

  timeoutObj = setTimeout(() => {

    if (socket.readyState === 1) {

      socket.send(JSON.stringify(params));

    } else {

      reconnect();

    }

  }, 20000);

};

/**重新连接

*每五秒重连一次，避免频繁的重连

*/

const reconnect = () => {

  setTimeout(() => {

    socket = null;

    createSocket(socketUrl);

  }, 5000);

};