我正在构建一个多用户画板并且遇到了一些问题并保留了所有当前连接的用户的更新列表。我试图找到通知所有现有客户端的最佳方式,并将现有客户端传递给新连接的客户端。我试图这样做的原因是,当一个客户端绘制一条线时,所有其他客户端在列表中找到该客户端,并将线条坐标添加到相应的数组中。使用WebSockets获取客户端列表
Server.js
var sys = require("sys");
var ws = require('websocket-server');
var server = ws.createServer({debug: true});
server.addListener("connection", function(conn) {
// When a message is received, broadcast it too all the clients
// that are currently connected.
conn.send('NEW_SERVER_MESSAGE:Welcome!');
conn.send('USER_CONNECTED:' + conn.id);
conn.addListener("message", function(msg){
switch(msg) {
case 'GET_ALL_ACTIVE_USERS':
server.manager.forEach(function(con) {
conn.broadcast('USER_CONNECTED:' + con.id);
});
break;
case 'UPDATE_CURSOR':
conn.broadcast(msg + '_' + conn.id);
break;
default:
conn.broadcast(msg);
break;
}
});
conn.addListener('close', function(msg) {
conn.broadcast('USER_DISCONNECTED:' + conn.id);
});
});
server.addListener("error", function(){
console.log(Array.prototype.join.call(arguments, ", "));
});
server.addListener("listening", function(){
console.log("Listening for connections...");
});
server.addListener("disconnected", function(conn){
console.log("<"+conn.id+"> disconnected.");
});
server.listen(8002);</code>
我的JS网络代码:
sketchPadNet = function (b,s) {
var self = this;
this.host = "ws://localhost:8002/server.js";
this.id = null;
this.users = [];
this.heightOffset = 53;
this.scene = s;
this.connected = b;
var User = function(id) {
this.id = id;
this.nickname = id;
this.lines = [];
this.position = "";
};
this.init = function() {
try {
socket = new WebSocket(self.host);
socket.onopen = function (msg) {
socket.send('GET_ALL_ACTIVE_USERS');
};
socket.onmessage = function (msg) {
var m = msg.data.split(':');
switch(m[0]) {
case 'USER_CONNECTED':
console.log('USER_CONNECTED');
var u = new User(m[1]);
u.lines = [];
u.nickname = u.id;
self.users.push(u);
console.log(self.users.length);
console.log(self.users);
break;
case 'USER_DISCONNECTED':
console.log('USER_DISCONNECTED');
for(var i = 0; i < self.users.length; ++i) {
console.log(self.users[i]);
if(m[1] == self.users[i].id) {
self.users.splice(i, 1);
}
}
break;
case 'DRAW_LINE':
var tmpMsg = m[1].split('_');
var id = tmpMsg[8];
var userIndex = '';
for(var i = 0; i < self.users.length; ++i) {
if(self.users[i].id == id) userIndex = i;
}
var p1 = (self.users[userIndex].lines.length < 1) ? new BLUR.Vertex3(tmpMsg[0], tmpMsg[1], tmpMsg[2]) : self.users[userIndex].lines[self.users[userIndex].lines.length - 1].point2;
var p2 = new BLUR.Vertex3(tmpMsg[3], tmpMsg[4], tmpMsg[5]);
var line = new BLUR.Line3D(p1, p2, tmpMsg[7]);
line.material = tmpMsg[6];
// add the newly created line to the scene.
self.scene.addObject(line);
self.users[userIndex].lines.push(line);
break;
case 'UPDATE_CURSOR':
for(var i = 0; i < self.scene.objects.length; ++i) {
if(self.scene.objects[i].type == 'BLUR.Particle')
self.scene.removeObject(scene.objects[i]);
}
var coords = m[1].split('_');
var id = coords[2];
var userIndex = 0;
for(var i = 0; i < self.users.length; ++i) {
if(self.users[i].id == id)
userIndex = i;
}
self.users[userIndex].position = new BLUR.Vertex3(coords[0], coords[1], 1);
var p = new BLUR.Particle(self.users[userIndex].position, 4);
p.material = new BLUR.RGBColour(176,23,31,0.3);
self.scene.addObject(p);
break;
case 'RECEIVE_ID':
self.id = m[1];
self.connected.nicknameObj.text = self.id;
console.log(self.id);
break;
break;
}
};
socket.onclose = function (msg) {
// feck!
self.connected.addServerError('Server disconnected, try refreshing.');
};
}
catch (ex) {
console.log('EXCEPTION: ' + ex);
}
};
目前,当一个新的客户端连接它发送一个消息并且被添加到阵列中,所述反向当客户端断开连接时。由于某些原因,虽然这不是保持更新?例如,当一个客户端画线,其他一些人报告这个错误:
Uncaught TypeError: Cannot read property 'lines' of undefined
很抱歉,如果我被这里令人难以置信的愚蠢,但任何帮助表示赞赏!
干杯:)
因此,您在服务器端使用Javascript?你用什么样的框架/容器? – 2010-11-28 12:12:19