feat: enhance Socket.IO configuration and improve WebSocket handling

- Updated the Docker Compose configuration with additional comments for clarity on WebSocket and reverse-proxy setup.
- Introduced a new environment variable handling for Socket.IO polling behavior in nuxt.config.ts, allowing for dynamic configuration based on the environment.
- Refactored the Socket.IO client options to utilize the new polling configuration, improving flexibility in transport methods.
- Enhanced logging to provide better insights into the Socket.IO polling configuration during runtime.

Author: tacxou

apps/web/nuxt.config.ts

@@ -10,12 +10,18 @@ const SESAME_APP_API_URL = process.env.SESAME_APP_API_URL || 'http://127.0.0.1:4
 const SESAME_ALLOWED_HOSTS = process.env.SESAME_ALLOWED_HOSTS ? process.env.SESAME_ALLOWED_HOSTS.split(',') : []
 const API_PROXY_TARGET = SESAME_APP_API_URL.replace(/\/$/, '')
 const IS_DEV = process.env.NODE_ENV === 'development'
+/** Par défaut : polling seul en dev (proxy WS cassé), WebSocket en prod. Surcharge : SESAME_SOCKET_IO_POLLING_ONLY=0|1 */
+const SOCKET_IO_POLLING_ONLY =
+  process.env.SESAME_SOCKET_IO_POLLING_ONLY !== undefined
+    ? /^(1|true|yes|on)$/i.test(process.env.SESAME_SOCKET_IO_POLLING_ONLY)
+    : IS_DEV
 
 if (SESAME_ALLOWED_HOSTS.length === 0 && !/localhost/.test(SESAME_APP_API_URL) && IS_DEV) {
   SESAME_ALLOWED_HOSTS.push(new URL(SESAME_APP_API_URL).hostname)
 }
 
 consola.info(`[Nuxt] SESAME_APP_API_URL: ${SESAME_APP_API_URL}`)
+consola.info(`[Nuxt] Socket.IO polling only: ${SOCKET_IO_POLLING_ONLY}`)
 consola.info(`[Nuxt] SESAME_ALLOWED_HOSTS: ${SESAME_ALLOWED_HOSTS}`)
 
 let SESAME_APP_DARK_MODE: 'auto' | boolean = false
@@ -78,6 +84,7 @@ export default defineNuxtConfig({
   runtimeConfig: {
     public: {
       release: process.env.npm_package_name + '@' + process.env.npm_package_version,
+      socketIoPollingOnly: SOCKET_IO_POLLING_ONLY,
       sentry: {
         dsn: process.env.SESAME_SENTRY_DSN,
       },

apps/web/src/composables/useSocketIoClient.ts

@@ -1,22 +1,43 @@
 import type { ManagerOptions, SocketOptions } from 'socket.io-client'
+import { tryUseNuxtApp, useRuntimeConfig } from '#app'
 
-/** Même préfixe que le proxy `/api/**` → API (cf. `nuxt.config.ts` routeRules). */
+/** Même préfixe que le proxy `/api/**` → API (cf. `nuxt.config.ts`). */
 export const SOCKET_IO_PATH = '/api/socket.io'
 
+function readSocketIoPollingOnly(): boolean {
+  const nuxtApp = tryUseNuxtApp()
+  const fromApp = nuxtApp?.$config?.public?.socketIoPollingOnly
+  if (fromApp !== undefined) {
+    return Boolean(fromApp)
+  }
+
+  if (import.meta.client) {
+    const injected = (window as { __NUXT__?: { config?: { public?: { socketIoPollingOnly?: boolean } } } }).__NUXT__?.config
+      ?.public?.socketIoPollingOnly
+    if (injected !== undefined) {
+      return Boolean(injected)
+    }
+  }
+
+  return Boolean(useRuntimeConfig().public.socketIoPollingOnly)
+}
+
 /**
- * Dev : long-polling seul (le proxy Nuxt ne gère pas l'upgrade WS sur /api/socket.io).
- * Prod : WebSocket via le reverse-proxy, repli polling si besoin.
+ * Transports Socket.IO.
+ * Contrôlé par `SESAME_SOCKET_IO_POLLING_ONLY` (défaut : true en dev, false en prod).
  */
 export function socketIoTransports(): ('websocket' | 'polling')[] {
-  return import.meta.dev ? ['polling'] : ['websocket', 'polling']
+  return readSocketIoPollingOnly() ? ['polling'] : ['websocket', 'polling']
 }
 
 export function buildSocketIoClientOptions(auth: { id: string; key: string }): Partial<ManagerOptions & SocketOptions> {
+  const pollingOnly = readSocketIoPollingOnly()
+
   return {
     path: SOCKET_IO_PATH,
     query: { id: String(auth.id), key: String(auth.key) },
     transports: socketIoTransports(),
-    upgrade: !import.meta.dev,
+    upgrade: !pollingOnly,
     reconnectionAttempts: 10,
   }
 }

docker-compose.prod.yml

@@ -6,9 +6,15 @@
 #   docker network create reverse   # si reverse-proxy externe
 #
 # Socket.IO : le client utilise `/api/socket.io` (même origine que le front).
+# apps/web/.env : ne pas définir SESAME_SOCKET_IO_POLLING_ONLY (ou =0) → WebSocket en prod.
 # Reverse-proxy : router tout le trafic (HTTP + WebSocket) vers le port Nuxt (3000) ;
 # Nuxt proxifie `/api/**` vers l'API interne (SESAME_APP_API_URL=http://127.0.0.1:4000).
 #
+# Test WebSocket avant prod :
+#   SESAME_SOCKET_IO_POLLING_ONLY=0 yarn workspace @libertech-fr/sesame-orchestrator_web build
+#   node apps/web/.output/server/index.mjs
+#   → panneau debug Socket.IO : transport "websocket"
+#
 # Démarrage :
 #   docker compose -f docker-compose.prod.yml up -d