实时操作系统应用开发技术 课件 第8章基于 WiFi 通信的物联网应用开发

实时操作系统应用开发技术第8章基于WiFi通信的物联网应用开发主讲人：王宜怀时间：2025.61/50目录contentsWiFi应用开发概述01WiFi应用架构及通信基本过程02终端及云侦听模板的适应性修改03运行Web网页04运行微信小程序05远程更新终端UE程序062/50WiFi应用开发概述实时操作系统应用开发技术PART-3/508.1WiFi主要用于无线上网，几乎所有笔记本电脑、智能手机、平板电脑都支持WiFi上网。通过

WiFi，设备可在有无线信号覆盖的区域接入互联网，节省流量费。许多地方实施“无线城市”工程，大学也提供WiFi信号供师生使用。WiFi的主要应用WiFi是一种基于IEEE802.11标准的无线局域网技术，起始于1997年。其通信距离约100米，发射功率约18dbm。从WiFi0到WiFi7，工作频段从2.4GHz扩展到2.4GHz、5GHz、6GHz，速率从2Mbps提升到30Mbps。WiFi的起源与技术指标8.1.1WiFi概述4/50与终端相关的基本概念WiFi热点：无线接入点（AP），可将互联网信号转换为WiFi信号，使附近设备接入互联网。服务集标识（SSID）：WiFi终端可通过AT指令获取接入点的

SSID，从而确定接入的热点。WiFi密码：用于保护无线网络安全，WiFi

终端需输入密码才能连接。WiFi频段：主要有2.4GHz和5GHz两个频段，2.4GHz覆盖广、穿透强但易干扰，5GHz速度快、干扰少但覆盖小。WiFi客户端：连接到WiFi热点的设备，如智能手机、平板电脑等。WiFi热点分配的IP地址：终端连接热点后，热点通过DHCP分配IP地址。MAC地址：WiFi

设备的唯一标识，类似于手机的SIM卡号。与信息邮局MPO相关的基本概念IP地址：互联网上主机的唯一标识，由网络号和主机号组成，IPv4地址为32位，分为4段，每段8位。端口号：用于区分不同网络服务，一台主机可提供多种服务，通过“IP

地址+端口号”区分。互联网：全球性的计算机网络系统，由多个物理网络、路由器、服务器和终端设备组成，通过TCP/IP协议实现数据传输。与人机交互系统HCI相关的基本概念侦听程序与云服务器：云服务器是具有固定IP地址的计算机，运行侦听程序接收终端数据并存储到数据库，同时负责将人机交互系统的数据发送给终端。数据库：存储数据的地方，由表组成，每张表由字段组成，对数据库的操作包括增、删、改、查。客户端：与服务器相对应，为客户提供本地服务的程序，如网页浏览器、即时通讯软件等。0102038.1.22WiFi通信过程与应用开发相关的基本概念5/50物联网应用开发所面临的问题01.物联网应用开发涉及多学科知识，技术门槛高，开发周期长，成本高，稳定性难以保证。开发过程中需要软硬件协同设计，涉及实时性要求、抗干扰性与稳定性，且需不断进行软硬联合测试。解决物联网应用开发所面临难题的基本思路02.从技术科学层面，研究抽象物联网应用系统的技术共性，形成可复用、可移植的构件、类、框架，实现整体建模，合理分层，达到软硬可复用与可移植的目的。通过给出物联网智能系统的应用架构及应用方法，使技术人员可以在此模板基础上进行特定应用的开发，有效降低技术门槛。8.1.3物联网应用开发所面临的问题及解决思路6/50金葫芦WiFi开发套件从实际产品可用角度设计终端UE板，注重文档撰写，提供规范的模板。其设计思想包括立即检验WiFi通信状况、透明理解WiFi通信流程、实现复杂问题简单化、兼顾物联网应用系统的完整性、考虑组件的可增加性及环境多样性、考虑“照葫芦画瓢”的可操作性。AHL-CH32V303-WiFi的设计思想硬件部分包括5V转3.3V电源芯片、三色灯、CH32V303RCT6微控制器及TTL串口-USB芯片，WiFi

模块采用ESP8684H2芯片。硬件设计目标是将

MCU、通信模组、硬件最小系统集成在一个SOC片上，满足大部分终端UE产品的设计需求。AHL-CH32V303-WiFi的硬件资源软件资源包括终端用户程序、云侦听程序、Web

