Seawise
2022-06-01 15:21
采纳率: 100%
浏览 199

单独的html文件 直接访问mqtt

问题遇到的现象和发生背景

我在101.200.239.3:1883有个mqtt服务
我想做一个简单的html里面有javascript的,可以给这个服务器publish一些信息
网页是基于flask搭的

这个功能是做原型展示,所以就用微信直接把链接发过去,他就可以在网页上操作了。
后续会做进小程序里,现在先不考虑

问题相关代码,请勿粘贴截图

flask

@app.route('/iot_oper', methods=['GET'])
def iot_oper():
    data = request.args
    dev_id = data['dev_id']
    return render_template('iot_oper.html', dev_id=dev_id)

template/iot_oper.html




<!DOCTYPE html>
<html lang="en">
<head>
    {#    <meta >#}
{#    <meta charset="UTF-8"/>#}
        <meta charset="UTF-8" name="viewport"
              content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0"/>
    <title>名瑞运苗车控制系统</title>
    <style>
        .page {
            display: block;
        {#justify-content: center;#}{#text-align: center;#}
        }

        .form-row {
            display: flex;
            margin: 30px auto;
            text-align: center;
            width: min-content;
        }

        .dev_id {
            display: inherit;
            text-align: center;
            width: min-content;
        }

        .middle-btn {
            border: black 1px solid;
            text-align: center;
            margin: 30px auto;
            display: inherit;
            width: 150px;
            height: 40px;
        }

        label {
            text-align: center;
        }
    </style>
    {#    <script type="text/javascript" src="">#}
    <script src="https://unpkg.com/mqtt@4.0.1/dist/mqtt.js"></script>
    <script type="text/javascript">

  就是下面这个函数不好用
        function oper_machine(cmd) {
            var dev_id = document.getElementById('dev_id').value;
            {#var mqtt = require('mqtt');#}
            var client = mqtt.connect('ws://101.200.239.3');  
            {#var client = mqtt.connect('mqtt://test.mosquitto.org');#}
            client.on('connect', function () {
                console.log('>>> connected')
                // client.subscribe('/tips')
                setInterval(
                    () => {
                        client.publish("MingRui/" + dev_id + "/set", cmd);
                    },
                    3000
                );
            })
        }
    </script>
</head>

<body>
<div class="page">
    <div class="form-row">
        <div class="label">设备ID:</div>
        <input id="dev_id" class="dev_id" value="{{ dev_id }}"></div>
    <button style="background:yellow" onclick="oper_machine('{&quot;cmd&quot:&quot;AA&quot}')">蜂鸣
    </button>
    <button style="background:greenyellow"
            onclick="oper_machine('{&quot;data&quot:[&quot;A2&quot]}')">前进
    </button>
    <button class="middle-btn" style="background:red" onclick="oper_machine('{&quot;data&quot:[&quot;A3&quot]}')">停止
    </button>
    <button class="middle-btn" style="background:deepskyblue"
            onclick="oper_machine('{&quot;data&quot:[&quot;A4&quot]}')">后退
    </button>
</div>
</body>
</html>


运行结果及报错内容
WebSocket connection to 'ws://101.200.239.3/' failed: Could not connect to the server.

WebSocket connection to 'ws://101.200.239.3/' failed: There was a bad response from the server
我的解答思路和尝试过的方法

最开始的方案是html去访问后台接口,接口去publish。但是没搞明白为什么,每次都是flask重启前几分钟好用,之后就不行了。
接口可以访问,也可以正常运行里面的代码,也会触发publish的函数,但mqtt接收端就是没反应
代码如下

@app.route('/iot_test', methods=['GET'])
def iot_test():
    data = request.args
    dev_id = data['dev_id']
    payload = data['cmd']
    print(payload)
    # 下面这行  就不publish了
    client.publish('MingRui/%s/set' % dev_id, payload)
    # print 还能正常显示,我就很奇怪了
    print('MingRui/%s/set' % dev_id, payload)
    return payload

这个方案不准备用了,感觉还是网页直接去publish比较方便

我想要达到的结果

我看了一圈各种教程,还是不会
有可能需要登录服务器后台操作
系统环境:阿里云centos8 。yum已经改完源,可以使用

4条回答 默认 最新

相关推荐 更多相似问题