基于Html5的多屏互動系統(tǒng)的設(shè)計(jì)

摘 要：隨著互聯(lián)網(wǎng)技術(shù)及應(yīng)用的發(fā)展，為實(shí)現(xiàn)智能終端間的資源共享，多屏互動技術(shù)被大量使用。本文基于對HTML5和Node.js技術(shù)的研究和實(shí)踐，實(shí)現(xiàn)了一個由web技術(shù)開發(fā)的多屏互動系統(tǒng)平臺，分析了系統(tǒng)的設(shè)計(jì)思路和功能，并且該系統(tǒng)具有跨平臺的特性。

關(guān)鍵詞：HTML5；Node.js；多屏互動

在網(wǎng)絡(luò)越來越接近我們生活的當(dāng)今社會，Internet的應(yīng)用已普及到了人們生活與工作的各個層面。多屏互動系統(tǒng)作為一個展示自平臺，其重要性也越來越受到人們的關(guān)注。

1 系統(tǒng)開發(fā)技術(shù)

1.1 HTML5簡述

HTML5是基于瀏覽器的標(biāo)準(zhǔn)，其目的是能讓應(yīng)用能在瀏覽器中運(yùn)行流暢，它具有跨平臺、跨分辨率、易開發(fā)以及低成本的優(yōu)點(diǎn)。基于HTML5的最大優(yōu)點(diǎn)是，開發(fā)者能直接在瀏覽器上修改和調(diào)試，而且它幾乎不用考慮用戶的機(jī)型與適配性問題。傳統(tǒng)移動終端的開發(fā)通常需要針對不同的操作系統(tǒng)進(jìn)行，而基于HTML5開發(fā)能擺脫對平臺的依賴，大幅降低成本。

第二個非常重要的優(yōu)勢在于版本升級。就像網(wǎng)站的升級和用戶無關(guān)一樣，HTML應(yīng)用的升級也是強(qiáng)制性的，這樣開發(fā)者就不需要考慮各版本之間的兼容問題，節(jié)約了大量時間成本。

1.2 Node.js簡述

Node.js是一種新興的后臺語言，它是一個Javascript運(yùn)行環(huán)境，實(shí)際上它是對Google V8引擎進(jìn)行了封裝，而V8引擎執(zhí)行Javascript的速度很快，性能也非常好。Web應(yīng)用開發(fā)中最大的問題就是服務(wù)器能夠處理的并發(fā)連接的最大數(shù)量，Node.js在處理時，不是為每一個連接生成一個新的線程，而是每個連接發(fā)射一個在引擎進(jìn)程中運(yùn)行的事件。Node.js輕量高效，它使用事件驅(qū)動和非阻塞I/O模型，為數(shù)據(jù)密集型分布式部署環(huán)境下的實(shí)時應(yīng)用提供了較好的解決方案。Node.js也是剛剛興起的一種服務(wù)器端的開發(fā)架構(gòu)，使得 Javascript能夠在服務(wù)器端運(yùn)行，而且由于 Javascript的函數(shù)式編程等特性，基于非阻塞式的編程更加的有優(yōu)勢。

2 系統(tǒng)主要功能

2.1 前端頁面展示平臺主要功能

用戶登錄：當(dāng)展示者輸入密碼之后通過驗(yàn)證通過后，系統(tǒng)跳轉(zhuǎn)進(jìn)入控制端頁面。

分享功能：展示者在控制端頁面分享二維碼或者網(wǎng)址（二維碼每次生成都是唯一的），被控制端通過掃碼或者直接輸入網(wǎng)址進(jìn)入被控制端頁面。

分類篩選：展示者點(diǎn)擊菜單中分類目錄中的某個分類時，會通過ajax與后臺數(shù)據(jù)庫進(jìn)行匹配，并將正確的信息篩選后在頁面展示出來。

實(shí)時通訊：WebSocket是HTML5一種新的協(xié)議，它實(shí)現(xiàn)了瀏覽器與服務(wù)器的全雙工通信。在不同的多媒體終端上，可以進(jìn)行多媒體內(nèi)容的傳輸、展示、控制等操作，可以在不同平臺上同時共享資源。本系統(tǒng)通過此技術(shù)實(shí)現(xiàn)web之前的相互通信，即展示者可以通過控制端控制任意多個被控制端頁面，并具備跨瀏覽器通信功能。

