我的机器上正在运行mosquitto MQTT代理。我想从浏览器运行MQTT客户端。这是我在Django应用程序中所做的：
<html>
<head>
<title>Mosquitto Websockets</title>
{% load staticfiles %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="{% static 'js/mqttws31-min.js' %}" type="text/javascript"></script>
<script src="{% static 'js/jquery.min.js' %}" type="text/javascript"></script>
<script src="{% static 'js/config.js' %}" type="text/javasacript"></script>
<script type="text/javascript">
var mqtt;
var reconnectTimeout = 2000;
function MQTTconnect() {
host = '127.0.0.1';
port = 1883;
useTLS = false;
cleansession = true;
username = null;
password = null;
mqtt = new Paho.MQTT.Client(host, port,
"myclientid_" + parseInt(Math.random() * 100, 10));
/*mqtt = new Messaging.Client(
host,
port,
"web_" + parseInt(Math.random() * 100,
10));
*/
var options = {
timeout: 3,
useSSL: useTLS,
cleanSession: cleansession,
onSuccess: onConnect,
onFailure: function (message) {
$('#status').val("Connection failed: " + message.errorMessage + "Retrying");
setTimeout(MQTTconnect, reconnectTimeout);
}
};
mqtt.onConnectionLost = onConnectionLost;
mqtt.onMessageArrived = onMessageArrived;
if (username != null) {
options.userName = username;
options.password = password;
}
console.log("Host="+ host + ", port=" + port + " TLS = " + useTLS + " username=" + username + " password=" + password);
mqtt.connect(options);
}
function onConnect() {
$('#status').val('Connected to ' + host + ':' + port);
// Connection succeeded; subscribe to our topic
mqtt.subscribe(topic, {qos: 0});
$('#topic').val(topic);
}
function onConnectionLost(response) {
setTimeout(MQTTconnect, reconnectTimeout);
$('#status').val("connection lost: " + responseObject.errorMessage + ". Reconnecting");
};
function onMessageArrived(message) {
var topic = message.destinationName;
var payload = message.payloadString;
$('#ws').prepend('<li>' + topic + ' = ' + payload + '</li>');
};
$(document).ready(function() {
MQTTconnect();
});
</script>
</head>
<body>
<h1>Mosquitto Websockets</h1>
<div>
<div>Subscribed to <input type='text' id='topic' disabled />
Status: <input type='text' id='status' size="80" disabled /></div>
<ul id='ws' style="font-family: 'Courier New', Courier, monospace;"></ul>
</div>
</body>
</html>
我知道
WebSocket connection to 'ws://127.0.0.1:1883/mqtt' failed: Error during WebSocket handshake: net::ERR_CONNECTION_RESET mqttws31-min.js:15
Host=127.0.0.1, port=1883 TLS = false username=null password=null (index):47
我对此并不陌生，因此无法解决。有帮助吗？
编辑1：我调整了配置文件，现在它成功连接到test.mosquitto.org:8080。我订阅了＃，但无法检索已发布的消息。我认为函数onMessageArrived(message)无法正常工作。控制台中没有错误，因此无法识别任何错误。
<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9mT21Nby5wbmcifQ==” alt =“在此处输入图像描述”>
您确定已将代理配置为在端口1883上接受websockets连接吗？默认情况下，您希望它监听的是MQTT连接，而不是websockets。
这里是一个运行“ Websockets上的MQTT”服务器的站点，该URL可充当客户端，因此您可以发布，然后让自己的浏览器充当订阅给定主题的客户端
根据您的评论@toothie