aranroig.com/frontend/app/composables/useSocket.ts

import { ref, onUnmounted } from 'vue'
import { io } from 'socket.io-client'

export default function useSocket() {
  const config = useRuntimeConfig()
  const socketUrl = `${config.public.apiBaseUrl.replace('/api', '')}`

  const socket = ref(null)
  const isConnected = ref(false)

  function initSocket() {
    if (socket.value) return

    const s = io(socketUrl, {
      transports: ['websocket', 'polling'],
      reconnection: true,
      reconnectionAttempts: 10,
      reconnectionDelay: 1000,
    })

    s.on('connect', () => {
      console.log('[socket.io] connected')
      isConnected.value = true
    })

    s.on('disconnect', () => {
      console.log('[socket.io] disconnected')
      isConnected.value = false
    })

    s.on('connect_error', (err) => {
      console.error('[socket.io] connection error:', err.message)
      isConnected.value = false
    })

    socket.value = s
  }

  function onGridCellPaint(callback) {
    if (!socket.value) initSocket()
    socket.value.on('grid-cell-paint', callback)
  }

  function removeGridCellPaintListener() {
    if (socket.value) {
      socket.value.off('grid-cell-paint')
    }
  }

  onUnmounted(() => {
    if (socket.value) {
      socket.value.disconnect()
      socket.value = null
    }
  })

  return {
    isConnected,
    initSocket,
    onGridCellPaint,
    removeGridCellPaintListener,
  }
}