无法使用Javascript连接到localhost Mosquitto Broker? [英] Can't connect to localhost Mosquitto Broker with Javascript?
问题描述
我有一个运行有Mosquitto Broker的树莓派pi，该pi已连接到内置了MQTT协议的传感器模块.如果我在终端中使用此代码，则可以订阅并看到我的数据返回.
I have a raspberry pi with a Mosquitto Broker running on it connected to a sensor module with MQTT Protocol inbuilt. If I use this code in terminal, I can subscribe and see my data coming back.
mosquitto_sub -h 169.254.118.199 -t Advantech/00D0C9FA9984/data
在HTML/Javascript中使用websocket方法时，无法建立连接.我不确定100％需要指定哪个端口，我已经看到大多数使用端口1883的帖子，但这似乎不起作用.在终端中，不需要端口.
When using a websocket method in my HTML/Javascript I can't make a connection. I am not 100% sure what port I need to specify, I have seen most posts using port 1883 but this doesn't seem to work. In terminal there is no port required.
这在终端机中运行时是有效的，我想通过Web应用程序执行相同的任务.
This is working when running in the Terminal, I want to perform the same task through my web application.
我的mosquitto.conf看起来像这样:
My mosquitto.conf looks like this:
# Place your local configuration in /etc/mosquitto/conf.d/
#
# A full description of the configuration file is at
# /usr/share/doc/mosquitto/examples/mosquitto.conf.example
pid_file /var/run/mosquitto.pid
persistence true
persistence_location /var/lib/mosquitto/
#log_dest file /var/log/mosquitto/mosquitto.log
log_dest topic
log_type error
log_type warning
log_type notice
log_type information
include_dir /etc/mosquitto/conf.d
我正在连接到我们的网页 http://192.168.1.40:5000/
The webpage i am connecting to us http://192.168.1.40:5000/
在Web浏览器控制台中，我可以看到连接请求正在超时.
In the web browser console, I can see that the connection request is timing out.
<div class="wrapper">
<h1>mqtt-demo</h1>
<form id="connection-information-form">
<b>Hostname or IP Address:</b>
<input id="host" type="text" name="host" value="169.254.118.199">
<br>
<b>Port:</b>
<input id="port" type="text" name="port" value="1883"><br>
<b>Topic:</b>
<input id="topic" type="text" name="topic"
value="Advantech/00D0C9FA9984/data"><br><br>
<input type="button" onclick="startConnect()" value="Connect">
<input type="button" onclick="startDisconnect()"
value="Disconnect">
</form>
<div id="messages"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-
mqtt/1.0.1/mqttws31.js" type="text/javascript">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
// Called after form input is processed
function startConnect() {
// Generate a random client ID
clientID = "clientID-" + parseInt(Math.random() * 100);
// Fetch the hostname/IP address and port number from the form
host = document.getElementById("host").value;
port = document.getElementById("port").value;
// Print output for the user in the messages div
document.getElementById("messages").innerHTML += '<span>Connecting to:
' + host + ' on port: ' + port + '</span><br/>';
document.getElementById("messages").innerHTML += '<span>Using the
following client value: ' + clientID + '</span><br/>';
// Initialize new Paho client connection
client = new Paho.MQTT.Client(host, Number(port), clientID);
// Set callback handlers
client.onConnectionLost = onConnectionLost;
client.onMessageArrived = onMessageArrived;
// Connect the client, if successful, call onConnect function
client.connect({
onSuccess: onConnect,
});
}
// Called when the client connects
function onConnect() {
// Fetch the MQTT topic from the form
topic = document.getElementById("topic").value;
// Print output for the user in the messages div
document.getElementById("messages").innerHTML += '<span>Subscribing to: '
+ topic + '</span><br/>';
// Subscribe to the requested topic
client.subscribe(topic);
}
// Called when the client loses its connection
function onConnectionLost(responseObject) {
document.getElementById("messages").innerHTML += '<span>ERROR:
Connection lost</span><br/>';
if (responseObject.errorCode !== 0) {
document.getElementById("messages").innerHTML += '<span>ERROR: ' +
+ responseObject.errorMessage + '</span><br/>';
}
}
// Called when a message arrives
function onMessageArrived(message) {
console.log("onMessageArrived: " + message.payloadString);
document.getElementById("messages").innerHTML += '<span>Topic: ' +
message.destinationName + ' | ' + message.payloadString + '</span>
<br/>';
}
// Called when the disconnection button is pressed
function startDisconnect() {
client.disconnect();
document.getElementById("messages").innerHTML +=
'<span>Disconnected</span><br/>';
}
</script>
</head>
<head>
<meta http-equiv="refresh" content="450">
</head>
</html>
我希望连接成功，并且MQTT有效负载数据.我对MQTT相当陌生.
I expect a successful connection and the MQTT payload data. I am fairly new to MQTT.
推荐答案
默认情况下，我在评论中说过，mosquitto不会默认通过WebSockets侦听器配置MQTT.
As I said in the comments by default mosquitto does not configure a MQTT over WebSockets listener by default.
Paho MQTT JavaScript客户端只能通过WebSockets上的MQTT连接到代理.
The Paho MQTT JavaScript client can only connect to a broker via MQTT over WebSockets.
要通过WebSockets添加MQTT，您需要将以下内容添加到mosquitto.conf文件(或/etc/mosquitto/conf.d中的文件)
To add a MQTT over WebSockets you need to add the following to the mosquitto.conf file (or to a file in /etc/mosquitto/conf.d)
listener 8083
protocol websockets
然后，您需要确保客户端连接到端口8083
You would then need to make sure the client is connecting to port 8083
这篇关于无法使用Javascript连接到localhost Mosquitto Broker?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
