Socket.io is working on localhost but not working after deploying heroku?

Question

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 ?

Answer 1

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

Answer 2

Heroku's port are dynamically assigned when starting a Dyno. Instead of hard coding the port 8800, use the environment variable $PORT instead.

Answer 3

Replace your PORT like this.

const port = process.env.PORT || 3200
const io = require("socket.io")(port, {
cors: {
  // origin: "http://localhost:3000", 
     origin: "https://mern-bubble.herokuapp.com",
    }, 
});

Answer 4

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.