How I Do the pina on global websocket

[xiaxichen]

why my socket status awlayls waite I want have global WS to render the page

SocketManager Interface

type CryoSmartSocketCallBack = { [key: string]: Array<(ob: any, data: any) => void> }
 
 interface CryoSmartSocketOperationInterface {
 
   randomId (): string
 
   core_method (method: string, params: any, afterSuccess: (op: string, data: any) => void): void
 
   send_interactive_request (serverName: string, method: string, params: any, job: any, afterSuccess: () => void): void
 
   subscribeFor (message: string, afterSuccess: any): void
 }
 
 interface CryoSmartSocketBaseInterface {
   token: string
   ws: WebSocket
   user: User
   socketBaseUrl: string
   reconnectingTimer: number
   errorSendTimeout: number
   connecting: boolean
   errorStack: Array<any>
   callbacks: CryoSmartSocketCallBack
 
   onopen (): void
 
   onerror (): void
 
   onclose (): void
 
   onmessage (): void
 
   getMessage (responseData: any): void
 
   ping (): void
 
   setupWebSocket (): void
 
   send (data: any): void
 
   alert (message: string, timeout: number): void
 }
 
 class CryoSmartSocketStruct implements CryoSmartSocketBaseInterface, CryoSmartSocketOperationInterface {
   token: string
   ws: WebSocket
   user: User
   callbacks: CryoSmartSocketCallBack
 
   socketBaseUrl = process.env.SOCKET_BASE as string
   reconnectingTimer = 0
   errorSendTimeout = 0
   connecting = false
   // 错误消息队列
   errorStack: Array<any> = []
 
   constructor (user: User) {
     this.token = ''
     this.user = user
     // this.ws = null
     this.ws = new WebSocket(this.socketBaseUrl + user.token)
     this.callbacks = {}
     console.log('init socket')
   }
 
   onopen () {
     this.ws.onopen = () => {
       console.log('WebSocket连接成功')
 
       // 停止重试
       if (this.reconnectingTimer) {
         clearInterval(this.reconnectingTimer)
       }
       this.ping()
 
       this.errorStack.forEach(message => {
         this.send(message)
       })
       this.errorStack = []
     }
   }
 
   onerror () {
     // 连接发生错误的回调方法
     this.ws.onerror = (event) => {
       if (process.env.NODE_ENV === 'development') {
         this.alert('WebSocket连接发生错误')
       } else {
         console.error('WebSocket连接发生错误')
       }
       // debugger
       // }
     }
   }
 
   onclose () {
     this.ws.onclose = (event) => {
       // websocketclose(e);
       if (process.env.NODE_ENV === 'development') {
         this.alert('WebSocket连接已关闭, 需要刷新页面', 2000)
       } else {
         console.error('WebSocket连接已关闭, 需要刷新页面')
       }
       console.log(event)
 
       clearInterval(this.reconnectingTimer)
       this.reconnectingTimer = window.setInterval(async () => {
         console.warn('try reconnect ...')
         await this.setupWebSocket()
       }, 5000)
       // this.ws = new WebSocket(socketUrl)
       // debugger
     }
   }
 
   onmessage () {
     this.ws.onmessage = async (event: MessageEvent) => {
       let responseData = []
       const text = await event.data.text()
       try {
         if (text === '') {
           return
         }
         const messageStrings: string[] = text.split('}{')
         try {
         ...
           })
         } catch (e) {
          ...
         }
       } catch (e) {
         if (process.env.NODE_ENV === 'development') {
           // eslint-disable-next-line no-debugger
           debugger
         }
         console.log('error event:', e)
         console.error('error data:', text)
       }
     }
   }
 
   getMessage (responseData: any) {
     if (responseData.data.code === 1) {
       let errorMessage = responseData.data.msg
 
       const resultData = responseData.data.data
       if (resultData && resultData.error) {
         errorMessage = resultData.error.message
       }
 
       this.alert(errorMessage)
       return
     }
 
     if (responseData.send_type === 1) {
       console.log('get pong')
       // console.log(this.user.token)
     } else {
       let requestMethod = responseData.request_id
       let requestMethodWithNamespace = requestMethod
       let returnData = responseData.data.data.result
       let operate = 'get'
 
       if (requestMethod === 'server') {
         ...
       try {
         if (this.callbacks[requestMethod]) {
           this.callbacks[requestMethod].forEach((callbackFunction: any) => {
             callbackFunction(operate, returnData)
           })
         }
       } catch (e) {
         if (process.env.NODE_ENV === 'development') {
           // eslint-disable-next-line no-debugger
           debugger
         }
       }
       try {
       ...
       } catch (e) {
         if (process.env.NODE_ENV === 'development') {
           // eslint-disable-next-line no-debugger
           debugger
         }
       }
     }
   }
 
   ping () {
     this.send({
       send_type: 1,
       request_id: 'ping'
     })
   }
 
   async setupWebSocket () {
     if (this.connecting) {
       return
     }
 
     if (!this.ws || this.ws.readyState === WebSocket.CLOSED) {
       console.log(this.ws)
       console.log(this.ws?.readyState)
 
       this.connecting = true
 
       // socketUrl = 'ws://10.0.0.6:3000/cable'
       this.ws = new WebSocket(this.socketBaseUrl + this.user.token)
 
       this.ws.onopen = () => {
         console.log('WebSocket连接成功')
 
         // 停止重试
         clearInterval(this.reconnectingTimer)
 
         this.ping()
 
         this.errorStack.forEach(message => {
           this.send(message)
         })
         this.errorStack = []
       }
 
       this.onerror()
       this.onclose()
       this.onmessage()
     }
     this.connecting = false
   }
 
   randomId () {
     return Math.random().toString(36).slice(-12)
   }
 
   core_method (method: string, params: any, afterSuccess?: (op: string, data: any) => void) {
     const requestCall = method + this.randomId()
 
     if (afterSuccess) {
       this.callbacks[requestCall] ||= []
       this.callbacks[requestCall].push(afterSuccess)
     }
     ...
 
   send_interactive_request (serverName: string, method: string, params: any, job: any, afterSuccess?: (op: string, data: any) => void) {
     const requestCall = method + this.randomId()
 
     if (afterSuccess) {
       this.callbacks[requestCall] ||= []
       this.callbacks[requestCall].push(afterSuccess)
     }
    ...
     this.send(data)
   }
 
   subscribeFor (message: string, afterSuccess: any) {
     this.callbacks[message] ||= []
     this.callbacks[message].push(afterSuccess)
   }
 
   send (data: any) {
     if (this.ws && this.ws.readyState === WebSocket.OPEN) {
       this.ws.send(JSON.stringify(data))
     } else {
       this.errorStack.push(data)
 
       clearTimeout(this.errorSendTimeout)
       this.errorSendTimeout = window.setTimeout(() => {
         this.setupWebSocket()
       }, 1000)
     }
   }
 
 ...
   }
 }
 
 export default CryoSmartSocketStruct

