【物聯網智能網關-13】Html5:Canvas+WebSocket實作遠端實時通信（上）

對于物聯網應用領域來說，一個所謂的動态網頁，基于使用者的需求，其實很簡單。一是作為Web Server端的嵌入式裝置擷取的資料發生了變化，可以在用戶端的網頁中動态呈現出來；二是使用者有控制或配置需求，可以通過網頁向服務端發指令，讓服務端執行相關請求。

為了讓服務端的資料動态在使用者用戶端（也就是浏覽器）顯示，一般有如下幾種技術實作：

（1）、網頁設定為定時重新整理，浏覽器定時向服務端發出重新整理請求，服務端接收到請求後，動态生成網頁（或者是基于一個模闆網頁，動态修改其中的資料）。這樣就可以在用戶端動态呈現一些畫面了。

由于這種技術提出的比較早（1998年），是以目前絕大部分桌面浏覽器和嵌入式浏覽器都支援該技術。

不過相對于後面要說的WebSocket技術來說，通過這種方法實作動态互動代價也是比較高的，一是這種資訊的傳輸基于XML檔案，二是通信協定基于HTTP，每次互動都要傳遞HTTP資訊頭。當每次傳輸的資訊相對較少的時候，通信的效用不高。

另外服務端不能主動向用戶端推送資料，每次通信的發起，必須有用戶端來請求，這樣為了相對實時的擷取資料，一種方法就是盡可能在很短的間隔内周期向服務端發請求，第二種方式就是所謂的長連結技術（服務端接收到用戶端請求後，不立即響應，而是等有變化時再發送請求，這樣基本可以做到實時動态重新整理網頁）。

（3）WebSocket就是因為xmlhtml存在了一些很難克服的問題，才在Html5标準中提出的一種技術标準，以前是一種備選方案，現在已經成為一種标準規範了（由于該技術方案不斷更新，目前百度百科和維基百科的詞條介紹都不完整）。

目前Google chrome 23.0.1271.64和Firefox 16.0.2已經支援最新的V13版本的web socket協定了（IE9不支援，據說IE10支援），但是很可惜在嵌入式平台中，我還沒有找到可以支援web socket最新版本的浏覽器（iphone4s以上版本的Safari浏覽器支援web socket的早期版本）

期版本）。

以上技術實作的是動态網頁實作中的通信問題。下面簡要說一下網頁動态畫面的實作技術。

（1）、Flash技術是目前網頁中最流行的一種在用戶端實作網絡畫面的技術，不僅可以實作動态畫面，也可以進行socket程式設計，可以說是一種相對完美的動态網頁實作技術。但是目前蘋果公司的iphone和ipad産品排斥Flash技術，是以用這種技術實作動态網頁，在嵌入式領域的發展前景是很不明朗的。

（2）、另外一種就是SVG動态繪圖技術，不過這種技術好像不太流行。

本篇部落格的示例就是基于Html5的Canvas和WebSocket技術來實作動态網頁的。

但是現成的Web Server 網頁釋出功能卻不具備，需要使用者基于http的庫去實作。由于該部分的功能具有通用性，是以封裝了一個YFSoft.WebServer庫。不僅可以直接提供相關網頁下載下傳，還包含了POST和GET請求事件。

這樣我們隻需要把我們編寫好的網頁檔案添加到資源中或檔案系統中，系統啟動後，通過浏覽器就可以通路我們的網頁了。

下面我将從四個方面詳細介紹在.NET Micro Framework平台上如果實作動态網頁的開發，一是網頁和腳本設計原則，二是網頁動态畫面實作（Canvas），三是用戶端和服務端實時通信實作（WebSocket），四是網頁部署釋出。

（1）、網頁和腳本編寫設計原則

網頁可以采用腳本，但是不能編寫服務端的腳本，因為服務端的腳本沒有任何腳本解釋引擎去解析。

原則上建議網頁内容預先編寫好，.NET Micro Framework代碼不對網頁内容進行動态修改，如果使用者有這樣的需求，則必須自行處理該網頁的下載下傳（不要用AddWebsite方法添加這個網頁，或在指定的目錄中不要放該檔案，則浏覽器送出請求的時候，會觸發GET事件，使用者在該事件中處理好該網頁後，自行發給用戶端）。

 .NET Micro Framework僅支援UTF8編碼，是以相關網頁編碼要符合這個标準。

如果通過資源方式添加網頁和相關元件，那麼圖像必須以二進制檔案的方式添加到資源（可以修改圖像的擴充名為dat或bin）。

YFSoft.WebServer庫位址下載下傳(含文檔和示例)：

<a href="http://www.sky-walker.com.cn/MFRelease/library/v42/YFSoft.WebServer.rar">http://www.sky-walker.com.cn/MFRelease/library/v42/YFSoft.WebServer.rar</a>

本篇博文先介紹到這，後續将詳細介紹另外三個方面的内容，敬請關注。

聲明：由于作者以前主要在桌面程式、通信和嵌入式領域進行開發，對網頁開發技術也是最近才開始深入研究，本文描述有失誤和偏頗之處還往方家多多指教。

<a href="http://weibo.com/1804832611?s=6uyXnP"></a>