基于Node.JS的画板的研究与实现

多媒体应用技术信息与计算机中国计算机与通信2016年第11期基于Node.JS的绘画板的研究与实现李媛（惠州商贸职业技术学院，广东惠州516001）摘要: 使用: 更方便的跨平台技术支持HTML5的修订和发行，该技术满足一次性编码的需求，并且可以应用于台式机和手机，从而使应用程序代码的维护更加容易. 作者研究并实现了一个框架，该框架结合了新的HTML5技术和Node.JS服务器，以构建画板. Websocket通信协议用于传输信息，以便同一画板可以同时在多个用户之间绘制图片. 作者将给出一个画板原型的应用框架和实现原理，该原型可用于在相关方面开发更多实用和有趣的功能，并应在商业领域中使用. 关键字: Node.JS; HTML5;画板； Websocket中文图片分类号: TP311.52？文件识别码: A ??文章号: 1003-9767（2016）11-140-04. 前端（浏览器）的实现，主要交易逻辑在服务器端的制图板上使用B / S结构，（服务器）的实现[5].

前端浏览器使用HTML5进行用户操作，服务器使用Node.JS构建负责数据管理和传输的服务. 2.2相关的开发技术在此应用程序框架的前端，使用了HTML5中的几种新技术，包括新标记Canvas和用于网络数据传输的Websocket协议. 在服务器端，使用了新兴的服务器端框架Node.JS和分布式文档存储MongoDB. 基于以上分析，本文中的画板的系统框架如图1所示: 1引言1.1研究背景2014年10月29日，万维网联合会宣布HTML5标准规范已完成并且已经完成. 公开发布. 在短短的一年内，许多使用新HTML5技术创建的网站和应用程序已经出现在Internet上. 如今，越来越多的桌面浏览器支持HTML5技术[1]. HTML5的最重要优点是其跨平台的特性，这意味着移动浏览器也可以支持HTML5并显示与桌面相同的效果. 因此，使用HTML技术有望一次实现编码，以便Web应用程序可以在不同的平台上运行，并且用户可以通过不同的设备访问Web应用程序而不会受到影响. 1.2研究意义本文研究并实现了画板的原型. 该模型的框架是基于Node.JS [2]技术构建的服务器. 它结合了HTML5的绘图功能，以在网页“共享的画板”应用程序上实现游戏.

实现该原型的目的是构建一个基本框架，该框架为开发可在不同领域中使用的应用程序提供原型，这表明使用Node.JS和HTML5技术构建跨平台应用程序的可能性. 这种画板原型可以应用于当今非常流行的教育[3]，并且还可以在娱乐游戏和其他商业领域中发挥作用. 图1.系统框架图2.2.1 Canvas标记Canvas标记是HTML5中引入的一项新功能. 它使用2系统框架和相关技术. 2.1系统框架随着Internet应用技术的发展，目前有两种网络结构模型，分别是客户端/服务器（C / S）结构和浏览器/服务器（B / S）结构. 其中，C / S结构是一个相对熟悉的传统网络结构. 通过合理地将任务分配给客户端和服务器，此结构减少了系统的通信开销. 客户端主要涉及用户操作，而服务器主要是集中式的. 在数据管理画图板，共享和维护方面[4]. B / S结构是对C / S结构的改进结构. 在这种结构下，用户工作界面是通过WWW浏览器实现的，几乎没有JavaScript脚本语言对其进行控制，从而使程序员可以在浏览器指定的区域中自由绘制.

