Place

frontend/app/composables/useSocket.ts

@@ -0,0 +1,63 @@
+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,
+  }
+}