网页程序、微信小程序、远程更新程序等，提供完整的开发套件，支持快速应用开发。面向WiFi通信的软件资源8.1.4金葫芦WiFi开发套件简介7/500103028.1.4金葫芦WiFi开发套件简介8/50金葫芦WiFi开发套件的软件资源，见本书电子资源的【03-Software\CH08】文件夹，主要内容见表8-1。WiFi应用架构及通信基本过程实时操作系统应用开发技术PART-9/508.2从技术科学角度，抽取WiFi应用开发的技术共性，建立涵盖WiFi应用开发知识要素的应用架构，为实现快速规范的应用开发提供理论基础。遵循从个别到一般，再从一般到个别的哲学原理，建立抽象模型，为具体应用开发提供模板。8.2.1建立WiFi应用架构的基本原则10/50WiFi终端

UE：以微控制器为核心，具有数据采集、控制、运算等功能，带有WiFi通信功能的软硬件实体，用于实现特定功能。01WiFi信息邮局

MPO：基于WiFi协议的信息传送系统，运行云侦听程序，起信息传送的桥梁作用，提供固定IP地址与端口。02WiFi人机交互系统

HCI：实现人与WiFi信息邮局之间信息交互、处理与服务的软硬件系统，通过固定IP地址与端口实现与终端UE的信息传输。038.2.2终端UE、信息邮局MPO与人机交互系统HCI的基本定义11/50从应用层面来说，WiFi应用架构可以抽象为WiFi终端UE、WiFi信息邮局MPO、WiFi人机交互系统HCI三个组成部分，如图8-1所示，这种抽象为深入理解WiFi的应用层面开发共性提供理论基础。8.2.2终端UE、信息邮局MPO与人机交互系统HCI的基本定义12/50数据上行过程：终端UE通过WiFi热点将数据发送到云服务器，云服务器将数据存入数据库，人机交互系统从云服务器获取数据。01数据下行过程：人机交互系统将数据发送到云服务器，云服务器将数据发送到终端UE。028.2.3基于信息邮局初略了解基本通信过程13/50终端及云侦听模板的适应性修改实时操作系统应用开发技术PART-14/508.3终端UE程序中需设定WiFi网络名称与密码，以便连接到WiFi热点。这些信息在终端工程的

includes.h

文件中设定。WiFi连接的网络名称与密码终端程序要访问的IP地址与端口在

includes.h

文件中设定，IP

地址是WiFi共享的网段，端口可自行设定。终端要访问的IP地址与端口运行终端程序时，需确保周围没有其他人运行相同程序，否则WiFi网络名称会发生冲突。建议修改程序后再运行观察现象。运行过程注意点0102038.3.1了解终端UE程序中的通信接口信息15/50终端程序中WiFi名称与密码修改处8.3.1了解终端UE程序中的通信接口信息16/50终端程序中要访问的IP地址及端口修改处云侦听程序中还有一个服务于人机交互系统的端口，通过WebSocket协议实现通信，需在AHL.xml文件中设定。云侦听程序CS-Monitor运行的计算机的地址是终端要访问的IP地址，服务于终端的端口在AHL.xml文件中设定，需与终端程序中的端口设置一致。0102云侦听程序CS-Monitor服务于终端的端口云侦听程序CS-Monitor服务于人机交互系统的端口8.3.2了解云侦听程序的通信接口信息17/50<!--【2.2】指定WebSocket服务器地址和端口号与二级目录地址--><!--【2.2.1】指定WebSocket服务器地址和端口号--><WebSocketTarget>ws://:32226</WebSocketTarget><!--【2.2.2】指定WebSocket服务器二级目录地址--><WebSocketDirection>/wsServicesvx/</WebSocketDirection>02云侦听程序CS-Monitor服务于人机交互系统的端口8.3.2了解云侦听程序的通信接口信息18/50复制终端模板并修改下载运行下载后运行，若PC机移动热点未打开，屏幕会显示希望接入的WiFi网络名称及密码信息。开通笔记本电脑的移动热点后，终端UE会连接到热点，但尚未连接到云侦听程序。将终端模板程序复制并改名，修改

includes.h

文件中的端口、WiFi

