Nodejs在服务器上的协作绘图

Question

我找到了一个教程，帮助我建立了一个基本的实时协作绘图页面。 它完全适用于localhost：8080，但我想在我的服务器上启动它，我遇到了一些问题。

app.js

    // Including libraries

    var app = require('http').createServer(handler),
    io = require('socket.io').listen(app),
    static = require('node-static'); // for serving files

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

    // This is the port for our web server.
    // you will need to go to http://localhost:8080 to see it
    app.listen(8080);

    // If the URL of the socket server is opened in a browser
    function handler (request, response) {

      request.addListener('end', function () {
        fileServer.serve(request, response); // this will return the correct file
      });
    }

    // Delete this row if you want to see debug messages
    io.set('log level', 1);

    // Listen for incoming connections from clients
    io.sockets.on('connection', function (socket) {

      // Start listening for mouse move events
      socket.on('mousemove', function (data) {

        // This line sends the event (broadcasts it)
        // to everyone except the originating client.
        socket.broadcast.emit('moving', data);
      });
    });

的script.js

$(function() {

  // This demo depends on the canvas element
  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 (the port is set in app.js)
  var url = 'http://localhost:8080';

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

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

  // A flag for drawing activity
  var drawing = false;

  var clients = {};
  var cursors = {};

  var socket = io.connect(url);

  socket.on('moving', function (data) {

    if(! (data.id in clients)){
      // a new user has come online. create a cursor for them
      cursors[data.id] = $('<div class="cursor">').appendTo('#cursors');
    }

    // Move the mouse pointer
    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);
    }

    // Saving 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;

    // Hide the instructions
    instructions.fadeOut();
  });

  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, as it is
    // not received in the socket.on('moving') event above

    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){

        // Last update was more than 10 seconds ago.
        // This user has probably closed the page

        cursors[ident].remove();
        delete clients[ident];
        delete cursors[ident];
      }
    }

  },10000);

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

});

当我把它放在我的服务器上时，它只有在我在同一个浏览器上打开两个页面时才有效，但在其他计算机上没有打开。 我认为这是因为我在代码上对localhost进行了调用。 但是，我不知道用什么来代替它们。

我在我的服务器上安装了所有节点包，并且我的启动方式与我在localhost上启动它的方式相同：

node assets/js/app.js

我得到的输出是：

node assets/js/app.js 
   info  - socket.io started
   warn  - error raised: Error: listen EADDRINUSE

那个警告，我不知道它在本地机器上。

Answer 1

使用服务器IP地址而不是localhost。

在app.js app.listen(port, ip)

在script.js中， var url = 'http://<ip>:8080';

Answer 2

我不是节点人。 我建议你观看： Node / Express：EADDRINUSE，已经在使用的地址 - 杀死服务器

EADDRINUSE可能意味着某些东西已经在计算机上的同一端口/同一接口上运行。 看看答案，他们建议您查找旧节点实例，如果这不起作用。 只是尝试绑定8080以外的另一个端口。

是的，正如所说@vinayr不绑定localhost，你的客户端只会尝试连接本地连接。