From 58641b34a583e29fd3680e3914c94f2dc475ec6e Mon Sep 17 00:00:00 2001 From: dnviti Date: Tue, 16 Dec 2025 17:33:05 +0100 Subject: [PATCH] fix: Resolve socket mixed content error by making the socket connection URL environment-aware for production and development, and adding Vite client type definitions. --- docs/development/CENTRAL.md | 1 + .../2025-12-16-183000_fix_socket_mixed_content.md | 14 ++++++++++++++ src/client/src/services/SocketService.ts | 3 ++- 3 files changed, 17 insertions(+), 1 deletion(-) create mode 100644 docs/development/devlog/2025-12-16-183000_fix_socket_mixed_content.md diff --git a/docs/development/CENTRAL.md b/docs/development/CENTRAL.md index 1cf23a1..f70c6e7 100644 --- a/docs/development/CENTRAL.md +++ b/docs/development/CENTRAL.md @@ -9,3 +9,4 @@ - [Game Battlefield & Manual Mode](./devlog/2025-12-14-234500_game_battlefield_plan.md): Completed. - [Helm Chart Config](./devlog/2025-12-14-214500_helm_config.md): Completed. - [CSV Import Robustness](./devlog/2025-12-16-152253_csv_import_robustness.md): Completed. Enhanced CSV parser to dynamically map columns from headers, supporting custom user imports. +- [Fix Socket Mixed Content](./devlog/2025-12-16-183000_fix_socket_mixed_content.md): Completed. Resolved mixed content error in production by making socket connection URL environment-aware. diff --git a/docs/development/devlog/2025-12-16-183000_fix_socket_mixed_content.md b/docs/development/devlog/2025-12-16-183000_fix_socket_mixed_content.md new file mode 100644 index 0000000..7a769eb --- /dev/null +++ b/docs/development/devlog/2025-12-16-183000_fix_socket_mixed_content.md @@ -0,0 +1,14 @@ +# Fix Socket Mixed Content Error + +## Objective +Resolve the "Mixed Content" error preventing the Online Lobby and Deck Tester from functioning in the production Kubernetes environment. The application was attempting to connect to an insecure HTTP endpoint (`http://...:3000`) from a secure HTTPS page. + +## Changes +- **Client Socket Service**: Modified `client/src/services/SocketService.ts` to make the connection URL environment-aware. + - In **Production**: The URL is now `undefined`, allowing Socket.IO to automatically detect the current protocol (HTTPS) and domain (via Ingress), avoiding mixed content blocks. + - In **Development**: It retains the explicit `http://localhost:3000` (or hostname) to ensure connectivity during local development. +- **TypeScript Config**: Added a reference directive `/// ` to `SocketService.ts` to ensure `import.meta.env` is correctly typed during the build. + +## Verification +- Validated that `npm run build` succeeds without TypeScript errors. +- Confirmed that the fix aligns with standard Vite + Socket.IO production deployment patterns. diff --git a/src/client/src/services/SocketService.ts b/src/client/src/services/SocketService.ts index 49c7ffd..5ce3d8e 100644 --- a/src/client/src/services/SocketService.ts +++ b/src/client/src/services/SocketService.ts @@ -1,7 +1,8 @@ +/// import { io, Socket } from 'socket.io-client'; -const URL = `http://${window.location.hostname}:3000`; +const URL = import.meta.env.PROD ? undefined : `http://${window.location.hostname}:3000`; class SocketService { public socket: Socket;