刚出炉的 Nodejs 多人多房间在线画板
刚出炉的 Nodejs 多人多房间在线画板
- 效果见http://banling.com/weixin/draw/
2.前几天群里见这个坐着发了这个东东， 蛮好玩， 貌似可以做个你画我猜的游戏， 本着html开源的精神， 我就把前端的html和js全扒下来了， 请作者见谅，^_^ . - 根据前端 js代码的提示， 把服务器代码补充完了，代码如下， 服务器端很简单， 感觉还是前端难点，
/**
* Module dependencies.
*/
var express = require(‘express’);
var routes = require(’./routes’);
var user = require(’./routes/user’);
var http = require(‘http’);
var path = require(‘path’);
var sio = require(‘socket.io’);
var app = express();
// all environments
app.set(‘port’, process.env.PORT || 3000);
app.set(‘views’, path.join(__dirname, ‘views’));
//app.set(‘view engine’, ‘jade’);
app.set(‘view engine’, ‘ejs’);
app.use(express.favicon());
//app.use(express.logger(‘dev’));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, ‘public’)));
// development only
if (‘development’ == app.get(‘env’)) {
app.use(express.errorHandler());
}
app.get(’/’, routes.index);
app.get(’/users’, user.list);
app.get(’/opt’, routes.opt)
var server = http.createServer(app).listen(app.get(‘port’), function(){
console.log('Express server listening on port ’ + app.get(‘port’));
});
var io = sio.listen(server);
var roomList = {};
var socketMap = {};
io.on(‘connection’, function(socket){
//create a room
socket.on('iJoin', function(data){
var roomid = data.room;
var user = {
id: socket.id,
ip:socket.handshake.address,
cname: ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6)
}
console.log(user);
//把socket 加入房间
socket.join(roomid);
socket['roomid'] = roomid;
socketMap[socket.id] = socket;
var sid = user.id;
//假如room已经存在，则添加，不存在，则创建
if(in_array(roomList, roomid)){
roomList[roomid][sid] = user;
}else {
roomList[roomid] = {};
roomList[roomid][sid] = user;
}
console.log('^^^^^^^^^^^^^^^^^^')
console.log(roomList)
var data = {
'members':roomList[roomid],
'user':user
}
//给群里所有人广播
setTimeout(function () {
socket.broadcast.in(roomid).emit('userIn', data);
socket.emit('userIn', data);
console.log('shit .....')
}, 500)
})
//客户端该名称
socket.on('setNickname', function(nickname){
var roomid = socket['roomid'];
roomList[roomid][socket.id]['cname'] = nickname;
var user = {
id: socket.id,
cname: nickname
}
console.log('setNickname .................')
console.log(roomList)
socket.broadcast.to(socket.roomid).emit('shake hands', user);
})
socket.on('disconnect', function(){
var user = {
id: socket.id,
ip:socket.handshake.address,
cname: roomList[roomid][socket.id]['cname']
}
var roomid = socket['roomid'];
delete roomList[roomid][socket.id];
socket.broadcast.to(socket.roomid).emit('userOut', user);
})
socket.on('say msgs', function(data){
console.log('say msg..............')
console.log(data)
if(data.id){
var msg = {
to:data.id,
id: socket.id,
txt:data.say
}
socketMap[data.id].emit('say msg', msg);
}else{
var msg = {
id: socket.id,
txt:data.say
}
socket.broadcast.in(socket.roomid).emit('say msg', msg);
}
})
socket.on('drawClick', function(data){
socket.broadcast.in(socket.roomid).emit('draw', data.data);
})
})
function in_array(arr, str){
for(var index in arr){
if(index == str){
return true;
}
}
return false;
}
我是做PC端画板软件的，其实我目前也在构思一个这样的项目（在线的互动白板） ，支持多人在线绘画，分享和讨论， 技术方向是选择 nodejs + sockio + fabric + expressJS不知道大家有什么看法或者建议，可以给我信息。
