| 标题 | 基于Html5的多屏互动系统的设计 |
| 范文 | 摘 要：随着互联网技术及应用的发展，为实现智能终端间的资源共享，多屏互动技术被大量使用。本文基于对HTML5和Node.js技术的研究和实践，实现了一个由web技术开发的多屏互动系统平台，分析了系统的设计思路和功能，并且该系统具有跨平台的特性。 关键词：HTML5；Node.js；多屏互动 在网络越来越接近我们生活的当今社会，Internet的应用已普及到了人们生活与工作的各个层面。多屏互动系统作为一个展示自平台，其重要性也越来越受到人们的关注。 1 系统开发技术 1.1 HTML5简述 HTML5是基于浏览器的标准，其目的是能让应用能在浏览器中运行流畅，它具有跨平台、跨分辨率、易开发以及低成本的优点。基于HTML5的最大优点是，开发者能直接在浏览器上修改和调试，而且它几乎不用考虑用户的机型与适配性问题。传统移动终端的开发通常需要针对不同的操作系统进行，而基于HTML5开发能摆脱对平台的依赖，大幅降低成本。 第二个非常重要的优势在于版本升级。就像网站的升级和用户无关一样，HTML应用的升级也是强制性的，这样开发者就不需要考虑各版本之间的兼容问题，节约了大量时间成本。 1.2 Node.js简述 Node.js是一种新兴的后台语言，它是一个Javascript运行环境，实际上它是对Google V8引擎进行了封装，而V8引擎执行Javascript的速度很快，性能也非常好。Web应用开发中最大的问题就是服务器能够处理的并发连接的最大数量，Node.js在处理时，不是为每一个连接生成一个新的线程，而是每个连接发射一个在引擎进程中运行的事件。Node.js輕量高效，它使用事件驱动和非阻塞I/O模型，为数据密集型分布式部署环境下的实时应用提供了较好的解决方案。Node.js也是刚刚兴起的一种服务器端的开发架构，使得 Javascript能够在服务器端运行，而且由于 Javascript的函数式编程等特性，基于非阻塞式的编程更加的有优势。 2 系统主要功能 2.1 前端页面展示平台主要功能 用户登录：当展示者输入密码之后通过验证通过后，系统跳转进入控制端页面。 分享功能：展示者在控制端页面分享二维码或者网址（二维码每次生成都是唯一的），被控制端通过扫码或者直接输入网址进入被控制端页面。 分类筛选：展示者点击菜单中分类目录中的某个分类时，会通过ajax与后台数据库进行匹配，并将正确的信息筛选后在页面展示出来。 实时通讯：WebSocket是HTML5一种新的协议，它实现了浏览器与服务器的全双工通信。在不同的多媒体终端上，可以进行多媒体内容的传输、展示、控制等操作，可以在不同平台上同时共享资源。本系统通过此技术实现web之前的相互通信，即展示者可以通过控制端控制任意多个被控制端页面，并具备跨浏览器通信功能。 资源下载：使用HTML5的新特性，可以在网页中浏览pdf文件和播放音频视频，并可以将pdf源文件下载到本地。 2.2 后台管理平台主要功能 分类管理：增加、删除、修改内容类别。 用户验证：匹配用户是否匹配。 下载管理：上传可供下载的文件。 接收释放命令：实时传送控制端命令给被控制端执行。 3 系统工程目录 多屏互动系统在功能结构上总体划分为两部分，assets文件夹目录下为客户端界面部分，server文件夹目录下为服务端部分。在assets客户端目录下又细分为login登录部分、mobile文件夹下为手机展示页面，pc文件夹为pc端展示页面。各个目录下分别有对应的css样式文件、JavaScript脚本文件、html文件。Common文件夹目录下存放着前端页面的公共JavaScript脚本文件、JavaScript类库、第三方插件等，如下图所示。 4 系统测试 4.1 浏览器不同产生的差异 如果有多个不同内核的浏览器用户可能会发现这样一个问题：同一个页面在不同浏览器直接的显示存在差异。其实这并不是程序本身的bug，而是不同内核的浏览器之前的渲染处理方式不同，或者浏览器版本过低，此时我们可以采用渐进增强和优雅降级这两种方案，还有浏览器对一些HTML的支持程度参差不齐导致的，这一种往往只能寻求一些第三方插件库解决，否则也无能为力。 4.2 不同终端产生的差异 当我们用不同的终端去访问本系统时，一个好的系统应该对此做出不同的响应，使得页面能完美的适合当前终端。本系统也测试了主流的智能手机、iPad和PC，基本都能适应，满足用户的需求。 5 结语 仅仅是使用了HTML5中的几个API并且结合Node.js，就开发出了一个多屏互动系统，这其中JavaScript起到了重要作用。曾经的JavaScript只是用来做一些简单的表单验证和交互，而现在JavaScript在web前端领域占据着统治者的地位，再发展成Node.js这个平台，能够做web后端服务器。JavaScript跨平台的特性，使它已经在移动端APP开发占据着一定地位，做到一次开发，就可兼容所有平台。 在系统的设计中遇到了很多问题，如资料不足、API 总是修改等，但在互联网中，跟相关技术人员交流，问题都基本得以解决。HTML5运作中也存在一些问题，比如无法确保能适应各种硬件标准，声音的处理方面也有不足，总体来说它仍处于发展阶段。 参考文献： [1]余泽喜，王香婷，马婷婷.多屏互动系统的研究与实现[J].智能计算机与应用，2012（01）. [2]肖任重，申瑞民.视频会议教学系统中屏幕共享工具的设计与实现[J].计算机仿真，2004（01）. [3]陈琛.中国移动WiMo开启多屏娱乐新纪元[J].通信世界，2010（47）. 作者简介：叶裴雷（1978-），女，上海人，硕士，广东白云学院大数据与计算机学院计算机系教师，研究方向为计算机软件、多媒体技术。 |
| 随便看 |
|
科学优质学术资源、百科知识分享平台，免费提供知识科普、生活经验分享、中外学术论文、各类范文、学术文献、教学资料、学术期刊、会议、报纸、杂志、工具书等各类资源检索、在线阅读和软件app下载服务。