資源下載：使用HTML5的新特性，可以在網(wǎng)頁中瀏覽pdf文件和播放音頻視頻，并可以將pdf源文件下載到本地。

2.2 后臺管理平臺主要功能

分類管理：增加、刪除、修改內(nèi)容類別。

用戶驗(yàn)證：匹配用戶是否匹配。

下載管理：上傳可供下載的文件。

接收釋放命令：實(shí)時傳送控制端命令給被控制端執(zhí)行。

3 系統(tǒng)工程目錄

多屏互動系統(tǒng)在功能結(jié)構(gòu)上總體劃分為兩部分，assets文件夾目錄下為客戶端界面部分，server文件夾目錄下為服務(wù)端部分。在assets客戶端目錄下又細(xì)分為login登錄部分、mobile文件夾下為手機(jī)展示頁面，pc文件夾為pc端展示頁面。各個目錄下分別有對應(yīng)的css樣式文件、JavaScript腳本文件、html文件。Common文件夾目錄下存放著前端頁面的公共JavaScript腳本文件、JavaScript類庫、第三方插件等，如下圖所示。

4 系統(tǒng)測試

4.1 瀏覽器不同產(chǎn)生的差異

如果有多個不同內(nèi)核的瀏覽器用戶可能會發(fā)現(xiàn)這樣一個問題：同一個頁面在不同瀏覽器直接的顯示存在差異。其實(shí)這并不是程序本身的bug，而是不同內(nèi)核的瀏覽器之前的渲染處理方式不同，或者瀏覽器版本過低，此時我們可以采用漸進(jìn)增強(qiáng)和優(yōu)雅降級這兩種方案，還有瀏覽器對一些HTML的支持程度參差不齊導(dǎo)致的，這一種往往只能尋求一些第三方插件庫解決，否則也無能為力。

4.2 不同終端產(chǎn)生的差異

當(dāng)我們用不同的終端去訪問本系統(tǒng)時，一個好的系統(tǒng)應(yīng)該對此做出不同的響應(yīng)，使得頁面能完美的適合當(dāng)前終端。本系統(tǒng)也測試了主流的智能手機(jī)、iPad和PC，基本都能適應(yīng)，滿足用戶的需求。

5 結(jié)語

僅僅是使用了HTML5中的幾個API并且結(jié)合Node.js，就開發(fā)出了一個多屏互動系統(tǒng)，這其中JavaScript起到了重要作用。曾經(jīng)的JavaScript只是用來做一些簡單的表單驗(yàn)證和交互，而現(xiàn)在JavaScript在web前端領(lǐng)域占據(jù)著統(tǒng)治者的地位，再發(fā)展成Node.js這個平臺，能夠做web后端服務(wù)器。JavaScript跨平臺的特性，使它已經(jīng)在移動端APP開發(fā)占據(jù)著一定地位，做到一次開發(fā)，就可兼容所有平臺。

在系統(tǒng)的設(shè)計(jì)中遇到了很多問題，如資料不足、API 總是修改等，但在互聯(lián)網(wǎng)中，跟相關(guān)技術(shù)人員交流，問題都基本得以解決。HTML5運(yùn)作中也存在一些問題，比如無法確保能適應(yīng)各種硬件標(biāo)準(zhǔn)，聲音的處理方面也有不足，總體來說它仍處于發(fā)展階段。

參考文獻(xiàn)：

[1]余澤喜，王香婷，馬婷婷.多屏互動系統(tǒng)的研究與實(shí)現(xiàn)[J].智能計(jì)算機(jī)與應(yīng)用，2012（01）.

[2]肖任重，申瑞民.視頻會議教學(xué)系統(tǒng)中屏幕共享工具的設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)仿真，2004（01）.

[3]陳琛.中國移動WiMo開啟多屏娛樂新紀(jì)元[J].通信世界，2010（47）.

作者簡介：葉裴雷（1978-），女，上海人，碩士，廣東白云學(xué)院大數(shù)據(jù)與計(jì)算機(jī)學(xué)院計(jì)算機(jī)系教師，研究方向?yàn)橛?jì)算機(jī)軟件、多媒體技術(shù)。