student-client/src/features/OnlineExam/Examing/ws.js

import store from "@/store";
import { Message } from "iview";
import { VUE_APP_WK_SERVER_SOCKET_FOR_AUDIO } from "@/constants/constants";

let ws;
let shouldReconnect = true;
let heartbeatId = null;
const RECONNECT_INTERVAL = 3000;
const HEARTBEAT_INTERVAL = 50 * 1000;
let reconnectNumber = 0;

export function openWS({ examRecordDataId }) {
  window._hmt.push(["_trackEvent", "websocket", "准备连接"]);
  console.log("in openWS", examRecordDataId);
  ws = new WebSocket(
    VUE_APP_WK_SERVER_SOCKET_FOR_AUDIO +
      `${examRecordDataId}/${store.state.user.key}/${store.state.user.token}`
  );

  ws.onopen = event => {
    console.log("open ws", event);
    reconnectNumber = 0;

    ws.onmessage = processWSMessage;

    ws.onclose = () => {
      console.log("ws close by server");
      clearInterval(heartbeatId);
      if (shouldReconnect) {
        console.log("close -> reconnect");
        setTimeout(() => {
          // tryWSReconnect();
          reconnectNumber++;
          if (reconnectNumber >= 5) {
            reconnectNumber = 0;
            Message.error({
              content: "Websocket重连失败",
              duration: 5,
              closable: true,
            });
          }
          window._hmt.push([
            "_trackEvent",
            "websocket",
            "连接被关闭后-准备连接",
          ]);
          openWS({ examRecordDataId });
        }, RECONNECT_INTERVAL);
      } else {
        shouldReconnect = true; // reset shouldReconnect
      }
    };

    heartbeat();
  };

  ws.onerror = () => {
    setTimeout(() => {
      reconnectNumber++;
      if (reconnectNumber >= 5) {
        reconnectNumber = 0;
        Message.error({
          content: "Websocket重连失败",
          duration: 5,
          closable: true,
        });
      }
      window._hmt.push(["_trackEvent", "websocket", "连接错误后-重新连接"]);
      openWS({ examRecordDataId });
    }, RECONNECT_INTERVAL);
  };
}

// function tryWSReconnect() {
//   // socket.close();
//   openWS();
// }

function heartbeat() {
  heartbeatId = setInterval(() => {
    ws.send(
      JSON.stringify({
        eventType: "HEARTBEAT",
      })
    );
  }, HEARTBEAT_INTERVAL);
}

export function closeWsWithoutReconnect() {
  shouldReconnect = false;
  ws.close();
}

export function getQRCode(order) {
  if (ws.readyState === ws.OPEN) {
    ws.send(
      JSON.stringify({
        eventType: "GET_QR_CODE",
        order,
      })
    );
    return true;
  } else {
    return false;
  }
}

function processWSMessage(event) {
  // console.log("get ws msg: ", event);
  const res = JSON.parse(event.data);
  if (res.eventType !== "HEARTBEAT" && !res.isSuccess) {
    Message.error({
      content: res.errorMessage,
      duration: 10,
      closable: true,
    });
    return;
  }
  switch (res.eventType) {
    case "HEARTBEAT":
      // console.log("ws heartbeat response from server");
      break;
    case "GET_QR_CODE":
      console.log("get qrcode", res);
      window._hmt.push(["_trackEvent", "websocket", "获得二维码"]);
      store.commit("examingHomeModule/setQuestionQrCode", {
        qrCode: res.data.qrCode,
        order: res.data.order,
      });
      break;
    case "SCAN_QR_CODE":
      console.log("wx scanned qrcode", res);
      window._hmt.push(["_trackEvent", "websocket", "二维码被扫描"]);
      store.commit("examingHomeModule/setQuestionQrCodeScanned", {
        order: res.data.order,
      });
      break;
    case "GET_AUDIO_ANSWER":
      console.log("get audio url", res);
      window._hmt.push(["_trackEvent", "websocket", "获得音频地址"]);
      store.commit("examingHomeModule/setQuestionAudioFileUrl", {
        order: res.data.order,
        audioFileUrl: res.data.audioFileUrl,
      });
      break;
    case "SYSTEM_ERROR":
      console.log("ws get error", res);
      break;
  }
}