一步一步搭建客服系统 (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;
    });

 

 

一步一步搭建客服系统

 

 

.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/544161.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring Cloud OpenFeign 的 5 个优化小技巧!

作者 | 磊哥来源 | Java中文社群(ID:javacn666)转载请联系授权(微信ID:GG_Stone)OpenFeign 是 Spring 官方推出的一种声明式服务调用和负载均衡组件。它的出现就是为了替代已经进入停更维护状态的 Feign&am…

java的equals方法_Java Vector equals()方法与示例

java的equals方法向量类的equals()方法 (Vector Class equals() method) equals() method is available in java.util package. equals()方法在java.util包中可用。 equals() method is used to check whether this Vector is the same or equals to the given object (ob) or …

推荐几个好文章

1 cocos2dx各种行动 http://www.cnblogs.com/linux-ios/archive/2013/04/06/3001946.html 2 cocos2dx自己定义曲线 http://blog.csdn.net/ufolr/article/details/7447773 3 lua中载入cocostudio动画,触发帧事件(非常全,非常具体。还有源代码…

treeset java_Java TreeSet first()方法与示例

treeset javaTreeSet类的first()方法 (TreeSet Class first() method) first() method is available in java.util package. first()方法在java.util包中可用。 first() method is used to retrieve the first lowest element in this TreeSet. first()方法用于检索此TreeSet中…

Java常用类:7000字一次性帮你总结好啦!

来源:cnblogs.com/lwtyyds/p/15678152.html常用类概述内部类内部类的分类:1.成员内部类(非静态内部类)2.局部内部类4.匿名内部类Object类Object类常用方法:1.equals方法2.hashCode方法3.toString方法4.finzlize方法包装…

CentOS6.4系统启动失败故障排查

转:http://www.centoscn.com/CentosBug/osbug/2014/1028/4011.html 操作系统启动失败如下图报错: 故障现象: 从图中可以看到,操作系统启动的过程中,fsck在执行文件系统检测时出现了错误,并且是在检查/dev/m…

hashmap clone_Java HashMap clone()方法与示例

hashmap cloneHashMap类clone()方法 (HashMap Class clone() method) clone() method is available in java.util package. clone()方法在java.util包中可用。 clone() method is used to get a cloned copy of this HashMap instance or in other words, we can say it return…

Linux内存管理--物理内存分配【转】

转自:http://blog.csdn.net/myarrow/article/details/8682819 1. First Fit分配器 First Fit分配器是最基本的内存分配器,它使用bitmap而不是空闲块列表来表示内存。在bitmap中,如果page对应位为1,则表示此page已经被分配&#xf…

JDK的一个Bug,监听文件变更要小心了

背景 在某些业务场景下,我们需要自己实现文件内容变更监听的功能,比如:监听某个文件是否发生变更,当变更时重新加载文件的内容。看似比较简单的一个功能,但如果在某些JDK版本下,可能会出现意想不到的Bug。本…

hashset java_Java HashSet clear()方法与示例

hashset javaHashSet类的clear()方法 (HashSet Class clear() method) clear() method is available in java.util package. clear()方法在java.util包中可用。 clear() method is used to clear all of the element exists from this HashSet. clear()方法用于清除此HashSet中…

推荐 17 个压箱底的常用类库

前言在java的庞大体系中,其实有很多不错的小工具,也就是我们平常说的:轮子。如果在我们的日常工作当中,能够将这些轮子用户,再配合一下idea的快捷键,可以极大得提升我们的开发效率。今天我决定把一些压箱底…

02、django中的上下文

2019独角兽企业重金招聘Python工程师标准>>> 1、譬如设置网站的名称,setting中设置变量: # setting.py SITE_NAME "我的小站"2、在view中写函数将该变量转换成字典,做返回值 from django.conf import settings def site_key(request):# 这里使…

enumset.allof_Java EnumSet allOf()方法与示例

enumset.allofEnumSet类的allOf()方法 (EnumSet Class allOf() method) allOf() method is available in java.util package. allOf()方法在java.util包中可用。 allOf() method is used to return Enumset that has all of the elements of the given element type (ele_ty). …

实战:10 种实现延迟任务的方法,附代码!

作者 | 磊哥来源 | Java中文社群(ID:javacn666)转载请联系授权(微信ID:GG_Stone)这篇文章的诞生要感谢一位读者,是他让这篇优秀的文章有了和大家见面的机会,重点是优秀文章&#xff…

netsh命令

C:\Windows\System32>netsh interface ipv6 show address levelverbose 地址 ::1 参数---------------------------------------------------------接口 Luid : Loopback Pseudo-Interface 1作用域 ID : 0.0有效生存时间 : infinite首选生存时间 : infiniteDAD 状态 : 首选项…

面渣逆袭:Redis连环五十二问!三万字+八十图详解!

基础1.说说什么是Redis?Redis图标Redis是一种基于键值对(key-value)的NoSQL数据库。比一般键值对数据库强大的地方,Redis中的value支持string(字符串)、hash(哈希)、 list(列表&…

hdu 4864 Task(贪婪啊)

主题链接:http://acm.hdu.edu.cn/showproblem.php?pid4864 Task Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submission(s): 1346 Accepted Submission(s): 336Problem DescriptionToday the company has m ta…

svg学习网站

1、http://www.runoob.com/svg

EasyExcel太方便易用了,强烈推荐!

背景 系统中经常要导出大量的数据,格式基本上都是Excel,然而每次导表都是对系统内存的一次挑战。在Java领域,生成或解析Excel的框架比较有名的当属Apache的poi和jxl了。但使用它们,会面临着严重的内存损耗问题。如果系统的并发量还…

Java Date hashCode()方法与示例

日期类hashCode()方法 (Date Class hashCode() method) hashCode() method is available in java.util package. hashCode()方法在java.util包中可用。 hashCode() method is used to retrieve hash code of this Date object. hashCode()方法用于检索此Date对象的哈希码。 has…