名称和密码，删除Debug文件夹，编译下载运行。8.3.3运行自己的终端程序19/50将云侦听模板程序复制并改名，修改AHL.xml文件中面向终端UE和人机交互系统的端口。复制云侦听模板并修改运行云侦听程序，等待终端UE发送数据，云侦听程序会收到并显示出终端UE发来的数据。可通过云平台回发数据给终端UE，终端UE接收到回发的数据后会解析并改变自身信息。基本操作步骤IMSI号是WiFi终端的唯一标识，用于与NB-IoT、Cat1、4G等通信方式的编程一致，采用AHL后接MAC地址作为通信时WiFi终端的标识。关于使用IMSI号的说明0102038.3.4运行自己的云侦听程序并连接终端UE20/508.3.4运行自己的云侦听程序并连接终端UE21/50运行04_Resource\AHL.xml文件，等待数秒后，系统会弹出云侦听程序的界面，如图8-8所示。8.3.4运行自己的云侦听程序并连接终端UE22/50运行云侦听程序后，终端UE就可以连接到云侦听程序。等待数秒，云侦听程序就会收到并显示出终端UE发来的数据。如图8-9所示。8.3.4运行自己的云侦听程序并连接终端UE23/50在点击回发数据后等待15秒，云侦听程序会接受到终端数据发送的数据帧，如图8-10所示。011.终端新增一个物联量步骤在终端程序中，增加变量声明、初始化红灯、在初始化用户数据帧结构体函数中给出变量赋初值、根据接收到的状态变量控制红灯，编译并下载运行。022.云端新增一个物联量的步骤在云侦听程序中，添加变量名和显示名，将变量添加至命令“U0”中，运行CS-Monitor测试控制红灯。8.3.5新增一个物理量的方法24/50终端新增一个物联量步骤028.3.5新增一个物理量的方法25/503.运行CS-Monitor测试控制红灯使用“服务器资源管理器”查看数据库，通过“添加连接”选择数据库文件AHL-IoT.mdf，查看数据表Up、Down和Device。设备信息表（Device）：存储终端设备的配置信息，记录与设备配置相关的信息。上行数据表（Up）：存储所有上行的数据，通过命令确定真正有用的字段。下行数据表（Down）：存储所有的下行数据，结构与上行数据表一致。使用封装好的数据库操作类SQLCommand，通过获取数据库连接字符串、创建数据库操纵对象，完成对数据库中表的基本操作，如新增、删除、修改、查询数据。1.查看数据库与表的简单方法2.各数据表的用途3.操作数据库的基本编程方法8.3.6了解数据入库过程26/50设备信息表（Device）：存储终端设备的配置信息，记录与设备配置相关的信息。上行数据表（Up）：存储所有上行的数据，通过命令确定真正有用的字段。下行数据表（Down）：存储所有的下行数据，结构与上行数据表一致。2.各数据表的用途8.3.6了解数据入库过程27/508.3.6了解数据入库过程28/50设备信息表（Device）：存储终端设备的配置信息，记录与设备配置相关的信息。上行数据表（Up）：存储所有上行的数据，通过命令确定真正有用的字段。下行数据表（Down）：存储所有的下行数据，结构与上行数据表一致。2.各数据表的用途运行Web网页实时操作系统应用开发技术PART-29/508.41.Web网页程序的适应性修改将Web网页模板程序拷贝并改名，修改

Web.config

文件中的端口配置，与云侦听程序的WebSocket服务器地址和端口号保持一致。2.运行Web网页程序观察终端实时数据运行终端程序、云侦听程序和Web网页程序，观察终端实时数据。若无数据，需排查移动热点、云侦听界面数据、接口设置等问题。3.终端增加一个红灯后Web页面实时数据对于增加红灯物理量的终端和云侦听程序，Web

网页程序无需修改，即可实现对新增物理量的显示。4.运行Web网页程序注意点在多人同时进行实验时，需按照约定规则设定WiFi网络名称、端口号，避免冲突。8.4.1运行Web源码访问终端UE的数据30/50Web网页“实时数据”页面与终端UE8.4.1运行Web源码访问终端UE的数据31/50具有红灯状态显示的Web实时数据页面在正确运行终端程序、云侦听程序的基础上，运行Web网页程序“Web-LX1-16667”。UE-LX2、CS-LX2正确运行后，仍然运行网页程序Web-LX1-16667，1.添加小灯控制按钮在Web网页程序中添加控制红灯的按钮标签，设置按钮的data-action属性，用于控制红灯的亮灭。2.编写设置小灯按钮的

light_set

事件编写light_set事件处理函数，根据按钮的data-action属性值设置回发命令中关于控制红灯的信息。3.运行Web程序测试控制红灯运行终端程序、云侦听程序和Web程序，测试控制红灯的功能，观察红灯状态的变化。8.4.2在实时数据页面增加控制按钮32/501.添加小灯控制按钮在工程的03_Web\realtime.aspx页面程序中，搜索“【画瓢处1】”的位置，添加新增两个按钮的标签，分别用来控制红灯物理量的亮灭。。8.4.2在实时数据页面增加控制按钮33/50<%--【画瓢处1】添加用户自己的按钮--%><inputid="btn_lighton"class="span2offset8"style="margin-right:70px;"type="button"value="点亮"data-action="on"onclick="light_set(this)"/><inputid="btn_lightoff"class="span2offset10"style="margin-right:70px;"type="button"value="熄灭"data-action="off"onclick="light_set(this)"/>2.编写设置小灯按钮的

