多人共享、同時操作的電子白板，讓不同的參入者以不同的顏色來畫畫；可以保存當前room的內(nèi)容，以讓后來者可以直接加載所有內(nèi)容。

?

在github上找到一個用html5 canvas實現(xiàn)的一個電子白板的例子：

https://github.com/kblcuk/canvas-whiteboard

它是基于socket.io來實現(xiàn)多人白板的共享、操作。本文在它的基礎上加上了房間，這樣只有同一房間的人才會共享。

?

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 后進房間的人，要可以看到前面所有的內(nèi)容

io.sockets.in(socket.room).emit('setup', colors[i++], imageData[socket.room]);?

?

3 只在房間內(nèi)廣播

服務端：

socket.emit('draw', data);

?

4 發(fā)送、接收

發(fā)送：

App.socket.emit('do-the-draw', data); // Broadcast draw.

?

注： 客戶端發(fā)送時，不需要加上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;
??? });

?

?

一步一步搭建客服系統(tǒng)

?

?

.

總結

以上是生活随笔為你收集整理的一步一步搭建客服系统 (7) 多人共享的电子白板、画板的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。