实现网页+emq控制掌控板亮灯

最新推荐文章于 2023-06-04 22:10:45 发布

damo_

最新推荐文章于 2023-06-04 22:10:45 发布

阅读量375

点赞数 2

分类专栏：云服务器 mqtt 文章标签： mqtt 云端

本文链接：https://blog.csdn.net/damo_/article/details/116270884

版权

mqtt 同时被 2 个专栏收录

4 篇文章 2 订阅

订阅专栏

云服务器

3 篇文章 0 订阅

订阅专栏

实现网页+emq控制掌控板亮灯

用mind+写一段程序控制掌控板连接siot。
实现siot控制掌控板亮灯。
网页控制掌控板亮灯。
使用emq桥接功能与掌控板通信。

1.用mind+写一段程序控制掌控板连接siot

打开SioT1.3
在这里插入图片描述

查找本机所连接的WLAN，可知是192.168.31.28
在这里插入图片描述
根据config.json文件提供的账号密码及端口登录进siot，IP地址+:8080，
发送消息建立一个topic。

使用示例程序连接上siot，代码块如下。

在这里插入图片描述

2.实现siot控制掌控板亮灯

连接siot的测试完毕，换上点灯程序
在这里插入图片描述
在siot发送“ledRedOn”，成功点灯。

3. 网页控制掌控板亮灯

网页代码如下，将http://192.168.31.28:8080/publish?topic=2018A14129/dh&msg=ledRedOn&iname=siot&ipwd=dfrobot里面的数据逐个替换为自己的IP、topic、name、pwd。（其他的不用动）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="jquery-2.1.4.min.js"></script>
    <script src="jquery.cookie.min.js"></script>
    <link rel="stylesheet" href="style.css" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="bootstrap.min.js"></script>
    <script src="vue.js"></script>
    <!-- <script src="app.js"></script> -->
    <title></title>
    <meta name="description" />
</head>

<body>
    <div class="container text-center"><img width="300px" src="./assets/siot.png" alt=""></div>
    <div class="container text-center">
        <button type="button" id="ledRedOn" class="btn btn-success btn-lg">红灯开</button>
        <button type="button" id="ledRedOff" class="btn btn-info btn-lg">红灯关</button>
    </div>
    <br>
    <div class="container text-center">
        <button type="button" id="ledGreenOn" class="btn btn-success btn-lg">绿灯开</button>
        <button type="button" id="ledGreenOff" class="btn btn-info btn-lg">绿灯关</button>
    </div>
    <br>
    <div class="container text-center">
        <button type="button" id="ledBlueOn" class="btn btn-success btn-lg">蓝灯开</button>
        <button type="button" id="ledBlueOff" class="btn btn-info btn-lg">蓝灯关</button>
    </div>

    <script>
        $(function() {
            $('#ledRedOn').click(function() {
                $.get("http://192.168.31.28:8080/publish?topic=2018A14129/dh&msg=ledRedOn&iname=siot&ipwd=dfrobot");
            });
            $('#ledRedOff').click(function() {
                $.get("http://192.168.31.28:8080/publish?topic=2018A14129/dh&msg=ledRedOff&iname=siot&ipwd=dfrobot");
            });
            $('#ledGreenOn').click(function() {
                $.get("http://192.168.31.28:8080/publish?topic=2018A14129/dh&msg=ledGreenOn&iname=siot&ipwd=dfrobot");
            });
            $('#ledGreenOff').click(function() {
                $.get("http://192.168.31.28:8080/publish?topic=2018A14129/dh&msg=ledGreenOff&iname=siot&ipwd=dfrobot");
            });
            $('#ledBlueOn').click(function() {
                $.get("http://192.168.31.28:8080/publish?topic=2018A14129/dh&msg=ledBlueOn&iname=siot&ipwd=dfrobot");
            });
            $('#ledBlueOff').click(function() {
                $.get("http://192.168.31.28:8080/publish?topic=2018A14129/dh&msg=ledBlueOff&iname=siot&ipwd=dfrobot");
            });
        });
    </script>
</body>

</html>

具体js等文件我放在这里：
链接：https://pan.baidu.com/s/1i7QpIqI8LOD_GzZBUhdEHQ
提取码：3uu4
网页效果如下：点击开关灯可直接控制掌控板。
在这里插入图片描述

4. 使用emq桥接功能与掌控板通信

去emq官网安装emq环境在本机，教程如图所示。
在这里插入图片描述
输入本机IP地址加18083端口号进入emq面板（如127.0.0.1:18083），进入后在规则引擎点击资源并创建。

点击工具进入websocket修改主机地址和端口号等。

在下面修改topic，改为siot上设置的topic，发送ledRedOn，使用emq桥接功能与掌控板通信完成。
在这里插入图片描述

damo_

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
实现网页+emq控制掌控板亮灯

实现网页+emq控制掌控板亮灯用mind+写一段程序控制掌控板连接siot。实现siot控制掌控板亮灯。网页控制掌控板亮灯。使用emq桥接功能与掌控板通信。1.用mind+写一段程序控制掌控板连接siot打开SioT1.3查找本机所连接的WLAN，可知是192.168.31.28根据config.json文件提供的账号密码及端口登录进siot，IP地址+:8080，发送消息建立一个topic。使用示例程序连接上siot，代码块如下。2.实现siot控制掌控板亮灯连接sio
复制链接

扫一扫