fix: update Socket.IO configuration and improve API URL handling

- Updated the default API URL in nuxt.config.ts to use 127.0.0.1 for consistency.
- Enhanced the resolveSocketApiOrigin function to ensure proper origin resolution for Socket.IO connections.
- Removed redundant proxy configuration for Socket.IO in route rules.
- Added comments in docker-compose.prod.yml to clarify Socket.IO and reverse-proxy setup instructions.

Author: tacxou

apps/web/nuxt.config.ts

@@ -6,7 +6,7 @@ import * as consola from 'consola'
 import setupApp from './src/server/extension.setup'
 import { loadingBarHijackFilter } from './src/composables/useLoadingBarHijackFilter'
 
-const SESAME_APP_API_URL = process.env.SESAME_APP_API_URL || 'http://localhost:4002'
+const SESAME_APP_API_URL = process.env.SESAME_APP_API_URL || 'http://127.0.0.1:4000'
 /** URL API exposée au navigateur (WebSocket). Ex. http://mactacx:4002 si l'API est joignable sur ce host. */
 const SESAME_APP_PUBLIC_API_URL = process.env.SESAME_APP_PUBLIC_API_URL || ''
 const SESAME_ALLOWED_HOSTS = process.env.SESAME_ALLOWED_HOSTS ? process.env.SESAME_ALLOWED_HOSTS.split(',') : []
@@ -263,9 +263,6 @@ export default defineNuxtConfig({
       },
     },
     routeRules: {
-      '/socket.io': {
-        proxy: `${SOCKET_IO_PROXY_TARGET}/socket.io`,
-      },
       '/api/**': {
         proxy: `${SESAME_APP_API_URL}/**`,
       },

apps/web/src/composables/useSocketApiOrigin.ts

@@ -1,19 +1,21 @@
 /**
  * Origine Socket.IO côté navigateur.
- * En dev/prod, le client se connecte à la même origine que le front ; Nitro/Vite proxifient `/socket.io` vers l'API.
+ * Par défaut : même origine que le front (Nitro/Vite proxifient `/socket.io` vers l'API).
+ * Si `SESAME_APP_PUBLIC_API_URL` est défini : connexion directe à l'API (requis quand le
+ * reverse-proxy route `/socket.io` vers le port 4000 ou que le proxy Nitro n'est pas joignable).
  */
 export function resolveSocketApiOrigin(): string {
-  if (import.meta.client) {
-    return window.location.origin
-  }
-
-  const appConfig = useAppConfig()
   const runtimeConfig = useRuntimeConfig()
   const configuredPublic = `${runtimeConfig.public.socketApiUrl || ''}`.trim()
 
   if (configuredPublic) {
     return new URL(configuredPublic).origin
   }
 
+  if (import.meta.client) {
+    return window.location.origin
+  }
+
+  const appConfig = useAppConfig()
   return `${appConfig.baseUrl || ''}`.replace(/\/$/, '')
 }

apps/web/src/layouts/default.vue

@@ -24,6 +24,7 @@ import { IdentityState } from '~/constants/enums'
 import { useIdentityStateStore } from '~/stores/identityState'
 import { loadingBarDefaults } from '~/composables/useLoadingBarHijackFilter'
 import { attachSocketIoDebug } from '~/composables/useSocketIoDebug'
+import { resolveSocketApiOrigin } from '~/composables/useSocketApiOrigin'
 import { io, type Socket } from 'socket.io-client'
 
 export default defineNuxtComponent({
@@ -158,7 +159,7 @@ export default defineNuxtComponent({
 
         this.disconnectBackendsSocket()
 
-        this.socket = io('/core/backends', {
+        this.socket = io(`${resolveSocketApiOrigin()}/core/backends`, {
           path: '/socket.io',
           query: { id: String(id), key: String(key) },
           transports: ['polling'],

apps/web/src/pages/settings/cron.vue

@@ -220,6 +220,7 @@
 import type { LocationQueryValue } from 'vue-router'
 import { reactive, ref } from 'vue'
 import { attachSocketIoDebug } from '~/composables/useSocketIoDebug'
+import { resolveSocketApiOrigin } from '~/composables/useSocketApiOrigin'
 import { io, type Socket } from 'socket.io-client'
 import { NewTargetId } from '~/constants/variables'
 
@@ -596,7 +597,7 @@ export default defineNuxtComponent({
       this.logsFollowTail = true
       this.logsLoading = true
 
-      this.logsSocket = io('/core/cron', {
+      this.logsSocket = io(`${resolveSocketApiOrigin()}/core/cron`, {
         path: '/socket.io',
         query: { id: String(id), key: String(key) },
         transports: ['polling'],

apps/web/src/server/middleware/socket-io-proxy.ts

@@ -0,0 +1,16 @@
+import { defineEventHandler, proxyRequest } from 'h3'
+
+const DEFAULT_API_URL = 'http://127.0.0.1:4000'
+
+function resolveApiBaseUrl(): string {
+  return (process.env.SESAME_APP_API_URL || DEFAULT_API_URL).replace(/\/$/, '')
+}
+
+export default defineEventHandler(async (event) => {
+  const url = event.node.req.url || ''
+  if (!url.startsWith('/socket.io')) {
+    return
+  }
+
+  return proxyRequest(event, `${resolveApiBaseUrl()}${url}`)
+})

docker-compose.prod.yml

@@ -5,6 +5,14 @@
 #   docker network create sesame
 #   docker network create reverse   # si reverse-proxy externe
 #
+# Socket.IO (apps/web/.env) :
+#   SESAME_APP_API_URL=http://127.0.0.1:4000
+#   # Si le reverse-proxy route /socket.io vers le port 4000 (API) au lieu du 3000 (Nuxt) :
+#   # SESAME_APP_PUBLIC_API_URL=https://votre-domaine
+#
+# Reverse-proxy : router /socket.io vers le port 3000 (Nuxt proxifie vers l'API)
+# ou directement vers le port 4000 (définir SESAME_APP_PUBLIC_API_URL ci-dessus).
+#
 # Démarrage :
 #   docker compose -f docker-compose.prod.yml up -d