Node.js /socket.io/socket.io.js not found express 4.0

Question

So I'm trying to get chat working on my website, and when I was testing locally it worked great, because port 8080 on my localhost was available and all that good stuff. But now I pushed my code to my Heroku app, and when I try and load my chat page, I get the error stating that it can't get localhost:8080/socket.io/socket.io.js.

I've seen node.js /socket.io/socket.io.js not found and tried the suggestions, but none worked, even moving the socket.io.js file into a resource file did not work. I'm guessing this is because I'm using express 4.0?

Any help would be appreciated Thanks

Edit: So to add more details, since my question could seem a little vague, here is my relevant app.js code:

 var client = require('socket.io').listen(8080).sockets;

In my jade file for the chat page, I have:

 script (src = `'http://localhost:8080/socket.io/socket.io.js`')

and later on

 var socket = io.connect(`'http://localhost:8080`');

and all this works on localhost (I load up on port 5000, socket.io is connected to port 8080). I do this using 'foreman start' with the heroku toolbelt.

When I try and change these to work on heroku, it breaks and I'm not sure how to fix it. I hope this clarifies the question a bit.

Edit 2: I'm running: express 4.0.0

socket.io 0.9.16

node 0.10.x

Thanks

Answer 1

Do you have an explicit route in express which catches all other routes? Something like this perhaps:

app.get("/", handlers.home);
app.get("/..." ...);
...
app.get("*", handlers.error);

This might keep socket.io from being able to host it's own js file for the client. There is an easy way to fix this, since you probably already have a public or static folder setup in express. Something like:

app.use(express.static("public"));

Make a new folder called socket.io and copy over the appropriate socket.io.js file into said folder, and all should be well. However note that there are two files named socket.io.js!! So, if you see something like "Uncaught ReferenceError: require is not defined" it means you copied the "node-ey" server side file. Here is the correct client file to copy:

app_dir/node_modules/socket.io/node_modules/socket.io-client/dist/socket.io.min.js

Note @BHendricks: I would have just posted as a reply to your comment, but I currently lack the required reputation.

Edit: The OPs question probably has more to do with the "localhost" issue. When connecting from a client (say your home IP), as far as your browser knows - localhost implies a connection with the machine which is locally hosting stuff. Since your home machine (or phone) does not host socket.io, this is failing.

What you need to do is have your server embed the socket connection information (either a fully qualified hostname, ip etc). This can be done when the server "renders" the page with the client connection.

Answer 2

What happens when you go to http://localhost:8080/socket.io/socket.io.js?

Does it 404? If it does you need to make sure you have it in a directory that Express is set to serve statically.

app.use(express.static(__dirname + '/public'));

Then put your socket.io.js file in public/socket.io/socket.io.js (relative to your app.js file)

Restart your server and see if that fixes it.

Basically, Express doesn't serve files statically from the file system unless you explicitly tell it where to map from.