【物联网智能网关-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>