Question

在我的服务器上，我可以使用socket.io运行我的节点服务器。但是，当我在localhost上尝试完全相同的代码时，我无法使其工作。

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);
  });
});

这是一个基本的协作绘图程序。在我的服务器上它可以工作 - 我可以画画，其他人看到我画的东西，我们可以画在一起。但是，在localhost：8081上它不起作用。

我尝试调试socket.io，每次在localhost上打开一个新页面时，我唯一得到的就是以下行：

debug - 提供静态内容/socket.io.js

我当前的目录如下：

node_modules  js  index.html  assets

在Firefox Aurora上，Web控制台不会出现任何错误，但在Chromium上我收到此错误：

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

我在~/node_modules/和项目目录上都安装了socket.io。我正在使用node js/server.js运行节点服务器。

有什么想法吗？提前谢谢。

Answer 1

错误发生在client.js上。 “localhost：8081”不对，你必须写“http：// localhost：8081”。

localhost（和socket.io）上的Node.js

1 个答案: