Node.JS - Simple Socket.IO example not working. Getting debug - served static content /socket.io.js (Mac OSX/Localhost)

Question

I just began with node.js a few days ago and I'm know trying to use socket.io module. But it is not working as I was expecting. The example I am trying to reproduce is this one : http://robdodson.me/blog/2012/06/04/deploying-your-first-node-dot-js-and-socket-dot-io-app-to-heroku/

I know that the version of Express they are using is outdated so I updated my code to fit with the new versions of the modules they are using.

The problem I have is that my client doesn't get what my server is emitting, here is my server-side code :

var express = require('express'),
http = require('http'),
app = express(),
port = 8080, // Use 8079 for dev mode
server = http.createServer(app).listen(process.env.PORT || port, function(){
    console.log('Express server listening on port %d in %s mode', server.address().port,             app.settings.env);
}),
io = require('socket.io').listen(server),
routes = require('./routes');

// Configuration

app.configure(function() {
    app.set('views', __dirname + '/views');
    app.set('view engine', 'ejs');
    app.use(express.bodyParser());
    app.use(express.methodOverride());
    app.use(app.router);
    app.use(express.static(__dirname + '/public'));
});

app.configure('development', function() {
    app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

app.configure('production', function() {
    app.use(express.errorHandler());
});

// Heroku won't actually allow us to use WebSockets
// so we have to setup polling instead.
// https://devcenter.heroku.com/articles/using-socket-io-with-node-js-on-heroku
io.configure(function () {
    io.set("transports", ["xhr-polling"]);
    io.set("polling duration", 10);
});

// Routes
app.get('/', routes.index);

var status = "All is well.";
io.sockets.on('connection', function (socket) {
    io.sockets.emit('status', { status: status }); // note the use of io.sockets to emit but         socket.on to listen
    socket.on('reset', function (data) {
        status = "War is imminent!";
        io.sockets.emit('status', { status: status });
    });
});

And here is client-side :

<script src="http://localhost:8080/socket.io/socket.io.js">
    var socket = io.connect(document.location.href);
</script>
<div id="status"></div>
<button id="reset">Reset!</button>

So if I understood well, what I should get is "All is well" on the first time in the status div, and "War is imminent !" if I click reset. But all I get is nothing.

I tried those answers but I can't see any differences between the solution code and mine, or sometimes it's just outdated : 1. Node.js + socket.io: app on server not working correctly 2. NodeJS - Socket.IO Setup: served static content no handshake (Ubuntu on Rackspace Cloud Server)

I tried all of the solutions that were given in the other subjects but it definitely won't work for me. Every modules are correctly installed. I followed the steps given in the tutorial I followed at first. If anyone has any idea of what is going on or if anyone experienced the same issue you are welcome.

Thanks.

Answer 1

The reason your client isn't doing anything is because you aren't telling it to do anything. You need to assign handlers for it to do something. So, to fix this, you'd need to tell the reset button to use socket.emit() when being clicked, and you'd also need to assign a handler for the status event in order to change the contents of the div.

<script type="text/javascript" src="http://localhost:8080/socket.io/socket.io.js"></script>
<script type="text/javascript">
  var socket = io.connect(document.location.href);
</script>

<div id="status"></div>
<button id="reset" onclick="socket.emit('reset')">Reset!</button>

<script type="text/javascript">
  socket.on('status', function(data) {
    document.getElementById('status').innerHTML = data.status;
  });
</script>