基于巴法云物联网云平台构建可视化控制网页(以控制LED为例)

0 前言

如今大大小小的物联网云平台非常多,但大部分要收取费用,免费的物联网云平台功能则有很多限制使用起来非常不方便。以百度云物联网云平台为例,它的物可视不支持发布主题,等于可视化界面只能作为数据监控而不具备双向通信的能力。
为了解决这个问题,本文使用免费的巴法云物联网云平台,基于http协议的POST方法实现对LED的控制(使用http的POST方法方便嵌入网页),同时构建一个可视化的控制网页增强人机交互性。

1 使用巴法云创建TCP主题并获得连接参数

(1)登陆巴法云后,在控制台找到TCP创客云,在输入框内输入“LED”,点击“新建主题”创建一个名为“LED”的TCP主题:
在这里插入图片描述
创建成功后可以看到如下主题信息:
在这里插入图片描述
(2)在控制台的左上角查看私钥,这是后面连接巴法云的参数之一
在这里插入图片描述
获得了私钥后,我们就能够构建POST请求报文。参考巴法云的接入文档我们发送POST请求报文的所需参数如下:

API: https://apis.bemfa.com/va/postJsonMsg
请求体:
{"uid": "7801e4ba1bf7406593d47250797860fd","topic": "LED","type": 3,"msg": "on"
}

参数说明:
uid:必须项。用户私钥,前面我们已经获取到。
topic:必须项。主题名,本例是“LED”。
type:必须项。主题类型,当type=1时是MQTT协议,3是TCP协议
msg:必须项。消息体,要推送的消息,自定义即可,比如on,或off等等

2 测试巴法云连接参数是否正确

我们这里使用ApiPost7软件测试一下巴法云连接参数是否正确。根据前面我们获取的参数,构建如下的POST报文:
在这里插入图片描述
点击发送,收到的实时响应如下:
在这里插入图片描述
这说明我们和巴法云物联网云平台的连接正常。
注:
(1)正确返回的格式

{"code": 0,"message": "OK","data": 0
}

(2)错误返回的格式

{"code": 40004,"message": "Uid or topic err","data": null
}

3 构建可视化控制网页

