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

简介: 基于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)、网页设置为定时刷新,浏览器定时向服务端发出刷新请求,服务端接收到请求后,动态生成网页(或者是基于一个模板网页,动态修改其中的数据)。这样就可以在客户端动态呈现一些画面了。
image.png

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

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

image.png

由于这种技术提出的比较早(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动态绘图技术,不过这种技术好像不太流行。

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

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

在具体介绍Html5的Canvas和WebSocket技术之前,先要说明一下基于.NETMicro 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脚本等等。其实这部分设计开发和.NETMicro 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

相关实践学习
钉钉群中如何接收IoT温控器数据告警通知
本实验主要介绍如何将温控器设备以MQTT协议接入IoT物联网平台,通过云产品流转到函数计算FC,调用钉钉群机器人API,实时推送温湿度消息到钉钉群。
阿里云AIoT物联网开发实战
本课程将由物联网专家带你熟悉阿里云AIoT物联网领域全套云产品,7天轻松搭建基于Arduino的端到端物联网场景应用。 开始学习前,请先开通下方两个云产品,让学习更流畅: IoT物联网平台:https://iot.console.aliyun.com/ LinkWAN物联网络管理平台:https://linkwan.console.aliyun.com/service-open
相关文章
|
1月前
|
人工智能 边缘计算 监控
【开源视频联动物联网平台】视频AI智能分析部署方式
【开源视频联动物联网平台】视频AI智能分析部署方式
105 3
|
2月前
|
前端开发 JavaScript API
2024 新年HTML5+Canvas制作3D烟花特效(附源码)
2024 新年HTML5+Canvas制作3D烟花特效(附源码)
50 0
|
2月前
|
存储 移动开发 前端开发
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
46 0
|
4月前
|
传感器 物联网 5G
物联网的通信技术以及Wi-Fi、一键配网技术、BLE、GPRS(2G)、LTE-Cat1 、NB-IoT简介
物联网的一个重要的特点是接入了网络,因此这些设备才能将传感器采集的数据上传到云平台,然后根据平台对数据的分析做出反应。而这种接入网络的技术,就是通信技术,是物联网的基础之一。通信的方式可以分为有线和无线两种方式,因为有线通信的成本较高,无线通信技术在物联网中应用比较广泛。
|
1月前
|
传感器 物联网 决策智能
Node-RED 规则引擎:开启物联网时代的智能决策
Node-RED 规则引擎:开启物联网时代的智能决策
77 0
|
1月前
|
Web App开发 监控 中间件
【开源视频联动物联网平台】视频接入网关的用法
【开源视频联动物联网平台】视频接入网关的用法
35 1
|
1月前
|
传感器 边缘计算 物联网
【开源视频联动物联网平台】为什么需要物联网网关?
【开源视频联动物联网平台】为什么需要物联网网关?
27 2
|
1月前
|
传感器 移动开发 监控
嵌入式物联网设计水稻田智能灌溉系统实现
嵌入式物联网设计水稻田智能灌溉系统实现
87 0
|
1月前
|
前端开发 JavaScript 容器
编程笔记 html5&css&js 032 HTML Canvas
编程笔记 html5&css&js 032 HTML Canvas
|
2月前
|
存储 网络协议 物联网
《物联网技术》课程笔记——第四章 物联网通信技术之计算机网络
《物联网技术》课程笔记——第四章 物联网通信技术之计算机网络

相关产品

  • 物联网平台