Hey Folks 👋 I’m facing a frustrating issue while working with Socket.io (client-side using socket.io-client) in my project. Here's the setup and the exact problem I'm dealing with: ✅ Context: I'm using socket.io-client to connect to a WebSocket server (localhost:4000) via a wrapper utility: ``` import { io, Socket } from "socket.io-client"; let socket: Socket | null = null; export const connectSocket = (token: string): Socket => { if (!socket) { socket = io("http://localhost:4000/", { transports: ["websocket"], auth: { token }, }); socket.on("connect", () => console.log("✅ Socket connected")); socket.on("connect_error", (err) => console.error("❌ Socket connection error:", err) ); } return socket; }; ``` ❌ The Issues: WebSocket fails to connect initially I get this error in the browser console: ``` WebSocket connection to 'ws://localhost:4000/socket.io/?EIO=4&transport=websocket' failed: WebSocket is closed before the connection is established. ``` **Messages are received only after switching tabs** Even when the client emits messages, the listener doesn't pick them up in real-time. Oddly enough, the messages appear only when I switch tabs (i.e., the browser seems to "wake up" the tab and events get flushed). 🔍 What I suspect: - Possibly a CORS or handshake timing issue? - Something to do with how the event loop is managed in inactive tabs? - Or maybe transports: ['websocket'] is causing premature closure? ❓What I’m Looking For: - Has anyone faced this WebSocket + tab-switch + delayed message reception combo? - Any recommended fixes or debugging pointers for both connection failure and delayed message receipt? - Could this be server-side misconfiguration? Thanks in advance 🙏