问题遇到的现象和发生背景
我在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('{"cmd":"AA"}')">蜂鸣
</button>
<button style="background:greenyellow"
onclick="oper_machine('{"data":["A2"]}')">前进
</button>
<button class="middle-btn" style="background:red" onclick="oper_machine('{"data":["A3"]}')">停止
</button>
<button class="middle-btn" style="background:deepskyblue"
onclick="oper_machine('{"data":["A4"]}')">后退
</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已经改完源,可以使用