Couldn't establish connection between socket.io client (4.2.0) to socket server(4.2.0)

[alpha-titan]

There are some bugs in the 4.2.0 client, I am not able to connect to the server.

I have enabled CORS on the socket server as well as the express server

I was stuck at this issue for hours tried everything no luck establish a WebSocket connection with the server, finally downgraded to 4.1.3

To reproduce

• Create a React app with Vite js

• npm init vite@latest react_app

• install socket.io-client 4.2.0

• Create an express server running on a different port

• install socket.io 4.2.0

Client

Add the below code in app.jsx

const [socket, setSocket] = useState();
const handleSocket = () => {
        newSocket = io("ws://localhost:4000"); // HTTP didn't work either
	// newSocket.connect(); //? manual connection didn't work
	console.log(newSocket.connected); // false
        setSocket(newSocket); 
}
useEffect(()=>{
         handleSocket();
},[setSocket])

This exact code is working when downgrading the client socket version to 4.1.3

Server

const express = require("express");
const cors = require("cors");
const http = require("http");
const { Server } = require("socket.io");
const app = express();
app.use(cors());
const httpServer = http.createServer(app);
const io = new Server(httpServer, {
	cors: {
		origin: "*",
	},
});

io.on("connection", (serverSocket) => {
	serverSocket.emit("welcome", { data: "Welcome to electron chat" });
	//? broadcast the event to the namspace
	console.log(serverSocket.id);
	io.of("/").emit("messageFromServer", {
		message: `${serverSocket.id} has joined`,
	});
	//? listen for messageFromClient event in the main namespace
	serverSocket.on("disconnect", () => {
		console.log(`${socket.id} has disconnected`);
	});
       
});

httpServer.listen(4000, () => {
	console.log("Server running on 4000");
});

Upon inspecting Network for ws connections

using 4.1.3 connection is created

using 4.2.0 pending

when I use the CDN and comment out the import it works again.

[darrachequesne]

I wasn't able to reproduce: https://github.com/socketio/socket.io-fiddle/tree/sample-react-app

Could you please check?

Note: could it be a problem of integrity here?

[swearl]

same issue in vue 3.2

4.2 client cannot connect 4.2 server.
but 4.1.3 client can connect 4.2 server.

[darrachequesne]

It seems there is actually a problem with some bundlers (see here), I'm digging into this.

[alpha-titan]

Hi Sorry for the late reply,here is the link to my repo I made a sample app to reproduce the error

[darrachequesne]

@alpha-titan thanks! I've suggested a temporary workaround here: vitejs/vite#4798 (comment)

[alpha-titan]

Thanks @darrachequesne

[Zefau]

I had the same issue.

Instead of attaching the httpServer directly via

const io = new Server(httpServer, {
	cors: {
		origin: "*",
	},
});

I'm using this now:

const io = new Server({
	cors: {
		origin: "*",
	},
});

io.attach(httpServer);

Worked for me for some reason. Hope it helps.

[darrachequesne]

It should be fixed by this commit, included in version 4.3.x.