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

相关实践学习
阿里云AIoT物联网开发实战
本课程将由物联网专家带你熟悉阿里云AIoT物联网领域全套云产品,7天轻松搭建基于Arduino的端到端物联网场景应用。 开始学习前,请先开通下方两个云产品,让学习更流畅: IoT物联网平台:https://iot.console.aliyun.com/ LinkWAN物联网络管理平台:https://linkwan.console.aliyun.com/service-open
相关文章
|
5月前
|
人工智能 Java 物联网
Java与边缘AI:构建离线智能的物联网与移动应用
随着边缘计算和终端设备算力的飞速发展,AI推理正从云端向边缘端迁移。本文深入探讨如何在资源受限的边缘设备上使用Java构建离线智能应用,涵盖从模型优化、推理加速到资源管理的全流程。我们将完整展示在Android设备、嵌入式系统和IoT网关中部署轻量级AI模型的技术方案,为构建真正实时、隐私安全的边缘智能应用提供完整实践指南。
466 3
|
传感器 人工智能 监控
AI与物联网的融合:开启智能化未来的新篇章
AI与物联网的融合:开启智能化未来的新篇章
1902 96
|
10月前
|
网络协议 算法 物联网
Go语言的WebSocket与实时通信
本文介绍了 WebSocket 技术及其在 Go 语言中的实现。WebSocket 是一种基于 TCP 的协议,支持客户端与服务器间的持久连接和实时通信,相比传统 HTTP 更高效。文章详细讲解了 WebSocket 的核心概念、Go 语言中的相关库(如 `gorilla/websocket`),以及其实现步骤和应用场景。通过代码示例展示了如何构建 WebSocket 服务器和客户端,并探讨了其在聊天应用、实时更新、游戏和物联网等领域的实际用途。此外,还推荐了相关工具和学习资源,帮助开发者更好地掌握这一技术。
426 3
|
存储 边缘计算 物联网
揭秘边缘计算:物联网时代的分布式智能
揭秘边缘计算:物联网时代的分布式智能
1240 92
|
存储 监控 安全
工业物联网关应用:PLC数据通过智能网关上传阿里云实战
本文介绍如何使用智能网关将工厂PLC数据传输至阿里云平台,适合中小企业远程监控设备状态。硬件准备包括三菱FX3U PLC、4G智能网关和24V电源。接线步骤涵盖PLC编程口与网关连接、运行状态检测及天线电源接入。配置过程涉及通讯参数、阿里云对接和数据点映射。PLC程序关键点包括数据上传触发和温度值处理。阿里云平台操作包含实时数据查看、数据可视化和规则引擎设置。最后提供常见故障排查表和安全建议,确保系统稳定运行。
1084 1
|
缓存 监控 前端开发
Go 语言中如何集成 WebSocket 与 Socket.IO,实现高效、灵活的实时通信
本文探讨了在 Go 语言中如何集成 WebSocket 与 Socket.IO,实现高效、灵活的实时通信。首先介绍了 WebSocket 和 Socket.IO 的基本概念及其优势,接着详细讲解了 Go 语言中 WebSocket 的实现方法,以及二者集成的重要意义和具体步骤。文章还讨论了集成过程中需要注意的问题,如协议兼容性、消息格式、并发处理等,并提供了实时聊天、数据监控和在线协作工具等应用案例,最后提出了性能优化策略,包括数据压缩、缓存策略和连接管理优化。旨在帮助开发者更好地理解并应用这些技术。
840 3
|
人工智能 监控 物联网
深度探索人工智能与物联网的融合:构建未来智能生态系统###
在当今这个数据驱动的时代,人工智能(AI)与物联网(IoT)的深度融合正引领着一场前所未有的技术革命。本文旨在深入剖析这一融合背后的技术原理、探讨其在不同领域的应用实例及面临的挑战与机遇,为读者描绘一幅关于未来智能生态系统的宏伟蓝图。通过技术创新的视角,我们不仅揭示了AI与IoT结合的强大潜力,也展望了它们如何共同塑造一个更加高效、可持续且互联的世界。 ###
|
缓存 监控 前端开发
在 Go 语言中实现 WebSocket 实时通信的应用,包括 WebSocket 的简介、Go 语言的优势、基本实现步骤、应用案例、注意事项及性能优化策略,旨在帮助开发者构建高效稳定的实时通信系统
本文深入探讨了在 Go 语言中实现 WebSocket 实时通信的应用,包括 WebSocket 的简介、Go 语言的优势、基本实现步骤、应用案例、注意事项及性能优化策略,旨在帮助开发者构建高效稳定的实时通信系统。
852 1
|
传感器 监控 物联网
智能物联网:LoRaWAN技术在低功耗广域网中的应用
【10月更文挑战第27天】LoRaWAN技术是低功耗广域网(LPWAN)的重要代表,以其远距离通信、低功耗和低成本部署等优势,广泛应用于智能城市、农业监测和环境监测等领域。本文介绍LoRaWAN的工作原理及其实际应用,并提供示例代码展示如何使用LoRaWAN进行数据传输。
456 2
|
物联网 智能硬件
物联网技术:连接智能生活的桥梁
物联网技术:连接智能生活的桥梁

相关产品

  • 物联网平台