多人共享、同时操作的电子白板,让不同的参入者以不同的颜色来画画;可以保存当前room的内容,以让后来者可以直接加载所有内容。
在github上找到一个用html5 canvas实现的一个电子白板的例子:
https://github.com/kblcuk/canvas-whiteboard
它是基于socket.io来实现多人白板的共享、操作。本文在它的基础上加上了房间,这样只有同一房间的人才会共享。
1 加入房间
客户端:
var roomName = location.search.split('?')[1];
// Init socket.io
App.socket = io.connect('http://localhost');
App.socket.emit('create', roomName);
服务端:
io.sockets.on('connection', function(socket) {
socket.on('create', function(room) {
socket.room = room;
socket.join(room);
//get existed image as soon as join room
io.sockets.in(socket.room).emit('setup', colors[i++], imageData[socket.room]);
});
……
2 后进房间的人,要可以看到前面所有的内容
io.sockets.in(socket.room).emit('setup', colors[i++], imageData[socket.room]);
3 只在房间内广播
服务端:
socket.emit('draw', data);
4 发送、接收
发送:
App.socket.emit('do-the-draw', data); // Broadcast draw.
注: 客户端发送时,不需要加上broadcast.to(socket.room)
接收:
// Broadcast all draw clicks.
socket.on('do-the-draw', function(data) {
socket.broadcast.to(socket.room).emit('draw', data);
imageData[socket.room] = data.imageData;
});
一步一步搭建客服系统
.
所有评论(0)