light_set

事件在工程的03_Web\realtime.aspx页面程序中，搜索“【画瓢处2】”的位置，添加light_set事件的相关代码，用以处理当用户点击按钮时执行回发控制命令。8.4.2在实时数据页面增加控制按钮34/50<%--【画瓢处2】添加开、关灯按钮事件--%>//=======================================================================//函数名称：light_set//函数参数：无//函数返回：无//函数说明：button为按钮元素本身，利用它来获取按钮身上的各种属性信息//button.data.action=”off”时熄灭小灯，button.data.action=”on”时点亮小灯//=================================================functionlight_set(button){//先将控件全部清除

flag=0;//将全局标志初始化为0varjsonObj=JSON.parse(g_JSon);varobj=jsonObj["data"];varcount=obj.length;//遍历获取文本框中当前值//如果是小灯状态，则

if(obj[i].name=="redlight_state"){if(button.dataset.action==="on")obj[i].value="1";if(button.dataset.action==="off")obj[i].value="0";}}//回发的JSON格式

jsonObj["command"]="send";//回发命令“send”jsonObj["source"]="web";//来源“web”jsonObj["dest"]=g_IMSI;jsonObj["password"]="";varlast=JSON.stringify(jsonObj);//转换为JSON格式发送

ws.send(last);$("#inf_states").html("数据已回发");}for(vari=0;i<count;i++){varstr="#txt_"+obj[i].name;if(str=="#txt_currentTime"){vartimestamp=Date.parse(newDate())+8*3600*1000;obj[i].value=(""+timestamp).slice(0,10);}elseif(str=="#txt_mcuTemp"){vartemp=parseFloat($(str).val())*10+"";obj[i].value=temp;}else{obj[i].value=$(str).val();}3.运行Web程序测试控制红灯运行8.3.5添加了红灯物理量的终端程序【UE-LX2-87654321-16666】和云侦听程序【CS-LX2-16666-16667】以及本节添加了红灯控制按钮的Web程序，出现如图8-14所示的结果，界面中增加了“点亮”和“熄灭”的按钮。8.4.2在实时数据页面增加控制按钮35/50通过WebSocket建立连接，接收云侦听程序推送的数据，解析数据获取物理量信息。数据获取：与云侦听程序实时交互01根据数据结构动态生成前端展示控件，更新控件的值以显示最新设备状态。动态展示：控件的生成与数据填充02使用ECharts绘制图表，增强数据展示的直观性。可视化展示：图表化物理量03允许用户修改参数并通过WebSocket回发到服务器，实现双向交互。数据交互：参数的修改与提交048.4.3如何在Web网页程序中找到对应物联量36/50运行微信小程序实时操作系统应用开发技术PART-37/508.501微信小程序的开发环境为微信开发者工具，可从

/debug/wxadoc/dev/devtools/download.html下载安装。”8.5.1下载安装微信开发者工具38/501.进入微信小程序开发环境首次导入工程，可采用游客模式进入开发环境，导入工程文件夹，创建项目。微信小程序开发环境包括模拟器视图、编辑器视图和调试器视图，通过视图开关选择显示区域。2.了解编辑界面修改app.js文件中的WebSocket服务器地址和端口号，与云侦听程序的设置保持一致。3.修改配置文件中的通信接口信息8.5.2打开微信小程序源码39/5018.5.2打开微信小程序源码40/50微信小程序工程视图8.5.3运行微信小程序观察终端实时数据41/50添加小灯控制按钮在微信小程序页面程序中添加控制红灯的按钮标签，设置按钮的data-action属性。编写设置小灯控制按钮事件编写点击控制小灯按钮的事件处理函数，根据按钮的data-action属性值设置回发命令。运行微信小程序测试控制红灯运行终端程序、云侦听程序和微信小程序，测试控制红灯的功能，观察红灯状态的变化。0102038.5.4在实时数据页面增加按钮42/508.5.4在实时数据页面增加按钮43/50运行8.3.5添加了红灯物理量的终端程序和云侦听程序以及本节添加了红灯控制按钮的Web程序，出现如图8-19所示的结果，界面中增加了“点亮”和“熄灭”的按钮。若终端设备上的红灯为亮，点击“熄灭”按钮并