无法使用 paho-mqtt-javascript 将网页连接到 MQTT 代理答案

【问题标题】：failed to connect webpage to MQTT broker using paho-mqtt-javascript无法使用 paho-mqtt-javascript 将网页连接到 MQTT 代理
【发布时间】：2022-06-19 21:43:38
【问题描述】：

我正在使用 mosquitto MQTT 代理（ip：192.168.1.61 和端口：1883）这是我的 HTML 代码：

<html>
<head>
  <title>My First Value</title>
<h1>Main Body</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>
 </head>
<body>
<h1><div id="connstatus">
Mqtt Not connected.</div></h1>
</body>
<script>

var host = "192.168.1.61";
var port=1883;
var user="Fares";
var pass="1+4=5";
// Create a client instance
client = new Paho.MQTT.Client(host,1883, "clientId");

// set callback handlers
client.onConnectionLost = onConnectionLost;
client.onMessageArrived = onMessageArrived;

// connect the client
client.connect({onSuccess:onConnect});


// called when the client connects
function onConnect() {
  // Once a connection has been made, make a subscription and send a message.
  console.log("onConnect");
  client.subscribe("World");
  message = new Paho.MQTT.Message("Hello");
  message.destinationName = "World";
  client.send(message);
}

// called when the client loses its connection
function onConnectionLost(responseObject) {
  if (responseObject.errorCode !== 0) {
    console.log("onConnectionLost:"+responseObject.errorMessage);
  }
}

// called when a message arrives
function onMessageArrived(message) {
  console.log("onMessageArrived:"+message.payloadString);
}
</script>
</html>

这是我的 .config 文件：

听众 8883

keyfile /mosquitto/config/certs/broker.key

监听 8083 协议 websockets

keyfile /mosquitto/config/certs/broker.key

require_certificate false

persistence true persistence_location /mosquitto/data/

错误：控制台：

WebSocket connection to 'wss://192.168.1.61:1883/mqtt' failed: Error in connection establishment: net::ERR_CONNECTION_RESET
Paho.MQTT.ClientImpl._doConnect @   mqttws31.js:977
Paho.MQTT.ClientImpl._disconnected  @   mqttws31.js:1459
Paho.MQTT.ClientImpl._on_socket_error   @   mqttws31.js:1347
(anonymous) @   mqttws31.js:157

【问题讨论】：

请不要发布文本图像，日志文件应以文本形式发布并格式化（例如作为代码）。因为对于使用屏幕阅读器或搜索的人来说，它很难阅读并且不可能。
知道了，抱歉，我要编辑一下
我的意思是两个日志。

标签： websocket mqtt paho

【解决方案1】：

端口 1883 是 Native MQTT 的默认值，而不是 MQTT over WebSockets。

Paho Javascript 驱动程序要求代理支持并配置为接受来自使用 MQTT over WebSockets 的客户端的连接。

你的 mosquitto.conf 看起来有点古怪（协议元素应该在自己的行中），它应该是这样的：

listener 8883
keyfile /mosquitto/config/certs/broker.key

listener 8083
protocol websockets
keyfile /mosquitto/config/certs/broker.key
require_certificate false

persistence true persistence_location /mosquitto/data/

看来您已经在端口 8083 上配置了 WebSocket 侦听器，因此您的代码应该使用该端口而不是 1883

var host = "192.168.1.61";
var port= 8083;

此外，要启用 MQTT over TLS 和 MQTT over Secure Websockets，您还需要包含 certfile 条目以及 keyfile

【讨论】：

【解决方案2】：

我知道这是一个旧博客……但我也面临着类似的挑战。尝试从 JS 连接到 mqtt 服务器，但失败:( 请帮忙。

js代码：

//初始化新的Paho客户端连接 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,
onFailure: onConnectFail,
username : "guest",
password : "123"
});

}

【讨论】：