agora-ai/frontend/src/composables/useWebSocket.js

import { ref, onUnmounted } from 'vue'

export function useWebSocket(sessionId = null) {
  const ws = ref(null)
  const connected = ref(false)
  const messages = ref([])

  const WS_URL = import.meta.env.VITE_WS_URL || 'ws://localhost:3000'

  function connect() {
    let url = WS_URL
    if (sessionId) {
      url += `?sessionId=${sessionId}`
    }

    ws.value = new WebSocket(url)

    ws.value.onopen = () => {
      connected.value = true
      console.log('WebSocket connected')
    }

    ws.value.onmessage = (event) => {
      try {
        const data = JSON.parse(event.data)
        messages.value.push(data)
      } catch (error) {
        console.error('WebSocket message parse error:', error)
      }
    }

    ws.value.onerror = (error) => {
      console.error('WebSocket error:', error)
    }

    ws.value.onclose = () => {
      connected.value = false
      console.log('WebSocket disconnected')
    }
  }

  function disconnect() {
    if (ws.value) {
      ws.value.close()
      ws.value = null
    }
  }

  function send(data) {
    if (ws.value && connected.value) {
      ws.value.send(JSON.stringify(data))
    }
  }

  function subscribe(params) {
    send({
      type: 'subscribe',
      ...params
    })
  }

  onUnmounted(() => {
    disconnect()
  })

  return {
    ws,
    connected,
    messages,
    connect,
    disconnect,
    send,
    subscribe
  }
}