【物联网智能网关-13】Html5:Canvas+WebSocket实现远程实时通信（上）

 在上一篇博文《网关为核心，互联网为基础构建物联网平台》中简要介绍了基于.NET Micro Framework如何构建Web Server应用，本篇文章将基于Html5的Canvas和WebSocket技术详细介绍远程实时通信的实现。

无论是windows还是linux平台都已提供现成的Web Server技术，在服务端支持诸如ASP.net、ASP、PHP等动态网页脚本的解析，通过服务端脚本的解析可以非常方便的操作数据库和动态生成网页。不过如果在嵌入式系统也实现类似的功能，那就必须实现脚本解析引擎，否则无法执行网页中服务端的脚本程序，也就无法实现所谓的动态网页了。但是实现或移植一套脚本解析引擎，不仅难度高，并且代码数量大，对资源相对紧张的嵌入式系统来说也是一件划不来的事情，所以对一些无系统或轻量级的嵌入式系统实现Web Server，都是用本地语言（如C/C++）实现CGI接口（可参见百度百科CGI词条），来处理客户端的POST和GET请求，从而实现动态网页。

对于物联网应用领域来说，一个所谓的动态网页，基于用户的需求，其实很简单。一是作为Web Server端的嵌入式设备获取的数据发生了变化，可以在客户端的网页中动态呈现出来；二是用户有控制或配置需求，可以通过网页向服务端发命令，让服务端执行相关请求。

为了让服务端的数据动态在用户客户端（也就是浏览器）显示，一般有如下几种技术实现：

（1）、网页设置为定时刷新，浏览器定时向服务端发出刷新请求，服务端接收到请求后，动态生成网页（或者是基于一个模板网页，动态修改其中的数据）。这样就可以在客户端动态呈现一些画面了。

 

在我以前所写的博文《IP地址设定及简单web演示》就是用这种技术实现的。不过这种方法的缺点也很明显，一是资源消耗大，每次都是整个网页去更新；二是通过刷新的方式实现，从画面呈现和用户体验来说效果不好；三是很难基于这种技术，实现双向信息交互。

（2）、由于第一种方法有明显的缺点，所以AJAX技术应运而生（请参见百度百科AJAX词条），它允许客户端脚本发送HTTP请求，然后把获取的数据，通过客户端脚本动态呈现出来。这个技术的核心就是XMLHTTP（请参见百度百科xmlhttp词条） 

由于这种技术提出的比较早（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最新版本的浏览器（iphone 4s以上版本的Safari浏览器支持web socket的早期版本）

期版本）。

以上技术实现的是动态网页实现中的通信问题。下面简要说一下网页动态画面的实现技术。

（1）、Flash技术是目前网页中最流行的一种在客户端实现网络画面的技术，不仅可以实现动态画面，也可以进行socket编程，可以说是一种相对完美的动态网页实现技术。但是目前苹果公司的iphone和ipad产品排斥Flash技术，所以用这种技术实现动态网页，在嵌入式领域的发展前景是很不明朗的。

（2）、另外一种就是SVG动态绘图技术，不过这种技术好像不太流行。

（3）、目前最火的技术就是基于Html规范的Canvas技术了（请参见百度百科Canvas元素词条），很多网络游戏和非常炫的动态网页就是基于Canvas技术实现的。

本篇博客的示例就是基于Html5的Canvas和WebSocket技术来实现动态网页的。

在具体介绍Html5的Canvas和WebSocket技术之前，先要说明一下基于.NET Micro Framework平台的Web Server的支持情况。

.NET Micro Framework V4.2官方标准库中已经支持Http的POST和GET相关的功能，我在博文《Http Server功能演示》和《获取雅虎天气(HttpClient示例)》已经分别做了介绍。

但是现成的Web Server 网页发布功能却不具备，需要用户基于http的库去实现。由于该部分的功能具有通用性，所以封装了一个YFSoft.WebServer库。不仅可以直接提供相关网页下载，还包含了POST和GET请求事件。

这样我们只需要把我们编写好的网页文件添加到资源中或文件系统中，系统启动后，通过浏览器就可以访问我们的网页了。

下面我将从四个方面详细介绍在.NET Micro Framework平台上如果实现动态网页的开发，一是网页和脚本设计原则，二是网页动态画面实现（Canvas），三是客户端和服务端实时通信实现（WebSocket），四是网页部署发布。

（1）、网页和脚本编写设计原则

 网页可以采用任何开发工具设计开发，也可以包含图片、Flash、CSS和JS脚本等等。其实这部分设计开发和.NET Micro Framework没有什么关系。YFSoft.WebServer库也只是在浏览器请求的时候，把这些网页或组件下载到客户端，并不需要了解其具体的内容。

网页可以采用脚本，但是不能编写服务端的脚本，因为服务端的脚本没有任何脚本解释引擎去解析。

原则上建议网页内容预先编写好，.NET Micro Framework代码不对网页内容进行动态修改，如果用户有这样的需求，则必须自行处理该网页的下载（不要用AddWebsite方法添加这个网页，或在指定的目录中不要放该文件，则浏览器发出请求的时候，会触发GET事件，用户在该事件中处理好该网页后，自行发给客户端）。

 .NET Micro Framework仅支持UTF8编码，所以相关网页编码要符合这个标准。

如果通过资源方式添加网页和相关组件，那么图像必须以二进制文件的方式添加到资源（可以修改图像的扩展名为dat或bin）。

YFSoft.WebServer库地址下载(含文档和示例)：

http://www.sky-walker.com.cn/MFRelease/library/v42/YFSoft.WebServer.rar

请确保固件版本高于V2.4.30：http://www.sky-walker.com.cn/News.asp?Id=33

本篇博文先介绍到这，后续将详细介绍另外三个方面的内容，敬请关注。

 

声明：由于作者以前主要在桌面程序、通信和嵌入式领域进行开发，对网页开发技术也是最近才开始深入研究，本文描述有失误和偏颇之处还往方家多多指教。

 

MF简介：http://blog.csdn.net/yefanqiu/article/details/5711770

MF资料：http://www.sky-walker.com.cn/News.asp?Id=25