const useSocketStore = defineStore(
  'socket',
  {
    state: () => ({
      ws: undefined,
      heartTimeOut: 40000, //監(jiān)測心跳時間 40秒
      //this.isReConnection = false
      lockReconnect: false, //避免重連
      timerReconnect: undefined,
      timerHeart: undefined,
      timerServerHeart: undefined,
      handClose: false,
      msg: ""
    }),
    actions: {
      connection(url, token){
        if("WebSocket" in window){
          this.createWebSocket(url, token)
          
        }
        else{
          console.log("您的瀏覽器不支持websocket通信")
        }    
      },
    
      //初始化
      createWebSocket(url, token){
        try{
          this.ws = new WebSocket(url, token)  // 
          
          this.initWebsocket()
          
        }
        catch(e){
          console.log("catch eeeee=", e)
          this.reConnection()
        }
      },
    
      initWebsocket(){
    
        //建立連接
        this.ws.onopen = (e)=>{
         
          //webSocket業(yè)務(wù)訂閱——可以有多個業(yè)務(wù)
          this.ws.send("hello server");
          console.log("連接成功")
          //連接成功后，需要開啟監(jiān)測心跳
          this.heartCheck()
        }
    
        this.ws.onmessage = (messages)=>{
         
          console.log(messages.data)
          let msg = messages.data
          if(msg.includes("{")){
            msg = JSON.parse(msg)
          }
          this.msg = msg

          //接收到消息后，需要開啟監(jiān)測心跳
          this.heartCheck()
        }
    
      
        this.ws.onerror = (e)=>{       //連不上時onerror 和 onclose 監(jiān)聽同時會捕捉到
          console.log("連接失敗")
          // 連失敗需要重連
          this.reConnection()
        }
    
        this.ws.onclose = (e)=>{
          console.log("關(guān)閉連接")
         
          //是否正常關(guān)閉  正常關(guān)閉不需要重連， 否則需要重連
          if(!this.handClose){
            this.reConnection()
          }
        }
      },
    
      clearTimer(){
        this.timerReconnect && clearTimeout(this.timerReconnect)
        this.timerHeart && clearTimeout(this.timerHeart)
        this.timerServerHeart && clearTimeout(this.timerServerHeart)
      },
    
      //重連
      reConnection(){
        console.log("重新連接")
        if(this.lockReconnect){
          return
        }
        this.lockReconnect = true
        if(this.timerReconnect) {
          clearTimeout(this.timerReconnect)
        } 
    
        //沒連上會一直重連， 設(shè)置遲延，避免請求過多
        this.timerReconnect = setTimeout(() => { //setTimeout 到點了執(zhí)行
          this.connection()
          this.lockReconnect = false
        }, 5000);
        
      },
      
    
      //心跳
      heartCheck(){
        console.log("監(jiān)測心跳")
        if(this.timerHeart){
          clearTimeout(this.timerHeart)
        }
    
        // if(this.timerServerHeart){
        //   clearTimeout(this.timerServerHeart)
        // }
    
        this.timerHeart = setTimeout(() => {
          console.log("PING");
          this.ws.send("PING");
    
          // this.timerServerHeart = setTimeout(() => {
          //   // 斷了
          //   this.ws.close()
          // }, 5000);
    
          this.lockReconnect = false
        }, this.heartTimeOut); //40秒
    
      },
    
      //發(fā)送消息
      sendMsg(data){
        console.log("發(fā)送消息")
        if(this.ws.readyState === WebSocket.OPEN){
          this.ws.send(JSON.stringify(data))
        }
      },
    
      //關(guān)閉連接 手動關(guān)閉
      closeWs(){
        console.log("手動關(guān)閉ws")
        this.handClose = true
        this.clearTimer()
        this.ws.close()
      }
    }
  })

export default useSocketStore

import useSocketStore from '@/store/modules/websocket'
import { getToken } from '@/utils/auth'
import  useUserStore from "@/store/modules/user.js"
const userStore = useUserStore();

const socketStore = useSocketStore();

onMounted(()=>{
  let url = `${import.meta.env.VITE_APP_SOCKET_URL}/1/${userStore.userId}/`;
  let token= getToken();

  socketStore.connection(url, token);
})
onUnmounted(()=>{
  socketStore.closeWs();
})

watch(() => socketStore.msg, messages => {
  if(messages.mesType === "order"){
    newMessage.value = true;
  }  
})