javascript - 无法使用 Javascript 连接到 localhost Mosquitto Broker?
问题描述
我有一个运行 Mosquitto Broker 的树莓派,它连接到内置 MQTT 协议的传感器模块。如果我在终端中使用此代码,我可以订阅并查看我的数据返回。
mosquitto_sub -h 169.254.118.199 -t Advantech/00D0C9FA9984/data
在我的 HTML/Javascript 中使用 websocket 方法时,我无法建立连接。我不是 100% 确定我需要指定哪个端口,我已经看到大多数帖子使用端口 1883 但这似乎不起作用。在终端中,不需要端口。
这在终端中运行时有效,我想通过我的 Web 应用程序执行相同的任务。
我的 mosquitto.conf 看起来像这样:
# 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/
在 Web 浏览器控制台中,我可以看到连接请求超时。
<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 相当陌生。
解决方案
正如我在评论中所说,默认情况下,mosquitto 默认情况下不会配置 MQTT over WebSockets 侦听器。
Paho MQTT JavaScript 客户端只能通过 MQTT over WebSockets 连接到代理。
要通过 WebSockets 添加 MQTT,您需要将以下内容添加到 mosquitto.conf 文件(或 中的文件/etc/mosquitto/conf.d
)
listener 8083
protocol websockets
然后,您需要确保客户端连接到端口8083
推荐阅读
- javascript - 如何从 Promise 中检索数据
- python - PowerBI 中的 Python
- ios - SFAuthenticationManager 在 6.0 中已弃用
- python - 如何使用 Selenium 在 Yahoo Finance 上单击按钮
- mysql - STR_TO_DATE 返回不正确的小时值
- javascript - Ajax 请求不断翻倍
- java - 如何从终端上的java文件创建tomcat应用程序
- apache-spark - Spark - 忽略损坏的文件
- php - 如何在 symfony 4 中根据域扩展设置默认语言环境?
- php - 在用户在特定时间段后访问网站后创建弹出窗口