Primer commit

src/composables/useWsMonitor.js

@@ -0,0 +1,169 @@
+import { computed, ref } from 'vue'
+import { createWsClient } from '../services/wsService'
+import { getAuthSession } from '../services/auth'
+
+const DEFAULT_MAX_HISTORY = 200
+const logs = ref([])
+const connectionStatus = ref('offline')
+const connectionDetail = ref('')
+const maxHistory = ref(DEFAULT_MAX_HISTORY)
+const username = ref('')
+const isConnected = computed(() => connectionStatus.value === 'open')
+
+let client = null
+
+function stringifyPayload(payload) {
+  if (typeof payload === 'string') {
+    return payload
+  }
+  try {
+    return JSON.stringify(payload)
+  } catch {
+    return String(payload)
+  }
+}
+
+const appendLog = (entry) => {
+  const normalized = {
+    id: `${Date.now()}_${Math.random().toString(16).slice(2)}`,
+    timestamp: new Date().toISOString(),
+    type: entry.type,
+    label: entry.label,
+    payload: stringifyPayload(entry.payload),
+  }
+
+  logs.value.unshift(normalized)
+
+  if (logs.value.length > maxHistory.value) {
+    logs.value.length = maxHistory.value
+  }
+}
+
+const ensureClient = () => {
+  if (client) {
+    return true
+  }
+
+  const session = getAuthSession()
+  const token = session?.access_token
+
+  if (!token) {
+    appendLog({
+      type: 'error',
+      label: 'No hay token de sesion para conectar WS.',
+      payload: 'Inicia sesion nuevamente.',
+    })
+    return false
+  }
+
+  client = createWsClient({
+    token,
+    username: session?.usuario,
+    onStatus: ({ status, detail }) => {
+      connectionStatus.value = status
+      connectionDetail.value = detail
+
+      const isErrorLike = ['error', 'failed'].includes(status)
+      appendLog({
+        type: isErrorLike ? 'error' : 'status',
+        label: `Estado: ${status}`,
+        payload: detail || '-',
+      })
+    },
+    onSend: ({ message, sent }) => {
+      appendLog({
+        type: 'outgoing',
+        label: sent ? 'Solicitud enviada' : 'Solicitud en cola',
+        payload: message,
+      })
+    },
+    onMessage: (message) => {
+      appendLog({
+        type: 'incoming',
+        label: 'Respuesta recibida',
+        payload: message,
+      })
+    },
+  })
+
+  username.value = client.getUsername()
+  return true
+}
+
+export function useWsMonitor(initialMaxHistory = DEFAULT_MAX_HISTORY) {
+  if (initialMaxHistory > maxHistory.value) {
+    maxHistory.value = initialMaxHistory
+  }
+
+  const connect = () => {
+    const ready = ensureClient()
+    if (!ready) {
+      return
+    }
+    client.connect()
+  }
+
+  const disconnect = () => {
+    if (!client) {
+      connectionStatus.value = 'offline'
+      connectionDetail.value = ''
+      return
+    }
+
+    client.disconnect()
+    client = null
+    connectionStatus.value = 'offline'
+    connectionDetail.value = ''
+    username.value = ''
+  }
+  // Envía un mensaje de texto sin envolver al servidor WebSocket. Si el socket no está abierto, el mensaje se encola para enviarse cuando se abra la conexión.
+  const sendRaw = (message) => {
+    if (!ensureClient()) {
+      return
+    }
+    client.sendRaw(message)
+  }
+  // Envía un comando al servidor WebSocket. El comando se envía como un objeto JSON con la propiedad "command" y cualquier otra propiedad adicional que se pase en "extra".
+  const sendCommand = (cmd, extra = {}) => {
+    // Verifica si el cliente WS está inicializado y listo para enviar comandos. Si no lo está, intenta inicializarlo.
+    if (!ensureClient()) {
+      return
+    }
+    // en este caso, el payload se envía como un objeto con la propiedad "command" y cualquier otra propiedad adicional que se pase en "extra"
+    client.sendCommand(cmd, extra)
+  }
+
+  const clearLogs = () => {
+    logs.value = []
+  }
+
+  const setMaxHistory = (nextValue) => {
+    const normalized = Number(nextValue)
+    if (Number.isNaN(normalized) || normalized < 20) {
+      maxHistory.value = 20
+    } else if (normalized > 1000) {
+      maxHistory.value = 1000
+    } else {
+      maxHistory.value = normalized
+    }
+
+    if (logs.value.length > maxHistory.value) {
+      logs.value.length = maxHistory.value
+    }
+  }
+
+  return {
+    logs,
+    connectionStatus,
+    connectionDetail,
+    isConnected,
+    maxHistory,
+    username,
+    connect,
+    disconnect,
+    sendRaw,
+    sendCommand,
+    clearLogs,
+    setMaxHistory,
+  }
+}