Init Store

import { defineStore } from 'pinia'
import CryoSocket from 'src/services/CryoSocket'
import { userDefineStore } from 'stores/userDefineStore'

export const socketManagerDefineStore = defineStore('socketManagerStore', {
  state: () => {
    const socketManager: null | CryoSocket = null
    return {
      socketManager
    } as { socketManager: null | CryoSocket }
  },
  getters: {
    // getSocketManager: (state): CryoSocket => {
    //   if (state.socketManager != null) {
    //     console.log('复用socket')
    //     console.log(state.socketManager)
    //     debugger
    //     return state.socketManager
    //   }
    //   console.log('新建socket')
    //   const userStore = userDefineStore()
    //   state.socketManager = new CryoSocket(userStore.user)
    //   console.log(state.socketManager)
    //   state.socketManager.ping()
    //   return state.socketManager
    // }
  },
  actions: {
    getSocketManager (): CryoSocket {
      if (this.socketManager != null) {
        console.log('复用socket')
        console.log(this.socketManager)
        // debugger
        return this.socketManager
      }
      console.log('新建socket')
      const userStore = userDefineStore()
      this.socketManager = new CryoSocket(userStore.user)
      console.log(this.socketManager)
      this.socketManager.ping()
      return this.socketManager
    }
  }
})

Use Socket

IndexPage.vue

export default defineComponent({
  components: {
     ...
  },
  setup () {
    const router = useRouter()
    const socketManagerStore = socketManagerDefineStore()

    const socketManager = socketManagerStore.getSocketManager()
    // get projects
    socketManager.core_method('list_projects', {}, (operate, projects: Project[]) => {
      ...
    }) 
      ...
    // insert project if get insert message
    socketManager.subscribeFor('insert_projects', (_operate: string, project: MongoDBProject) => {
      ...
    })

[xiaxichen]

I know why . init socker not call on_open