Here is the code of my socket server
const io = require("socket.io")(8080, {
cors: {
// origin: "http://localhost:3000",
origin: "https://mern-bubble.herokuapp.com",
},
});
and herer is my client side code
useEffect(() => {
// socket.current = io("ws://localhost:8800");
socket.current = io("ws://mern-bubble.herokuapp.com:8800");
socket.current.on("getUser", (data) => {
console.log("data from socket", data);
dispatch(updateUserInfo(data));
});
}, [dispatch]);
It works completely fine when i am working on localhost, But when i deploy my project on heroku, socket.io is not responding anything ?
So I think that port 8800 isn't open on heroku. You should stick to port 3000 and try again. https://devcenter.heroku.com/articles/node-websockets#option-2-socket-io
Heroku's port are dynamically assigned when starting a Dyno. Instead of hard coding the port 8800, use the environment variable $PORT instead.
First make sure you have entered the command:
heroku features:enable http-session-affinity
I was stuck on a similar problem when I had everything correct for days, I just needed to enable it on cli. Reference - https://devcenter.heroku.com/articles/node-websockets
On client side, you should enter the url of the site with https:// (conditionally depending on current window location or node_env value):
const newSocket = io('https://my-app.herokuapp.com',
{ transports: ["websocket"] }
);
On server side my MERN app worked by having a single server with a port of 5050 and not having to set anything in particular for the socket server:
import { Server } from "socket.io";
const server = http.createServer(app)
export const io = new Server(server, {
cors: {
origin: 'https://my-app.herokuapp.com',
methods: ["GET", "POST"],
// allowedHeaders: ["my-custom-header"],
credentials: true
}
})
If it works locally and all your urls are correct, try to enter the command mentioned above or look at the heroku node websocket documents.