video-maker/frontend/src/stores/useSocketStore.ts

import { defineStore } from "pinia";
import { store } from "@/stores/store";
import main from "../main";
import type { SocketStore } from "./type";

export const useSocketStore = defineStore({
  id: "socket",
  state: (): SocketStore => ({
    // 連接狀態
    isConnected: false,
    // 訊息內容
    message: "",
    // 重新連接錯誤
    reconnectError: false,
    // 心跳消息發送時間
    heartBeatInterval: 50000,
    // 心跳定時器
    heartBeatTimer: 0
  }),
  actions: {
    // 開啟連接
    SOCKET_ONOPEN(event: any) {
      console.log("successful websocket connection");
      console.log('event',event);
      main.config.globalProperties.$socket = event.currentTarget;
      this.isConnected = true;
      // 連接成功時啟動定時發送心跳訊息，避免被服務器斷開連接
      this.heartBeatTimer = window.setInterval(() => {
        const message = "心跳消息";
        this.isConnected &&
          main.config.globalProperties.$socket.sendObj({
            code: 200,
            msg: message
          });
      }, this.heartBeatInterval);
    },
    // 關閉連接
    SOCKET_ONCLOSE(event: any) {
      this.isConnected = false;
      // 連接關閉時停掉心跳訊息
      window.clearInterval(this.heartBeatTimer);
      this.heartBeatTimer = 0;
      console.log("連接已斷線：" + new Date());
      console.log(event);
    },
    // 發生錯誤
    SOCKET_ONERROR(event: any) {
      console.error(event);
    },
    // 收到服務端發送的訊息
    SOCKET_ONMESSAGE(message: any) {
      this.message = message;
      console.log('SOCKET_ONMESSAGE',message);
    },
    // 自動重連
    SOCKET_RECONNECT(count: any) {
      console.info("重新連接中...", count);
    },
    // 重連錯誤
    SOCKET_RECONNECT_ERROR() {
      this.reconnectError = true;
    }
  }
});

// Need to be used outside the setup
export function useSocketStoreWithOut() {
  return useSocketStore(store);
}