我發現了一個教程,幫助我建立了一個基本的實時協作繪圖頁面。它在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
那警告,我不明白它在本地機器上。
如何把「你的網絡服務器的URL」而不是本地主機?你開始在你的服務器上,這可能有一個IP或域的權利? – Prinzhorn
有沒有必要把網址 – supernova