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

阅读目录

• 1  加入房间
• 2 后进房间的人，要可以看到前面所有的内容
• 3 只在房间内广播
• 4 发送、接收

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

 

 

一步一步搭建客服系统

 

 

.

---

如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！欢迎各位转载，但必须在文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利。