技术领域
[0001] 本
发明涉及实时画板领域。更具体地，涉及一种基于NodeJS技术的在线协同画板。
背景技术
[0002] 目前市面上的协同画板比较少见，而实时型的协同画板更是极其稀少，即使有也是基于C/S架构下开发的桌面
软件，并且存在以下问题：
[0003] 实时性问题：
[0004] 现有的基于B/S架构的实时协同画板主要采用传统的HTTP
服务器和关系型
数据库进行构建，这种架构下的协同画板实时性比较差，通常采用两种方式实现实时性。一种是轮询polling技术实现实时网络应用，这种方式由浏览器周期性的向服务端发出
请求，如果服务器没有新数据需要发送就返回以空响应，这种方式的首先会造成大量无意义的请求，造成网络压
力增大，其次就是由于周期性的先知并不能完美解决实时性的问题。另一种是利用iframe的特性，在页面中插入iframe利用它的src属性，使客户端和服务器端建立一条长链接，并由服务器向其传输数据实现实时更新。其不足是显而易见的，iframe作为html的标签，其特性就是在iframe没有加载完全的阶段，整个页面会一直处在未加载完全的状态中。
[0005] 兼容性问题：
[0006] HTML5的出现为这个问题带来了新的解决方案，HTML5中定义了Web Socket协议，通过这种方式可以节省服务器的带宽和资源，实现真正的实时通讯。但在目前的网络环境中，存在着各种各样的浏览器，传统PC端有微软的IE、edge，谷歌的Chrome，Firefox，Safari，Opera等等，移动互联网端又有Android Web Kit、Web OS Web Kit、Safari等等，由于这些浏览器采用的
内核不同，甚至有的浏览器不遵循W3C标准，而使用Web Socket开发的网络应用专供支持HTML5的浏览器使用，而对于不支持HTML5的浏览器，根本无法使用该技术实现实时性，所以基于B/S结构开发的实时协同画板又面临了兼容性问题。
[0007] 高并发问题：
[0008] 在实时网络应用中，高并发的请求处理是个大问题，传统的HTTP服务器，其工作原理通常采用调用，一个线程同时只能处理一项任务，当遇到长时间的I/O操作时，
操作系统将剥夺该线程的CPU控制权使其暂停执行，造成应用程序等待，需等I/O操作完成后方能继续执行。面对大量的并发请求，阻塞式的I/O调用将导致用户在
访问应用程序时等待时间过长或出现假死现象，此时用户可能会继续刷新页面，继而发送新的HTTP请求，不断增加服务器的负载。当面临这种问题时，通常通过增加CPU数，利用多线程编程技术来解决问题，但不断地增加
硬件投入和使用复杂的多线程编程技术，只会使硬件成本和开发成本越来越高，无法从根本上解决问题。
[0009] 数据快速存取问题：
[0010] 传统的网络应用程序通常采用关系型数据库存储数据，在数据量较小的情况下，使用关系型数据库毫无问题，但是当数据库达到一定规模时，系统将非常容易产生死
锁的并发问题，导致数据库的读写性能下降非常严重。特别是在大型的即时通讯系统中，并发负载非常高，每秒往往达到上万次读写请求，虽然关系型数据库可以处理这么多次的SQL查询，但是
硬盘的I/O操作，往往无法承担上万次的写数据请求。特别是面对海量数据，关系型数据库在性能上已经显得力不从心，在一张含有1亿条数据的数据表中进行SQL查询，效率是极其低下的，这也是即时通讯系统搭建中必须考虑的性能问题。
[0011] 鉴于
现有技术中存在的上述问题，提出一种基于NodeJS技术的在线协同画板。
发明内容
[0012] 本发明的目的在于提供一种基于NodeJS技术的在线协同画板，为达到上述目的，本发明采用下述技术方案：
[0013] 所述在线协同画板系统，包括WEB前端和后端服务器，所述服务器为NodeJS搭建的HTTP服务器，设置有:
[0014] 总体
框架，所述总体框架为express框架，提供系统结构目录以及各个模
块接口；
[0015] 路由器模块，响应于WEB前端的请求，对该请求进行路由；
[0016] 房间管理模块，根据WEB前端的创建或加入房间请求为用户创建房间、或将用户加入已创建房间；
[0017] 事件发射器模块，接收WEB前端发送的具体消息、绘制内容至同一房间内其他浏览端。
[0018] 所述WEB前端与服务器之间采用websocket通信协议，并根据路由器模块调用的方法提供socket.io操作。
[0019] 所述路由器模块设置：
[0020] 创建房间URI，根据WEB前端发送的创建房间请求对所述请求进行路由；
[0021] 加入房间URI，根据WEB前端发送的加入房间请求对所述请求进行路由。所述路由器模块还设置：
[0022] 所述画板采用使用canvas创建绘图区域，所述路由器模块还设置：
[0023] 画板绘制URI，使用canvas创建绘图区域，在该区域检测
鼠标的左键的按下、拖拽、释放等动作，并根据动作调用相关绘画函数，进行图形的绘制，所述绘画函数包括draw()函数。
[0024] 所述服务器还设置：
[0025] 用户权限模块，所述用户权限包括观察者权限和参与者权限，根据房间内可容纳参与者人数管理用户权限，所述观察者权限为只读权限，所述参与者权限包括只读和参与研讨权限；
[0026] 所述WEB前端设置：
[0027] 请求发送模块，向服务器端发送创建房间或加入房间请求；
[0028] 画板模块，提供画板，画笔和擦除工具；
[0029] 所述画板模块设置
颜色栈，为每个用户随机分配一种可用画笔颜色，在下一个用户进入房间时，遍历该颜色栈，计算出可用颜色，将未使用的颜色随机分配给后来用户。
[0030] 所述可用颜色根据间隔值distance的值确定颜色是否可用，所述间隔值distance>3时，认为该颜色可用，间隔值的计算公式为：
[0031]
[0032] 其中，R1为原有图形的红色通道值，R2为未绘制图形的红色通道值，G1为原有图形的绿色通道值，G2为未绘制图形的绿色通道值，B1为原有图形的蓝色通道值，B2为未绘制图形的蓝色通道值。
[0033] 本
申请公开了一种基于NodeJS技术的在线协同画板，包括WEB前端部分和后端服务器部分，所述服务器为NodeJS搭建的HTTP服务器，所述服务器设置：总体框架，所述总体框架为express框架，提供系统结构目录以及各个模块接口；路由器模块，响应于WEB前端的请求，对该请求进行路由；房间管理模块，根据WEB前端的创建房间请求或加入房间请求为用户创建房间、或将用户加入已创建房间，事件发射器模块，接收WEB前端发送的具体消息、绘制内容至同一房间内其他浏览端。系统代码和配置文件部署在服务器上，提供一种基于B\S的内存共享技术的协同研讨解决方案的同时提供一种视觉差异性
算法，以实现一种实时性、兼容性较强，能够实现高并发和数据快速存储的实时画板。
附图说明
[0034] 下面结合附图对本发明的具体实施方式作进一步详细的说明；
[0035] 图1为一种基于NodeJS技术的在线协同画板结构示意图；
[0036] 图2为express框架示意图；
[0037] 图3为WEB前端界面示意图；
[0038] 图4为WEB前端界面示意图；
[0039] 图5为画板协同过程示意图。
具体实施方式
[0040] 为了更清楚地说明本发明，下面结合优选
实施例和附图对本发明做进一步的说明。附图中相似的部件以相同的附图标记进行表示。本领域技术人员应当理解，下面所具体描述的内容是说明性的而非限制性的，不应以此限制本发明的保护范围。
[0041] 本申请提供一种基于NodeJS技术的在线协同画板，包括WEB前端和后端服务器，以解决B/S架构下，协同画板的实时性、兼容性、高并发、数据快速存取问题，通过本发明多用户之间可以在线协同实时绘制图形。
[0042] NodeJS是一个Java Script运行平台，采用事件驱动、非阻塞异步I/O调用的方式，旨在提供一种简单、快速的构建可伸缩性的网络服务和应用的平台。
[0043] 为了从根本上解决阻塞式I/O调用所面临的高并发连接问题，放弃使用传统的HTTP服务器，而是采用NodeJS技术搭建HTTP服务器，利用NodeJS的非阻塞异步I/O调用的工作原理，使系统能够应对高吞吐量的并发连接。
[0044] 在非阻塞异步I/O调用中，线程不会被I/O阻塞，执行代码无须等待某种操作完成，将有限的资源用于其他任务，充分利用系统的资源。在即时通讯系统中，当用户发送消息时，用户将触发一个发送消息的函数，并提供一个稍后调用的回调函数，而线程将继续处理其他的请求，无须等待发送动作的完成。
[0045] 另外，NodeJS采用V8引擎，性能优越，处理速度非常快，以加快画板系统的数据快速存取问题。
[0046] 服务器端设计：
[0047] 服务器端需要基于NodeJS中的websocket技术实现双方向的平等对话，使客户端可以向服务器端发送请求的同时，服务器端同样可以向客户端发送请求，实现中调用模块还设置有http网络通信协议模块、path静态资源模块。
[0048] 基于NodeJS技术的在线实时协同画板是B/S架构的，所以代码和配置文件全部部署在服务器上，服务器首先需要安装和配置NodeJS，在一个实施例中协同画板是在windows平台下开发的，在其他实施例中，也可以是在其他平台下开发的。所以，下载windows版NodeJS并安装，安装完成之后需要安装总体框架：express框架，本画板将express直接安装到了工程目录下的node_modules文件夹中，安装好总体框架之后，导入Socket.io.js等文件。
[0049] 首先，使用express框架搭建画板
基础框架，框架包括
软件代码结构目录以及各个模块接口代码；然后，创建路由器和http网络通信协议模块，路由器由创建房间URI、加入房间URI、画板绘制URI、消息发送URI、消息接收URI组成，分别负责画板中功能请求的路由。
[0050] 创建房间URI，根据WEB前端发送的创建房间请求对所述请求进行路由；
[0051] 加入房间URI，根据WEB前端发送的加入房间请求对所述请求进行路由；
[0052] 所述画板采用使用canvas创建绘图区域，画板绘制URI，使用canvas创建绘图区域，在该区域检测鼠标的左键的按下、拖拽、释放等动作，并根据动作调用draw()函数，进行图形的绘制；
[0053] 消息发送/接收URI，当用户点击发送按钮时，会调用sendsay()函数，sendsay()使用http协议以post的形式将文本内容发送到服务器；
[0054] 当服务器接收到消息时，服务器中的parsesay()会解析报文内容，获取接收方的信息，并发送到接收端。
[0055] 其次，创建权限管理模块管理用户权限，用户权限有两种，观察者和参与者，观察者有只读权限不能参与研讨，参与者可参与研讨，在画板上绘制内容；最后加入websocket和事件发射器模块，websocket提供socket.io操作，保障客户端和服务器的持续性通信，由路由器调用相应的方法，从而做出一系列动作，具体包括：画板房间得创建、加入房间的动作、文本消息发送、绘制图形轨迹发送、鼠标事件的监控。事件发射器，负责具体的消息发送，绘制内容发送。在一个实施例中可以由以下方法实现：
[0056]
[0057]
[0058] 为了兼容主流浏览器，在即时通讯系统的设计中，引入NodeJS中的Socket.io实时通信库，运用Socket.io的跨平台特性解决兼容性问题，而无须针对不同浏览器设计不同的即时通讯系统。在一个实施例中所述的浏览器可以是：微软的IE、edge，谷歌的Chrome，Firefox，Safari，Opera等等，移动互联网端又有Android Web Kit、Web OS Web Kit、Safari等。
[0059] Socket.io是一个为实时网络应用提供跨平台实时通信的Web Socket库，包括客户端的Java Script和服务器端的NodeJS，目标是为构建可以在不同浏览器和移动设备上使用的实时应用。
[0060] 当用户使用支持HTML5技术的浏览器访问即时通讯系统时，Socket.io将采用效率最高、对服务器资源消耗最少的Web Socket技术实现实时通讯，当用户使用其他浏览器时，Socket.io将自动切换成其他方式，并且此切换过程对用户是完全透明的。
[0061] 由于关系型数据库面对海量数据和高并发连接时性能表现较差，因此选择了非关系数据库作为存储系统，经过对Redis、Mongo DB、Hypertable、CouchDB等数据库的特点与使用场景的比较，结合即时通讯系统每次传输的数据量非常小的特点，最后选择Re-dis内存数据库作为存储系统。
[0062] Redis是一个高性能的开源KV(Key-Value)存储系统，提供了丰富的数据结构，通常被称为数据结构服务器，Redis的数据通常以Key为索引，以Value为值存储于内存中，Value值可以是字符串(String)、集合(Set)、有序集合(Sorted Set)、哈希(Hash)和列表(List)等类型。
[0063] 在即时通讯系统中使用Redis的优点是：Redis的性能非常高，可以支持超过每秒百万次的读写
频率，而且Redis的所有操作都是
原子性的，并且通过将内存中的数据周期性地保存到磁盘中以实现数据持久化。
[0064] 所述WEB前端设置：会话模块，画板模块，提供画板，画笔和擦除工具；
[0065] 界面设计：
[0066] 客户端采用bootstrap进行开发，客户端功能相应为房间创建、用户加入、画板、消息发送、消息列表等。以上功能采用统一设计
风格，界面简洁易用，缩短用户学习成本，参见附图3-5，并使用canvas创建画板容器。
[0067] 在一个实施例中可以由以下方法实现：
[0068]
[0069]
[0070] 前端设计：
[0071] 前端使用了jquery进行开发，协同画板前端主要负责客户端与服务器建立持久性连接，并在建立连接以后发送画板绘制内容和用户发送的消息到服务器、提供丰富的画板功能、提供消息发送与显示的功能。
[0072] 首先，加入或创建房间并初始化前端画板界面，创建提供画笔粗细颜色选择函数，在初始化函数中初始化画板参数和消息框。
[0073]
[0074]
[0075] 在多用户使用同一个画板时，用户绘制的图形颜色会产生一定的重叠，这就造成协同过程中的图形语意不明确，为了提高协同的效率和明确性，本发明设计了一套恰可分辨差异机制，在一个用户创建房间后会为该用户随机分配一个画笔颜色，并建立颜色栈，在下一个用户进入房间时会遍历该颜色栈，通过公式计算出人眼可识别差异的可用颜色，然后再分配给第二个用户，公示中间隔值必须大于3时，人的眼睛才能识别出色差。
[0076] 所述画板模块设置颜色栈，为每个用户随机分配一种可用画笔颜色，在下一个用户进入房间时，遍历该颜色栈，计算出可用颜色，将未使用的颜色随机分配给后来用户。
[0077] 所述可用颜色根据间隔值distance的值确定颜色是否可用，所述间隔值distance>3时，认为该颜色可用，间隔值distance的计算公式为：
[0078]
[0079] 计算出可用颜色，为用户随机分配，同时，对用户的数量进行限制，在一个可使用的房间中，用户人数最多与可用颜色的种类数相同。
[0080] 其中，R1为原有图形的红色通道值，R2为未绘制图形的红色通道值，G1为原有图形的绿色通道值，G2为未绘制图形的绿色通道值，B1为原有图形的蓝色通道值，B2为未绘制图形的蓝色通道值。
[0081] 在一个实施例中可以由以下方法实现：
[0082]
[0083] 显然，本发明的上述实施例仅仅是为清楚地说明本发明所作的举例，而并非是对本发明的实施方式的限定，对于所属领域的普通技术人员来说，在上述说明的基础上还可以做出其它不同形式的变化或变动，这里无法对所有的实施方式予以穷举，凡是属于本发明的技术方案所引伸出的显而易见的变化或变动仍处于本发明的保护范围之列。
