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;
else
data = 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亮灭源码