asd

Bit-Barron · Nov 2, 2024 · 0e7f026 · 0e7f026
1 parent a1e6293
commit 0e7f026
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 40 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -21,21 +21,25 @@ services:
       - proxy
     labels:
       - 'traefik.enable=true'
-      # HTTP Router
+
+      # Main application
       - 'traefik.http.routers.youtubepedia.rule=Host(`youtubepedia.barron.agency`)'
       - 'traefik.http.routers.youtubepedia.entrypoints=websecure'
       - 'traefik.http.routers.youtubepedia.tls=true'
       - 'traefik.http.routers.youtubepedia.tls.certresolver=letsencrypt'
-      # Middleware for websocket
-      - 'traefik.http.middlewares.sio.headers.customrequestheaders.X-Forwarded-Host=youtubepedia.barron.agency'
-      - 'traefik.http.middlewares.sio.headers.customrequestheaders.X-Forwarded-Proto=https'
-      - 'traefik.http.middlewares.sio.headers.customrequestheaders.X-Forwarded-Port=443'
-      # Service configuration
       - 'traefik.http.services.youtubepedia.loadbalancer.server.port=3000'
-      # WebSocket specific configuration
-      - 'traefik.http.routers.youtubepedia.middlewares=sio'
-      - 'traefik.http.middlewares.youtubepredia-compress.compress=true'
-      - 'traefik.http.routers.youtubepedia.middlewares=youtubepredia-compress'
+
+      # Socket.IO specific route
+      - 'traefik.http.routers.youtubepedia-socket.rule=Host(`youtubepedia.barron.agency`) && PathPrefix(`/socket.io`)'
+      - 'traefik.http.routers.youtubepedia-socket.entrypoints=websecure'
+      - 'traefik.http.routers.youtubepedia-socket.tls=true'
+      - 'traefik.http.routers.youtubepedia-socket.tls.certresolver=letsencrypt'
+      - 'traefik.http.routers.youtubepedia-socket.service=youtubepedia'
+
+      # Middleware for websocket and long polling
+      - 'traefik.http.middlewares.sio.headers.customrequestheaders.Connection=upgrade'
+      - 'traefik.http.middlewares.sio.headers.customrequestheaders.Upgrade=websocket'
+      - 'traefik.http.routers.youtubepedia-socket.middlewares=sio'
 
 networks:
   proxy:

diff --git a/src/lib/server/socket.ts b/src/lib/server/socket.ts
@@ -8,37 +8,63 @@ declare global {
 	var __socketio: Server | null;
 }
 
