Serving the socket.io javascript file to a client via node.js/express

Question

I'm trying to get a sample client connection working with socket.io and express (specifically, this one: http://www.catonmat.net/blog/nodejs-modules-socketio/ with some pieces from the other examples at https://github.com/LearnBoost/socket.io/blob/master/examples/chat/app.js).

I've gotten most of the pieces set up and working - the server runs, and I can hit / to get the index.jade file to the browser. However, once that happens, it does nothing.

Server:

var io = require('socket.io');
var express = require('express')
, stylus = require('stylus')
, nib = require('nib');

var app = express.createServer()
var io = io.listen(app);

app.configure(function () {
  app.use(stylus.middleware({ src: __dirname + '/public', compile: compile }));
  app.use(express.static(__dirname + '/public'));
  app.set('views', __dirname);
  app.set('view engine', 'jade');

  function compile (str, path) {
    return stylus(str)
      .set('filename', path)
      .use(nib());
  };
});

app.get('/', function (req, res) {
  res.render('index', { layout: false });
});


app.listen(8080);

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

index.jade:

doctype 5
html
  head
    link(href='/stylesheets/style.css', rel='stylesheet')
    script(src='http://code.jquery.com/jquery-1.6.1.min.js')
    script(src='/socket.io/socket.io.js')
    script
      // socket.io specific code
      var socket = io.connect('http://localhost:8080');
      socket.on('connect', function () {
        alert('connected');
      });
      socket.on('news', function (data) {
          console.log(data);
          socket.emit('my other event', { my: 'data' });
        });
  body
    #chat

It appears that the server isn't serving /socket.io/socket.io.js (http://localhost:8080/socket.io/socket.io.js yields an error). What do I need to do to get express to serve that file? I can't find that in any of the examples.

Is there anything else I'm doing wrong here?

It appears I have this same issue - as of the newer version (3.x) of express, this example is broken: http://stackoverflow.com/a/10192084/135336 — fields, Jul 24 '12 at 17:31

score 10 · Answer 1 · edited Oct 25 '12 at 20:46

10

Using Socket.IO with Express 3 requires that you instantiate a http.Server to attach socket.io to:

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

This should work for you.

edited Oct 25 '12 at 20:46

floatingLomas

8,553
2
21
27

answered Jul 24 '12 at 21:42

Nathan Romano

7,016
3
19
18

score 2 · Answer 2 · answered Jan 17 '13 at 00:54

Some of the upgrade guides for using Express 3 with socket.io recommend passing an http.createServer to socket.io.

This works but it doesn't seem to serve the socket.io client file correctly. With a bit of testing I found it works if you pass what is returned from app.listen to socket.io:

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

Note for some of the people who have replied: it's not a file path issue. When using node + socket.io http server socket.io automatically intercepts the get call to '/socket.io/socket.io.js' and serves the client file for you. It doesn't actually exist in the web file structure. This functionality appeared broken when using Express 3.

redhotvengeance · Answer 3 · 2012-07-24T18:05:12.443

I'm assuming the error is a 404 - you're not setting up ExpressJS to serve static files. When you request /socket.io/socket.io.js, it isn't finding a route, and not serving static files, so it returns back a 404.

Generally, you'd want to set up a folder that will be used to serve static files, like public. Inside it, place your socket.io folder, and inside that the socket.io.js file. Then, you'd add this to your app.configure block:

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

Now ExpressJS knows to serve the JS file when the request is made. You can read more about ExpressJS static configuration here.

Update:
My mistake - I see you've already set up the static server. Are your directory paths correct? Is the socket.io folder in your public folder? Without seeing your specific error, it's hard to know what the issue may be.

Serving the socket.io javascript file to a client via node.js/express

3 Answers3