Browser can't get socket.io.js file using express

Question

I have problem with socket.io examples. My browser can't get socket.io.js file (404 error in console).

Code that work:

server.js

var app = require('express').createServer()
  , io = require('socket.io').listen(81);

app.listen(80);

app.get('/', function (req, res) {
  res.sendfile(__dirname + '/index.html');
});

io.sockets.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
});

index.html

<script src="http://192.168.1.104:81/socket.io/socket.io.js"></script>
<script>
  var socket = io.connect('http://192.168.1.104:81');
  socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
  });
</script>

But this one not:

server.js

var app = require('express').createServer()
  , io = require('socket.io').listen(app);

app.listen(80);

app.get('/', function (req, res) {
  res.sendfile(__dirname + '/index.html');
});

io.sockets.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
});

index.html

<script src="http://192.168.1.104:80/socket.io/socket.io.js"></script>
<script>
  var socket = io.connect('http://192.168.1.104:80');
  socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
  });
</script>

In this case my browser can't get socket.io.js file.

Answer 1

EDIT : all the below text is wrong until the next "EDIT". Leaving it there as a trace...

there is one thing you should know, two things you should do + all needed Express doc is here :

1. Express filter/handle every access to your node server. It means that when you're trying to access your socket.io script file, Express tries to find it in the routes you declared and fails as you didn't (and you were right not to).

2. Most important : declare a static, non "computed" folder in express where you will put all your static files (css, client scripts, images) :

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

   This line must be put in you app.configure call, before app.use(app.router) (I actually put it first)

   I like to have this /static/scripts ; /static/css ; /static/img folder organisation but you're free to adapt to your needs.

3. Change the link to the socket.io script file to a relative path (optional but strongly advised) : src='/static/scripts/socket.io/socket.io.js'

EDIT : I am wrong, very very wrong and I am sorry for that. Socket.io generates the different path / files needed and you don't have to declare them nor to copy any client script files.

Please try switching the <script src="http://192.168.1.104:81/socket.io/socket.io.js"></script> client line to the normal relative one <script src="/socket.io/socket.io.js"></script> because that's the only difference between your code and the express guide code.

Answer 2

What Express version are you using?

The API has changed from Express 2.x to 3.x, so the answer is in the Socket.IO compatibility section at the Migrating from 2.x to 3.x wiki:

Socket.IO's .listen() method takes an http.Server instance as an argument.
As of 3.x, the return value of express() is not an http.Server instance. To get Socket.IO working with Express 3.x, make sure you manually create and pass your http.Server instance to Socket.IO's .listen() method:

var app = express()
  , http = require('http')
  , server = http.createServer(app)
  , io = require('socket.io').listen(server);

server.listen(3000);