新引入的Canvas不仅提供基本的2D绘图功能，而且还提供3D绘图功能. 底层直接操作本地图形卡. 绘制性能和效果得到了极大的改善，在移动终端上也可以更好. 支持. 2.2.2 Websocket WebSocket协议是HTML5的新协议. 它实现了浏览器和服务器之间的全双工通信[6]. 将WebSocket协议添加到浏览器后，可以更好地节省服务器资源和带宽. 作者简介: 李媛（1984-），女，广东河源人，大学本科，计算机讲师. 研究方向: 信息技术教学. —144—No.11，2016中国计算机与通信多媒体应用技术，实现了实时通信，也为跨平台提供了更好的支持. 2.2.3 Node.JS Node.JS是基于Chrome JavaScript的平台，用于方便地构建快速且易于扩展的Web应用程序. Node.JS是事件驱动的，并且非阻塞I / O模型变得轻巧高效，使其非常适合在分布式设备上运行的数据密集型实时应用程序. 本文之所以基于Node.JS构建服务器，是因为: 首先，Node封装了V8 JavaScript引擎. 因此，JavaScript的执行速度非常快，性能也非常好，满足了处理数据密集型应用程序（例如此画板）的需求. 其次，服务器是使用JavaScript脚本语言编写的，因此前端和服务器端使用的是单一语言，这对于开发人员进行维护和管理非常方便.

2.2.4 MongoDBMongoDB是基于分布式文件存储的. 用C ++编写，旨在为Web应用程序提供可扩展的高性能数据存储解决方案. Node.JS服务器可以轻松连接到，维护和执行数据管理. 在绘图功能方面，主要工作是封装本机绘图API，包括铅笔绘图，直线，矩形，圆形等，以及填充和画笔功能. 可以根据不同的应用添加更多的绘图功能. 美工板应响应用户单击的按钮以更改其绘图状态，并在美工板上绘制用户的需求. 美工板必须接收共享同一美工板的其他用户的图形数据，并将其自己的图形数据发送给其他用户. 此步骤中的工作是将有关画板的绘画风格和绘画动作的信息保存到包中，然后将其发送到服务器. 之后，服务器将该信息转发给共享画板的其他用户，此操作完成. 3.2实现原理系统操作可以概括为三个操作过程，即服务器启动，用户注册和登录控制以及绘图板交互. 前两项是服务器端处理任务，最后一项是前端和服务器端通信任务. 3.2.1服务器启动服务器启动需要初始化每个服务器模块，包括控制器组件，视图组件和模型组件，连接到，初始化并打开套接字服务，并启用HTTP网络服务并侦听端口. 处理流程如下: 图2中所示. 3.功能设计和实现原理3.1画板功能要求本文中的画板框架主要分为前端和服务器两部分. 侧面设计.

前端设计的主要任务是从服务器接收信息并将信息发送到服务器，在交互侧提供用户可执行的操作，以及更新画板的内容. 服务器设计任务是管理用户登录，转发前端消息并保存维护数据. 3.1.1服务器的功能要求默认情况下，基于Node.JS的服务器体系结构采用MVC设计，即Model-View-Controller设计模式. 此设计模式使用业务逻辑. 将数据和界面显示分离的方法将代码组织在一起，并将业务逻辑聚合为一个组件. 在改进和个性化自定义界面和用户交互时，无需重写业务逻辑[7]. 其中，模型组件主要负责中用户对象的访问操作和维护. 在此应用程序中，它反映在美工板用户的数据存储中，包括用户的个人信息和美工板创建过程中用户的工作. 视图组件主要负责呈现用户在不同页面中看到的内容. 例如，用户打开主页时看到的欢迎界面和应用程序介绍，在注册和登录界面上看到的文本框和按钮，以及进入应用程序时看到的共享画板. 控制部分负责用户从视图中读取数据，控制用户的输入，跳转到用户的正确页面并将数据发送到模型部分. 可以看出，控制组件是整个服务器的核心，服务器操作逻辑和业务逻辑都包含在控制组件中.

3.1.2前端功能要求因为系统使用B / S结构，所以服务器可以处理大部分工作. 因此，前端的主要工作集中在画图板以及接收和发送消息上. 图2.启动服务器的工作流程图在启动过程中，服务器必须处理异常情况. 如果由于某些原因无法连接或其他模块无法启动，它将输出错误消息并停止运行. 开发人员处理完它之后，请确保它运行正常，然后再打开服务并侦听端口. 打开服务器电源后，只要用户在浏览器中输入服务器的访问地址和相应的端口，他就可以通过HTTP访问服务器提供的网站服务. —141—多媒体应用技术3.2.2用户注册和登录控制信息及计算机中国计算机通信2016年第11期发送图纸数据，接收其他用户的图纸数据并将其反映在图纸板上. 处理流程图如图4所示: 为了能够使用画板区分不同的用户，该应用程序还设计了简化的用户注册和登录系统. 用户信息以模型对象的形式存储在中. 每次注册新帐户时，都会将新记录添加到中，并在登录时查询相应记录以返回用户信息. 处理流程图如图3所示: 图4: Sketchpad交互和信息处理流程前端通过套接字连接到服务器，并保持套接字的连接状态后，用于向服务器发送和接收信息.

