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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.