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

我們再這個初始化函數中擷取canvas對象，代碼如下：

擷取該對象後，我們就可以定義我們可以繪圖的上下文對象了（目前可擷取2d對象，3d對象在未來的标準中也會支援）。

'canvas1' 對應我們網頁中的<canvasid="canvas1">。

另外我們還支援畫面滑鼠捕捉，可以繪制一些按鈕（不過在一些嵌入式裝置上，該功能支援不太好，建議還是直接使用網頁按鈕）。

canvas.addEventListener('mousedown',mousedown,false);

canvas.addEventListener('mousemove',mousemove,false);

canvas.addEventListener('mouseup',mouseup,false);

添加這三個事件後，就可以擷取滑鼠相關資訊了。

詳細的代碼如下：

WebSocket是HTML5開始提供的一種浏覽器與伺服器間進行全雙工通訊的網絡技術。

在WebSocket API中，浏覽器和伺服器隻需要要做一個握手的動作，然後，浏覽器和伺服器之間就形成了一條快速通道。兩者之間就直接可以資料互相傳送。

在腳本檔案中，我們建立WebSocket的代碼如下：

在代碼中需要指定伺服器IP和端口，換句話說，這個實作和我們用其它開發語言開發socket用戶端沒有任何差別。

和xmlhttp的差別就是，它不是基于http協定的，傳輸可以直接是二進制資料。

在系統中我們隻需要建構一個socket server，建立連接配接後，互發握手指令，成功後，就可以互發資料了。

3.1 握手

握手協定舊版和新版有很大的不同，我們這裡僅介紹最新版的（也應該是最終版了）。

打開所提供的Htm5_Websocket.sln工程，確定我們打開websocket庫的debugmode（webSocket.DebugMode= true）。

一旦浏覽器通路我們的開發闆，則序列槽中會輸出上圖的資訊。

用戶端所發：

GET / HTTP/1.1

Upgrade: websocket

Connection: Upgrade

Host: 192.168.1.100:10189

Origin: http://192.168.1.100

Sec-WebSocket-Key: G9CM/xrVbYUo00RaAuThLQ==

Sec-WebSocket-Version: 13

Sec-WebSocket-Extensions: x-webkit-deflate-frame

服務端傳回：

HTTP/1.1 101 Switching Protocols

Sec-WebSocket-Accept: Id0PdUz40uyrpDdq0OwQdkg/ODA=

WebSocket-Origin: http://192.168.1.100

WebSocket-Location: ws:192.168.1.100:10189/

可以看出目前最新版的協定是V13

握手中最重要的就是key的驗證了，服務端發送的key為Sec-WebSocket-Key: G9CM/xrVbYUo00RaAuThLQ==，這是一個base64編碼。

這個key+” 258EAFA5-E914-47DA-95CA-C5AB0DC85B11”的字元串進行SHA1換算後，轉換為base64編碼，也就是Sec-WebSocket-Accept: Id0PdUz40uyrpDdq0OwQdkg/ODA=中的key。

然後服務端發送上段内容後，就完成了握手，後續就可以直接收發資料了。

小插曲：我在.NET Micro Framework平台實作這段代碼的過程中遇到兩個問題，一是SHA1加密，二是官方提供的base64庫有bug。後來，隻好自己想辦法實作了這兩個功能，才完成了websocket的握手驗證。

3.2 資料通信

新版和老版不同，資料格式定義的比較複雜，如下圖所示：

具體格式的介紹，可以參見3.4參考中所提到的文章。

3.3 YFSoft.Html5.websocket封裝庫

由以上介紹可知，實作websocket的功能還是相對複雜的，是以我封裝了一個websocket庫，使用者可以非常友善的實作websocket。

定義：

事件處理：

事件參數中直接可以擷取websocket的資料。

AD資料發送：

不局限于僅發字元資訊，也可以發二進制資訊。

庫下載下傳（示例源碼+文檔）：

3.4 參考

websocket 通信協定(已更新到version 13)

<a href="http://www.zendstudio.net/archives/websocket-protocol/">http://www.zendstudio.net/archives/websocket-protocol/</a>

基于Websocket草案10協定的更新及基于Netty的握手實作

<a href="http://blog.csdn.net/fenglibing/article/details/6852497">http://blog.csdn.net/fenglibing/article/details/6852497</a>

WebSocket新版Hybi-10協定介紹

<a href="http://www.hackecho.com/archives/1104.html">http://www.hackecho.com/archives/1104.html</a>

（4）、網頁部署和釋出

我們編寫的網頁檔案涉及到三個檔案：index.html、canvas.js和LOGO.gif，我們通過YFFileViewer工具把它們部署到開發闆中的檔案系統中去。

僅需要寫如下代碼，就可以實作web頁面釋出。

using (WebServer server = new WebServer(80))

{

    server.SetWebRoot("\\ROOT\\web");

   Thread.Sleep(Timeout.Infinite);

}

程式運作後，我們在浏覽器中輸入IP位址，就可以通路網頁了。

相關操作視訊：

<a href="http://v.youku.com/v_show/id_XNDY3NzM1Mzky.html"></a>

<a href="http://v.youku.com/v_show/id_XNDY3NzM1Mzky.html">http://v.youku.com/v_show/id_XNDY3NzM1Mzky.html</a>

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

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