question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Screenshot 2021-09-20 at 11 11 07 PM

using 4.2.0 pending

Screenshot 2021-09-20 at 11 13 34 PM

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

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:1
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

3reactions
swearlcommented, Sep 23, 2021

same issue in vue 3.2

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

1reaction
darrachequesnecommented, Sep 23, 2021

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Troubleshooting connection issues | Socket.IO
First and foremost, please note that disconnections are common and expected, even on a stable Internet connection:
Read more >
Elephant.io server error with Php( An error occurred while ...
I have a question for you, I'm using socket.io and elephant.io in my php application ...
Read more >
RFC 6455: The WebSocket Protocol
It is similarly intended to fail to establish a connection when data from other protocols, especially HTTP, is sent to a WebSocket server,...
Read more >
Connect timeout and execution timeout in nodejs driver
I'm working with MongoDB using NodeJS mongodb driver. ... This is used exclusively when we create a TCP/TLS socket. So I tried to...
Read more >
Bug listing with status RESOLVED with resolution FIXED as at ...
Bug listing with status RESOLVED with resolution FIXED as at 2022/12/24 19:46:07 ... Bug:296 - "can't build XFree86 4.2.0" status:RESOLVED resolution:FIXED ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found