Node.js on localhost (and socket.io)

Question

On my server, I am able to run my node server just fine with socket.io. However, when I try pretty much the exact same code on localhost, I can't make it work.

client.js

$(function() {

  /* Check for a <canvas> */
  if (! ("getContext" in document.createElement("canvas"))) {
    alert("Sorry, it looks like your browser does not support canvas!");
    return false;
  }

  /* The URL of your web server and the port */
  //var url = "http://57o9.org:8081";
  var url = "localhost:8081";

  var doc = $(document);
  var win = $(window);
  var canvas = $("#canvas");
  var ctx = canvas[0].getContext("2d");

  /* Generate an unique ID based on time */
  var id = Math.round($.now() * Math.random());

  var drawing = false;

  var clients = {};
  var cursors = {};
  var socket = io.connect(url);

  socket.on("moving", function(data) {
    /* Create a new cursor for new users */
    if (! (data.id in clients)) {
      cursors[data.id] = $("<div class=\"cursor\">").appendTo("#cursors");
    }

    /* Update mouse pointer data */
    cursors[data.id].css({
      "left" : data.x,
      "top" : data.y
    });

    /* Is the user drawing? */
    if (data.drawing && clients[data.id]) {

      /* Draw a line on the canvas. clients[data.id] holds
         the previous position of this user"s mouse pointer */

      drawLine(clients[data.id].x, clients[data.id].y, data.x, data.y);
    }

    /* Save the current client state */
    clients[data.id] = data;
    clients[data.id].updated = $.now();
  });

  var prev = {};

  canvas.on("mousedown", function(e) {
    e.preventDefault();
    drawing = true;
    prev.x = e.pageX;
    prev.y = e.pageY;
  });

  doc.bind("mouseup mouseleave", function() {
    drawing = false;
  });

  var lastEmit = $.now();

  doc.on("mousemove",function(e) {
    if ($.now() - lastEmit > 30) {
      socket.emit("mousemove", {
        "x": e.pageX,
        "y": e.pageY,
        "drawing": drawing,
        "id": id
      });

      lastEmit = $.now();
    }

    /* Draw a line for the current user"s movement */
    if (drawing) {
      drawLine(prev.x, prev.y, e.pageX, e.pageY);

      prev.x = e.pageX;
      prev.y = e.pageY;
    }
  });

  /* Remove inactive clients after 10 seconds of inactivity */
  setInterval(function() {
    for (ident in clients) {
      if ($.now() - clients[ident].updated > 10000) {
        cursors[ident].remove();
        delete clients[ident];
        delete cursors[ident];
      }
    }

  }, 10000);

  function drawLine(fromx, fromy, tox, toy) {
    fromx -= canvas[0].offsetLeft;
    tox -= canvas[0].offsetLeft;
    fromy -= canvas[0].offsetTop;
    toy -= canvas[0].offsetTop;

    ctx.moveTo(fromx, fromy);
    ctx.lineTo(tox, toy);
    ctx.stroke();
  }
});

server.js

/* Include libraries */
var app = require('http').createServer(handler);
var io = require('socket.io').listen(app);
io.set("log level", 1); // Disable socket.io logging
var nodeStatic = require('node-static');

/* This will make all the files in the current folder accessible from the web */
var fileServer = new nodeStatic.Server("./");

/* Set up server port */
app.listen(8081);

/* Check if the URL of the socket server is opened in a browser */
function handler(request, response) {
  request.addListener("end", function() {
    fileServer.serve(request, response); // Return the correct file
  });
}

/* Listen for incoming connections from clients */
io.sockets.on("connection", function (socket) {
  socket.on("mousemove", function (data) {
    socket.broadcast.emit("moving", data);
  });
});

It's a basic collaborative drawing program. On my server it works - I can draw and other people see what I draw and we can draw together. However, on localhost:8081 it doesn't work.

I tried to debug socket.io and the only thing I get is the following line every time I open a new page on localhost:8081.

debug - served static content /socket.io.js

My current directory looks like:

node_modules  js  index.html  assets

On Firefox Aurora, the Web Console doesn't give any errors, but on Chromium I get this error:

Failed to load resource http://0.0.31.145:8081/socket.io/1/?t=1349017485579

I have socket.io installed both on ~/node_modules/ and on the project directory. I'm running the node server with node js/server.js.

Any ideas? Thank you in advance.

Answer 1

The error is on client.js. "localhost:8081" is not right, you have to write "http://localhost:8081".