OneNET 第三方数据展示

前言

为了解决 OneNet 数据在前端的免费调用（自定义前端界面），我们使用 OneNet 官方提供的数据API接口，实现前端的实时展示，其效果如下图所示。

前期准备

OneNet  账号
PHP 开发环境
API 调试工具

账号配置

1.进入 OneNet 后台

2.创建一个产品

在这里我们选择 多协议接入 的 HTTP 协议，这个协议适合于只接收数据的产品，当然其他的协议方法也是类似。

产品名称、行业、类型都随便写一下，下面的技术参数也是随意配置，可以参考上图。

3.添加设备

选择 设备列表 - 添加设备

设备名称 、 编号随便写一下点击添加即可

4.生成API KEY

API KEY名称随意填写即可，而后点击添加

网页开发

1.获取数据

向 OneNet 服务器发送 GET 请求

$url = "http://api.zj.cmcconenet.com/devices/XXXXXXX/datastreams/"; 
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_HTTPHEADER, array(
    "Content-Type: application/json",
    "api-key: XXXXXXXXXXX"
));
$response = curl_exec($curl);
curl_close($curl);

2.取得数据

{
    "errno": 0,
    "data": [
        {
            "create_time": "2023-05-17 16:02:34",
            "update_at": "2023-05-20 22:45:54",
            "id": "xinlv",
            "uuid": "57a6d82e-6791-43ae-a5d1-3d1d44cda2d1",
            "current_value": " 82"
        },
        {
            "create_time": "2023-05-17 16:02:34",
            "update_at": "2023-05-20 22:45:54",
            "id": "xueyang",
            "uuid": "7af8f19a-3421-413b-8898-172264781a54",
            "current_value": " 97"
        }
    ],
    "error": "succ"
}

3.前端显示

可以观察到我们要的数据分别在data下的第0和第1位，我们用js将分别将current_value的值取出，并让前端实时显示，设置一个重复执行的函数，让这个过程无限重复执行。

$.getJSON('./data.php', function (datax) {  
	$('#a_temp').text(datax['data'][0]['current_value'])
	$('#b_temp').text(datax['data'][1]['current_value'])
})

<span id="a_temp"></span>
<span id="b_temp"></span>

function getRemote () {
			setTimeout(getRemote,500);
}

4.历史数据

方法和上面基本一样 GET 的 URL 替换为下代码即可

//将 XXXXXXXX 值替换为设备ID ，QQQ 改成变量名
$url = "http://api.zj.cmcconenet.com/devices/XXXXXXXX/datapoints?datastream_id=QQQ&limit=100"; 

效果展示

数据可以实时显示在前端，运行效果完美。 

源码下载

下载地址：OneNET 第三方数据展示 | New Worlds