Couldn't establish connection between socket.io client (4.2.0) to socket server(4.2.0)
See original GitHub issueThere 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.
Issue Analytics
- State:
- Created 2 years ago
- Reactions:1
- Comments:8 (4 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
same issue in vue 3.2
4.2 client cannot connect 4.2 server. but 4.1.3 client can connect 4.2 server.
It seems there is actually a problem with some bundlers (see here), I’m digging into this.