基于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-），女，上海人，碩士，廣東白云學院大數據與計算機學院計算機系教師，研究方向為計算機軟件、多媒體技術。