2012-09-29 19 views
0

我發現了一個教程,幫助我建立了一個基本的實時協作繪圖頁面。它在localhost:8080上完美工作,但我想在我的服務器上啓動它,並遇到一些問題。Nodejs在服務器上的協作繪圖

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 

那警告,我不明白它在本地機器上。

+0

如何把「你的網絡服務器的URL」而不是本地主機?你開始在你的服務器上,這可能有一個IP或域的權利? – Prinzhorn

+0

有沒有必要把網址 – supernova

回答

1

使用服務器IP地址而不是本地主機。

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

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

+0

有沒有一種方法可以通過URL而不是IP? –

+1

當然...只是用ip地址替換ip – vinayr

+0

好吧,所以我試過了,但它仍然無法工作。我也將端口更改爲83而不是8080.我得到一個新的警告'警告 - 錯誤:錯誤:getaddrinfo ENOENT'。我有'app.listen(83,「http://57o9.org」)和'var url =「http://57o9.org:83」' –

1

我不是一個節點的傢伙。我建議你看:Node/Express: EADDRINUSE, Address already in use - Kill server

EADDRINUSE可能意味着某些東西已經在計算機上的相同端口/相同的接口上運行。看看答案,他們建議你查找舊的節點實例,如果這不起作用。只要嘗試綁定另一個端口比8080.

是的,正如所說的@vinayr不綁定在本地主機上,您的客戶端只會嘗試連接本地連接。

相關問題