+const SOCKET_CONFIG: Partial<ServerOptions> = {
+	path: '/socket.io',
+	cors: {
+		origin: dev ? ['http://localhost:3000'] : ['https://youtubepedia.barron.agency'],
+		methods: ['GET', 'POST'],
+		credentials: true,
+		allowedHeaders: ['Content-Type', 'Authorization', 'X-Requested-With']
+	},
+	transports: ['polling', 'websocket'],
+	allowUpgrades: true,
+	upgradeTimeout: 10000,
+	pingInterval: 25000,
+	pingTimeout: 20000,
+	connectTimeout: 45000,
+	allowEIO3: true,
+	maxHttpBufferSize: 1e8,
+	perMessageDeflate: {
+		threshold: 1024
+	},
+	httpCompression: {
+		threshold: 1024
+	},
+	cookie: {
+		name: 'io',
+		path: '/',
+		httpOnly: true,
+		sameSite: 'lax'
+	}
+};
+
 export const initSocketIO = (httpServer: HTTPServer): void => {
 	if (!global.__socketio) {
 		console.log('Initializing Socket.IO server...');
-		const io = new Server(httpServer, {
-			path: '/socket.io',
-			cors: {
-				origin: dev ? ['http://localhost:3000'] : ['https://youtubepedia.barron.agency'],
-				methods: ['GET', 'POST'],
-				credentials: true
-			},
-			transports: ['polling', 'websocket'],
-			allowUpgrades: true,
-			upgradeTimeout: 10000,
-			pingInterval: 10000,
-			pingTimeout: 5000,
-			cookie: {
-				name: 'io',
-				path: '/',
-				httpOnly: true,
-				sameSite: 'strict'
-			},
-			allowEIO3: true,
-			connectTimeout: 45000
-		} as Partial<ServerOptions>);
+		const io = new Server(httpServer, SOCKET_CONFIG);
 
 		io.engine.on('connection_error', (err) => {
 			console.log('Connection error:', err);
 		});
 
+		io.engine.on('initial_headers', (headers: Record<string, string>) => {
+			headers['Access-Control-Allow-Credentials'] = 'true';
+			if (dev) {
+				headers['Access-Control-Allow-Origin'] = 'http://localhost:3000';
+			} else {
+				headers['Access-Control-Allow-Origin'] = 'https://youtubepedia.barron.agency';
+			}
+		});
+
 		io.on('connection', (socket) => {
-			console.log('Client connected', socket.id, 'transport:', socket.conn.transport.name);
+			console.log(
+				'Client connected',
+				socket.id,
+				'transport:',
+				socket.conn.transport.name,
+				'headers:',
+				socket.handshake.headers
+			);
 
 			const userId = socket.handshake.auth.userId;
 			if (userId) {
@@ -49,6 +75,10 @@ export const initSocketIO = (httpServer: HTTPServer): void => {
 			socket.on('disconnect', (reason) => {
 				console.log('Client disconnected', socket.id, 'reason:', reason);
 			});
+
+			socket.on('error', (error) => {
+				console.error('Socket error:', error);
+			});
 		});
 
 		global.__socketio = io;

diff --git a/src/lib/socket.ts b/src/lib/socket.ts
@@ -3,34 +3,56 @@ import { io, type Socket } from 'socket.io-client';
 
 export const initSocket = (userId: string): Socket | null => {
 	if (browser) {
-		const socket = io(window.location.origin, {
+		const socketUrl = window.location.origin;
+		console.log('Initializing socket connection to:', socketUrl);
+
+		const socket = io(socketUrl, {
 			path: '/socket.io',
 			auth: { userId },
+			transports: ['polling', 'websocket'],
 			reconnection: true,
-			reconnectionDelay: 1000,
 			reconnectionAttempts: 5,
-			transports: ['polling', 'websocket'], // Start with polling first
-			upgrade: true,
-			rememberUpgrade: true,
-			timeout: 10000,
-			forceNew: true
+			reconnectionDelay: 1000,
+			reconnectionDelayMax: 5000,
+			timeout: 20000,
+			autoConnect: true,
+			withCredentials: true
 		});
 
 		socket.on('connect', () => {
-			console.log('Connected to socket server with transport:', socket.io.engine.transport.name);
+			console.log(
+				'Connected to socket server',
+				'ID:',
+				socket.id,
+				'Transport:',
+				socket.io.engine.transport.name
+			);
 		});
 
 		socket.on('connect_error', (error) => {
 			console.error('Socket connection error:', error);
+			// Log additional debugging information
+			console.log('Current transport:', socket.io.engine.transport.name);
+			// console.log('Available transports:', socket.io.engine.transports);
 		});
 
 		socket.on('disconnect', (reason) => {
 			console.log('Disconnected:', reason);
 			if (reason === 'io server disconnect') {
+				// the disconnection was initiated by the server, reconnect automatically
 				socket.connect();
 			}
 		});
 
+		socket.on('error', (error) => {
+			console.error('Socket error:', error);
+		});
+
+		// Monitor transport changes
+		socket.io.engine.on('upgrade', (transport) => {
+			console.log('Transport upgraded to:', transport.name);
+		});
+
 		return socket;
 	}
 	return null;