fix: Resolve socket mixed content error by making the socket connection URL environment-aware for production and development, and adding Vite client type definitions.
All checks were successful
Build and Deploy / build (push) Successful in 1m18s

This commit is contained in:
2025-12-16 17:33:05 +01:00
parent 8a40bc6ca4
commit 58641b34a5
3 changed files with 17 additions and 1 deletions

View File

@@ -9,3 +9,4 @@
- [Game Battlefield & Manual Mode](./devlog/2025-12-14-234500_game_battlefield_plan.md): Completed. - [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. - [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. - [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.

View File

@@ -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 `/// <reference types="vite/client" />` 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.

View File

@@ -1,7 +1,8 @@
/// <reference types="vite/client" />
import { io, Socket } from 'socket.io-client'; 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 { class SocketService {
public socket: Socket; public socket: Socket;