vue3使用SockJS实现webSocket通信

直接上来就是(lll￢ω￢)，以下是单文件形式（也可以将initWebSocket暴露出去）：

<script setup lang='ts'>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';

const dataList = ref([]);
let timer;

const initWebSocket = () => {
  const { connection, stompClient } = connection();

  const removeTab = (targetName: string) => {
    console.log(targetName);
  };

  const reconnect = () => {
    try {
      stompClient.send("test");
    } catch (err) {
      console.log("断线了: " + err);
      connection();
    }
  };
//定时器重连
  onMounted(() => {
    timer = setInterval(reconnect, 5000);
  });
//销毁定时器断开连接
  onBeforeUnmount(() => {
    clearInterval(timer);
    disconnect(stompClient);
  });
};

const connection = () => {
  const socket = new SockJS('http://xxxxxx:8089/ws');
  const stompClient = Stomp.over(socket);

  const headers = {
    login: 'mylogin',
    passcode: 'mypasscode',
    'client-id': 'my-client-id'
  };

  const connectCallback = (frame: any) => {
    stompClient.subscribe('/topic/chat_msg', (msg: any) => {
      console.log(msg.body);
    });
  };

  const errorCallback = (err: any) => {
    console.log(err);
  };

  stompClient.connect(headers, connectCallback, errorCallback);

  return { connection, stompClient };
};

const disconnect = (stompClient: any) => {
  if (stompClient) {
    stompClient.disconnect();
    console.log("Disconnected");
  }
};
</script>