【物联网智能网关-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
相关文章
|
6天前
|
人工智能 监控 物联网
深度探索人工智能与物联网的融合:构建未来智能生态系统###
在当今这个数据驱动的时代,人工智能(AI)与物联网(IoT)的深度融合正引领着一场前所未有的技术革命。本文旨在深入剖析这一融合背后的技术原理、探讨其在不同领域的应用实例及面临的挑战与机遇,为读者描绘一幅关于未来智能生态系统的宏伟蓝图。通过技术创新的视角,我们不仅揭示了AI与IoT结合的强大潜力,也展望了它们如何共同塑造一个更加高效、可持续且互联的世界。 ###
|
18天前
|
安全 物联网 物联网安全
智能物联网安全:物联网设备的防护策略与最佳实践
【10月更文挑战第26天】随着物联网(IoT)技术的快速发展,智能设备已广泛应用于智能家居、工业控制和智慧城市等领域。然而,设备数量的激增也带来了严重的安全问题,如黑客攻击、数据泄露和恶意控制,对个人隐私、企业运营和国家安全构成威胁。因此,加强物联网设备的安全防护至关重要。
42 7
|
18天前
|
传感器 存储 运维
智能物联网:LoRaWAN技术在低功耗广域网中的应用
【10月更文挑战第26天】本文详细介绍了LoRaWAN技术的基本原理、应用场景及实际应用示例。LoRaWAN是一种低功耗、长距离的网络层协议,适用于智能城市、农业、工业监控等领域。文章通过示例代码展示了如何使用LoRaWAN传输温湿度数据,并强调了其在物联网中的重要性和广阔前景。
49 6
|
17天前
|
传感器 数据采集 监控
数据采集器和物联网网关的区别
数据采集器主要用于从各种数据源收集数据。这些数据源可以是传感器(如温度传感器、压力传感器等)、仪表(如电表、水表等)或者其他具有数据输出功能的设备。物联网网关是连接感知层(包含各种传感器和数据采集设备)和网络层(如互联网、局域网等)的关键设备。
44 4
|
18天前
|
存储 JSON 运维
智能物联网平台:Azure IoT Hub在设备管理中的实践
【10月更文挑战第26天】随着物联网技术的发展,Azure IoT Hub成为企业管理和连接数百万台设备的强大平台。本文介绍Azure IoT Hub的设备管理功能,包括设备注册、设备孪生、直接方法和监控诊断,并通过示例代码展示其应用。
21 4
|
17天前
|
传感器 监控 物联网
智能物联网:LoRaWAN技术在低功耗广域网中的应用
【10月更文挑战第27天】LoRaWAN技术是低功耗广域网(LPWAN)的重要代表,以其远距离通信、低功耗和低成本部署等优势,广泛应用于智能城市、农业监测和环境监测等领域。本文介绍LoRaWAN的工作原理及其实际应用,并提供示例代码展示如何使用LoRaWAN进行数据传输。
28 2
|
18天前
|
数据采集 传感器 监控
与传统的物联网相比,IIoT 智能化有何特点
IIoT(工业互联网)相较于传统物联网,其智能化特点主要体现在:更强大的数据处理能力、更精准的实时监控与预测分析、更高的安全性和可靠性,以及更深度的行业应用集成,推动了智能制造和工业4.0的发展。
|
20天前
|
前端开发 JavaScript
Canvas三维变化背景动画HTML源码
Canvas三维变化背景动画HTML源码
23 5
|
22天前
|
Kubernetes Cloud Native JavaScript
为使用WebSocket构建的双向通信应用带来基于服务网格的全链路灰度
介绍如何使用为基于WebSocket的云原生应用构建全链路灰度方案。
|
5天前
|
物联网 智能硬件
物联网技术:连接智能生活的桥梁
物联网技术:连接智能生活的桥梁

热门文章

最新文章

相关产品

  • 物联网平台