hsq-pro/src/hooks/web/useVentWebSocket.ts

import { reactive, watch, unref, computed, ref, Ref, watchEffect, WatchStopHandle } from 'vue';
import { useWebSocket as $useWebSocket } from '@vueuse/core';
import { useGlobSetting } from '/@/hooks/setting';
import { useUserStore } from '/@/store/modules/user';
import { useVentStore } from '/@/store/modules/vent';
import { getToken } from '/@/utils/auth';

const glob = useGlobSetting();
const userStore = useUserStore();
const state = reactive({
  server:
    glob.domainUrl?.replace('https://', 'wss://').replace('http://', 'ws://') +
    '/deviceSocket/' +
    unref(userStore.getUserInfo).username +
    '?token=' +
    getToken(),
  sendValue: '',
  recordList: [] as { id: number; time: number; res: string }[],
});

const ventStore = useVentStore();

const resultWebSocket = computed(() => {
  return ventStore.getResultWebSocket;
});

const data = computed(() => (resultWebSocket.value ? resultWebSocket.value.data : ''));
const status = computed(() => (resultWebSocket.value ? resultWebSocket.value.status : ''));
const stop = <Ref<WatchStopHandle>>ref();

const startWatchEffect = () => {
  stop.value = watchEffect(() => {
    if (status.value === 'OPEN' && !data.value) {
      try {
        resultWebSocket.value.send(state.sendValue);
        console.log(222, 'sendValue', state.sendValue, status.value);
      } catch (e) {
        console.error(e);
      }
    }
    if (data.value && status.value === 'OPEN') {
      try {
        const res = JSON.parse(data.value);
        if (res.cmd === 'monitordata') {
          state.recordList = [];
          const list: [] = res.msgTxt[0].datalist;
          list.forEach((item: any) => {
            const resultItem = { ...item };
            const readData = item.readData;
            for (const key in readData) {
              resultItem[key] = readData[key];
            }
            state.recordList.push(resultItem);
          });
        }
      } catch (error) {
        state.recordList.push({
          res: data.value,
          id: Math.ceil(Math.random() * 1000),
          time: new Date().getTime(),
        });
      }
    }
  });
};

function connectWebSocket() {
  if (!resultWebSocket.value) {
    console.log('测试链接。。。。');
    const result = $useWebSocket(state.server, {
      // 自动重连
      autoReconnect: false,
      // 心跳检测
      heartbeat: true,
      //protocols: [token],
    });
    ventStore.setResultWebSocket(result);
    startWatchEffect();
  }
}

export function initWebSocket(sendValue) {
  if (resultWebSocket.value) {
    closeWebSocket();
  }
  state.sendValue = sendValue;
  connectWebSocket();
}

export function getRecordList() {
  return state.recordList;
}

export function closeWebSocket() {
  state.recordList = [];
  ventStore.setResultWebSocket(null);
}