我们在网页里添加2个按钮,分别控制LED亮、灭,也就是修改msg的键值分别为“on”、“off”。源码如下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>LED Control</title><script>function sendGetRequest(on) {var data;const url = 'https://apis.bemfa.com/va/postJsonMsg';const data1 = {"uid": "你的私钥","topic": "LED","type": 3,"msg": "on"};const data2 = {"uid": "你的私钥","topic": "LED","type": 3,"msg": "off"};if (on == 1)data = data1;elsedata = data2;fetch(url, {method: 'POST', // 指定请求方法headers: {'Content-Type': 'application/json' // 设置请求的Content-Type},body: JSON.stringify(data) // 将JSON对象转换为字符串作为请求体}).then(response => {if (response.ok) {return response.json(); // 如果响应成功,解析JSON}throw new Error('Network response was not ok.'); // 如果响应不成功,抛出错误}).then(jsonResponse => {console.log('JSON response:', jsonResponse); // 处理JSON响应数据}).catch(error => {console.error('Request failed:', error); // 处理错误});}</script>
</head><button onclick="sendGetRequest(1)"><img src="./led_on.png" />
</button>
<button onclick="sendGetRequest(0)"><img src="./led_off.png" />
</button>
</html>

4 使用可视化网页控制LED

(1)控制LED亮
使用谷歌内核的浏览器打开控制网页,按下“F12”打开控制台。按下“LED ON”,可以看到控制台返回信息如下:
在这里插入图片描述
说明我们已经成功向巴法云平台发布了主题,打开巴法云平台,可以看到接收到的主题内容“on”以及接收到的时间:
在这里插入图片描述

(2)控制LED灭
使用谷歌内核的浏览器打开控制网页,按下“F12”打开控制台。按下“LED OFF”,可以看到控制台返回信息如下:
在这里插入图片描述
说明我们已经成功向巴法云平台发布了主题,打开巴法云平台,可以看到接收到的主题内容“off”以及接收到的时间:
在这里插入图片描述
至此,我们已经实现了基于巴法云物联网云平台通过可视化网页控制LED功能。
相关源码已经上传至CSDN,有需要可下载:
基于巴法云物联网云平台实现可视化网页控制LED亮灭源码

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/597756.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

练习题(2024/4/6)

1最接近的三数之和 给你一个长度为 n 的整数数组 nums 和 一个目标值 target。请你从 nums 中选出三个整数&#xff0c;使它们的和与 target 最接近。 返回这三个数的和。 假定每组输入只存在恰好一个解。 示例 1&#xff1a; 输入&#xff1a;nums [-1,2,1,-4], target …

cJSON(API的详细使用教程)

我们今天来学习一般嵌入式的必备库&#xff0c;JSON库 1&#xff0c;json和cJSON 那什么是JSON什么是cJSON&#xff0c;他们之间有什么样的关联呢&#xff0c;让我们一起来探究一下吧。 JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&…

特征提取算法

特征提取算法 0. 写在前边1. Harris算法1.1 写在前面1.2 Harris算法的本质1.3 Harris算法的简化 2. Harris3D2.1 Harris3D算法问题定义2.2 Harris3D with intensity2.3 Harris3D without intensity 3. ISS特征点的应用 0. 写在前边 本篇将介绍几种特征提取算法&#xff0c;特征…

ASP.Net添加Swagger注释

文章目录 Swagger添加Swagger注释 Swagger 添加Swagger注释 1、右击项目->选择属性->点击生成->输出&#xff0c;选中文档文件 2、配置服务 在program.cs 文件里配置SwaggerUI //增加项一 builder.Services.AddSwaggerGen(c> {c.SwaggerDoc("v1", ne…

前端开发学习笔记 3 (Chrome浏览器调试工具、Emmet语法、CSS复合选择器、CSS元素选择模式、CSS背景)

文章目录 Chrome浏览器调试工具Emmet语法CSS复合选择器后代选择器子选择器并集选择器伪类选择器 CSS元素选择模式元素选择模式概述CSS块标签CSS行内标签CSS行内块标签CSS元素显示模式转换 CSS背景CSS背景颜色CSS背景图片CSS背景图片平铺CSS背景图片位置CSS背景图片固定CSS背景复…

AWS的优劣势分析,适用于哪些行业?

AWS相较于其他云厂商&#xff0c;起步早&#xff0c;产品成熟及涉及范围广&#xff0c;具有高度适配性&#xff0c;多年来一直引领着IaaS市场&#xff0c;服务器的可用性比其他的云厂商要高&#xff0c;并且在全球25个地区拥有81个可用性区域&#xff0c;基本上辐射范围已经涵盖…

【javaWeb补充篇配置Bean】XML配置Bean

XML配置bean 配置BeanBean的声明周期bean的销毁时机 依赖注入方式自动装配集合注入加载properties文件容器类层次结构图 配置Bean 以配置文件的形式配置Bean 在资源目录下创建.xml文件进行对Bean的配置 在创建文件之前还首先需要引入spring中spring-context的依赖 <depende…

深入研究:我国工业实时操作系统的核心技术与演进路径

实时操作系统&#xff08;RTOS&#xff09;在各类工业场景中发挥着中枢神经系统的关键作用&#xff0c;是数字化工业的重要基础。当前&#xff0c;全球大部分工业实时操作系统市场被国外厂商占据&#xff0c;围绕主流RTOS产品内核提供了完备的上下游软件配套&#xff0c;并以嵌…

RTX RTOS 操作实例分析之---线程(thread)

0 Preface/Foreword 1 线程&#xff08;thread&#xff09; 1.1 线程定义 1.1.1 USE_BASIC_THREADS&#xff08;宏定义&#xff09; 经过以上步骤&#xff08;makefile包含&#xff09;&#xff0c;USE_BASIC_THREADS在编译阶段被定义到相应的模块中。 1.1.2 定义线程ID变量…

开启虚拟机时出现此主机支持 Intel VT-x,但 Intel VT-x 处于禁用状态怎么解决

问题描述 虚拟机安装完成后&#xff0c;点击开启此虚拟机弹出系统提示 原因分析&#xff1a; Intel VT-x 处于禁用状态&#xff0c;需要开启。 解决方案&#xff1a; 以联系小新笔记本电脑为例&#xff0c;进入BIOS界面&#xff0c;将Intel Virtual Technology设置成Enabl…

什么是物联网云平台

在信息化和智能化浪潮的推动下&#xff0c;物联网云平台作为连接物理世界与数字世界的桥梁&#xff0c;正日益成为企业数字化转型的关键支撑。物联网云平台通过集成先进的云计算、大数据分析和人工智能等技术&#xff0c;为企业提供了高效、安全、智能的数据处理和应用服务&…

主食冻干哪个牌子好?热门大牌真实实测分享,轻松避雷!

在选购主食冻干时&#xff0c;很多铲屎官都面临着选进口还是国产的难题。很多铲屎官认为进口产品在品控和配方上更优秀&#xff0c;但实际营养指标却逊于国产&#xff0c;价格也不菲。所以不免选购时会犹豫&#xff0c;最后抱着试一试的心态盲入主食冻干&#xff0c;运气好&…