Build a customer service system step by step (7) Multi-person electronic whiteboard, artboard

Multi-person sharing, simultaneous operation of the electronic whiteboard, so that different participants in different colors to draw, you can save the contents of the current space, so that the latter can directly load all the content.

Find an example of an electronic whiteboard implemented with HTML5 canvas on GitHub:

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

It is based on Socket.io to realize the sharing and operation of multi-person whiteboard. This article adds a room based on it, so that only the people in the same room will share it.

1 Adding a room

Client:

var roomname = Location.search.split ('? ') [1];
Init Socket.io
App.socket = Io.connect ('http://localhost ');
App.socket.emit (' Create ', roomname);

Service side:

Io.sockets.on (' Connection ', function (socket) {

Socket.on (' Create ', function (guest) {
Socket.room = the hostel;
Socket.join (guest);

Get existed image as soon as join
Io.sockets.in (Socket.room). Emit (' Setup ', colors[i++], imagedata[socket.room]);
});

......

2 of people in the backward room, to be able to see all the contents of the front

Io.sockets.in (Socket.room). Emit (' Setup ', colors[i++], imagedata[socket.room]);

3 broadcast in room only

Service side:

Socket.emit (' Draw ', data);

4 Sending, receiving

Send:

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

Note: The client does not need to add broadcast.to (socket.room) when sending

Receive:

Broadcast all draw clicks.
Socket.on (' Do-the-draw ', function (data) {
Socket.broadcast.to (Socket.room). Emit (' Draw ', data);
Imagedata[socket.room] = Data.imagedata;
});

5. Client

Client Code<! DOCTYPE html>UTF-8"> <title>white board</title> <style>. whiteboard-canvas {margin:0 auto;        border:1px Solid Yellowgreen} #clear {display:block; } </style>Https://code.jquery.com/jquery-1.9.1.js"></script><script src="/socket.io/socket.io.js"></script><script>//Keep Everything we need outside global scope    varAPP = {};varRoomname = Location. Search.split ('? ') [1];//Init Socket.ioApp.socket = Io.connect (' http://localhost ');App.socket.emit (' Create ', roomname);//Flag to indicate whether we ' re currently drawing or notApp._starteddrawing =false;/** * Do the draw.     Acts differently * Depending on event type passed. */App.draw =function(data) {varOriginalcolor = App.ctx.strokeStyle; App.ctx.strokeStyle = Data.color;if(Data.type = = "MouseDown") {//Start drawingApp.ctx.beginPath (); App.ctx.MoveTo(Data.x, DATA.Y)}Else if(Data.type = = "MouseUp") {//Stop drawingApp.ctx.stroke ();            App.ctx.closePath (); App._starteddrawing =false;        App.socket.emit (' Save-data ', App.whiteboard[0].todataurl ()); }Else{//ContinueApp.ctx.lineTo (data.x, DATA.Y);        App.ctx.stroke ();    } App.ctx.strokeStyle = Originalcolor; };/** * We want to draw whenever we receive * ' Draw ' event from other sockets as well. */App.socket.on (' Draw ', app.draw);/** * Clears the canvas. */App.clear =function() {App.ctx.clearRect (0, 0, app.whiteboard[0].width, app.whiteboard[0].height);    }; App.socket.on (' Clear ', app.clear);/** * Fetch color that this user should * use for drawing. */App.socket.on (' Setup ',function(Color, Dataurl) {App.ctx.strokeStyle = color;if(Dataurl) {//Load image from data URL            varImageobj =NewImage (); Imageobj.onload =function() {App.ctx.drawImage ( This, 0, 0);            };        IMAGEOBJ.SRC = Dataurl; }    });/** * Bind mouse events to our canvas once DOM have loaded.     * At the this point we is also ready to emit * ' Dothedraw ' events. */$(function() {App.whiteboard = $ (' #whiteboard '); App.ctx = App.whiteboard[0].getcontext ("2d");//Connect mouse eventsApp.whiteboard.on (' MouseDown mouseup mousemove ',NULL,function(e) {if(!app._starteddrawing && E.type! = "MouseDown")return; App._starteddrawing =true;varOffset = $ ( This). offset ();vardata = {x: (e.pagex-offset.left), Y: (E.pagey-offset).Top), Type:e.handleobj.type, Color:App.ctx.strokeStyle, ImageData:App.whitebo            Ard[0].todataurl ()}; App.draw (data);//Draw yourself.App.socket.emit (' Do-the-draw ', data);//broadcast draw.});//Clear button$ (' #clear '). On (' click ',function() {app.clear ();//Clear Our screensApp.socket.emit (' clear ');//Broadcast clear.}); }); </script><canvas id= "Whiteboard"Width="700px"Height="500px"class="Whiteboard-canvas"></canvas><button id="Clear">clear ThisUp</button></body>

6. Service-side

Service-side code/** * Our apps starts here. * *//SetupvarExpress = require (' Express ');varApp = Express ();varServer = App.listen (3210,function() {Console.log (' Listening on port%d ', server.address (). port);});varIO = require (' Socket.io ') (server);//Return canvas.html for whatever request we get.App.get ('/',function(req, res) {res.sendfile (__dirname + '/canvas.html ');});//We'll store image data here, so the users that//Connect after startup receive the current// state of the image.varImageData = {};//Color palette by Skyblue2u:http://www.colourlovers.com/palette/580974/adrift_in_dreams//Nice one!varcolors = ["#CFF09E", "#A8DBA8", "#79BD9A", "#3B8686", "#0B486B"];vari = 0;//Setup emitters for each connectionIo.sockets.on (' Connection ',function(socket) {//Each new user gets a different color    if(i = = 5) i = 0; Socket.on (' Create ',function(guest)        {socket.room = the hostel; Socket.join (guest);//get existed image as soon as joinIo.sockets.inch(Socket.room). Emit (' Setup ', colors[i++], imagedata[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; });//... and clear clicks as wellSocket.on (' Clear ',function() {socket.broadcast.to (socket.room). Emit (' clear '); Imagedata[socket.room] =NULL; });//Users modified image, let ' s save itSocket.on (' Save-data ',function(data)    {Imagedata[socket.room] = data; });});

Http://yunpan.cn/cHFzQ2S9HpzeQ Access Password 80A3

Build a customer service system step by step

.

Build a customer service system step by step (7) Multi-person electronic whiteboard, artboard