【物联网智能网关-14】Html5:Canvas+WebSocket实现远程实时通信（下）
在上篇博文《Html5:Canvas+WebSocket实现远程实时通信（上）》中已经介绍了当前实现动态网页的一些基本技术，也说明了在.NET micro framework平台下实现Web Server需要注意的一些设计原则，本篇文章将继续介绍Canvas和WebSocket实现远程实时通信的技术细节。
（2）网页动态画面实现（Canvas）
我们采用Dreamweaver软件进行网页和脚本编写（如下图所示）
Index.html文件相对比较简单，在<body>中定义一个<canvas>区，声明一定的大小和外观即可，具体的的动态画面我们主要在canvas.js中实现。
一旦浏览器访问我们的开发板，则串口中会输出上图的信息。
客户端所发：
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
Upgrade: websocket
Connection: Upgrade
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。
定义：
关于YFFileViewer请参见博文博文《【玩转.Net MF03】远程文件查看器》和《【玩转.Net MF05】加载文件系统中的Pe文件》。
仅需要写如下代码，就可以实现web页面发布。
using (WebServer server = new WebServer(80))
{
server.SetWebRoot("\\ROOT\\web");
Thread.Sleep(Timeout.Infinite);
}
程序运行后，我们在浏览器中输入IP地址，就可以访问网页了。
相关操作视频：
http://v.youku.com/v_show/id_XNDY3NzM1Mzky.html
声明：由于作者以前主要在桌面程序、通信和嵌入式领域进行开发，对网页开发技术也是最近才开始深入研究，本文描述有失误和偏颇之处还望方家多多指教。
MF简介：http://blog.csdn.net/yefanqiu/article/details/5711770
MF资料：http://www.sky-walker.com.cn/News.asp?Id=25
本文源码:http://www.sky-walker.com.cn/mfrelease/sample/html5_websocket_file.rar
相关硬件: http://www.sky-walker.com.cn/Products.asp?Id=24