用户与画板交互之后，交互操作的结果不仅会反映在本地画板上. 图3？从用户注册和登录流程图操作获得的图形信息也必须反馈到服务器，并转发给其他用户，其他用户的操作信息也转发给本地用户，因此形成了共享的画板. 3.3画板效果要测试效果，请在本地设置服务器后，打开两个浏览器并注册两个新帐户进行测试. 同时登录到画板界面，并在其中一个画板上随机绘制图案. 您可以看到两个画板同时显示相同的图案. 效果图如图5所示: 此过程主要是Node.JS服务器中控制器，模型和视图组件的设计和编写. 控制器组件负责确定用户的登录状态，并跳转到用户的相应界面. 模型部分控制用户的数据访问查询画图板，而视图部分负责定义信息，例如页面上显示的文本框. 3.2.3画板交互过程画板主要分为交互过程和信息处理过程. 交互过程体现在画板中，以响应用户的绘画行为，在画板上绘制相应的图案，并记录绘画信息以发送到服务器. 信息处理过程反映在服务端图片5？画板效果显示（续第181页）—142—2016第11信息和计算机中国计算机与通信网络和通信技术此转换实现两种功能，一方面网络数据包过滤，包转发，优先级，获取，防火墙功能，另一方面提供容错管理，流控制功能.

已被验证可以有效地实现LAN路径选择和过滤，以及分离网络信息流. 该技术改造消除了西安地铁四个主变电站的自动化网络的阻塞，并已在后续线路设计阶段采用，对优化主变电站的自动化系统具有指导意义. 5.结论西安地铁线路建设在不断发展. 变电站自动化控制系统的技术要求基于新结构，新设备，新技术和高标准网络可靠性. 它们在实践中不断得到验证和改进. 为优化硬件结构和网络环境，西安地铁不断进行技术创新，确保设备在稳定运行的基础上带动行业创新. （上接第142页）4.结束语本文成功构建了一个基于Node.JS技术的画板系统的原型，该系统结合了许多Web应用程序开发技术，包括新的HTMl5技术和致力于Web开发的MongoDB. . 该系统可用于许多不同领域，易于扩展，并可进一步发展到教育，娱乐游戏和文化创造领域. 尽管HTML5为不同制造商的浏览器提供了良好的支持，但是由于历史原因，目前尚无统一的标准，并且每种浏览器都会略有不同. 因此，有时开发人员需要考虑不同浏览器的兼容性. 增加工作量和维护难度. 此外，手机浏览器目前支持HTML5，其性能与台式机浏览器完全不同.

但是，我相信在HTML5的覆盖下，不久的将来，HTML5的开发肯定会非常快速和稳定. 到那时，它将进入Web应用程序的新时代. 用户不需要下载，他们只需要打开浏览器，就可以享受不同设备上各种应用程序带来的便利. 参考文献[1] Baidu Encyclopedia.html5 [EB / OL]. （2014-10-29）[2016-06-05]. [2] BYVoid.Node.JS开发指南[M]. 北京: 人民邮电出版社，2012. [3]张一凡. 基于HTML5技术的教育系统[D]. 北京: 北京邮电大学，2014. [4]百度百科. C / S结构[EB / OL]. （2016-6-22）[2016-6-25]. [5]百度百科. B / S结构[EB / OL]. （2015-11-29）[2016-0605]. [6]百度百科. WebSocket [EB / OL]. （2016-6-17）[2016-6-25]. [7]百度百科. MVC框架[EB / OL]. （2015-11-12）[2016-0605] . — １１１ —

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/ruanjian/article-152591-1.html