一步一步搭建客服系统 (7) 多人共享的电子白板、画板

多人共享、同时操作的电子白板,让不同的参入者以不同的颜色来画画;可以保存当前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;
    });

 

 

一步一步搭建客服系统

 

 

.

你可能感兴趣的:(一步一步搭建客服系统 (7) 多人共享的电子白板、画板)