WebSocket连接Mosquitto测试Broker失败求助

我查遍Stack Overflow同类问题仍未找到原因，尝试通过WebSocket连接Mosquitto测试Broker，主机和端口配置确认无误，但打开websockets-4.htm文件后出现连接失败，错误日志如下：

connecting to test.mosquitto.org
WebSocket connection to 'ws://test.mosquitto.org:8080/mqtt' failed
  k._doConnect @mqttws31.min.js:36
  k.connect @mqttws31.min.js:31
  I.connect @mqttws31.min.js:65
  MQTTconnect @websockets-4.htm:53
  (anonymous) @websockets-4.htm:61

附上websockets-4.htm文件内容（注：刚添加了onFailure回调函数，不确定是否为有效属性）：

<html>
<head>
  <title>MQTT WebSocket Example</title>
  <style></style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript">
  </script>
  <script type = "text/javascript" language="javascript">
    var mqtt;
    
    host = "test.mosquitto.org"
    port = 8080;
    clientId = "myclientid111_" + parseInt(Math.random() * 100, 10)
    
// Create a client instance
    var client = new Paho.MQTT.Client(host, Number(port), clientId);
    
// set callback handlers
    client.onConnectionLost = onConnectionLost;
    client.onMessageArrived = onMessageArrived;
    client.onFailure = onFailedConnection;
    
// called when the client connects
    function onConnect() {
      console.log("onConnect");
      message = new Paho.MQTT.Message("topic1");
      message.destinationName = "topic1";
      client.send(message);
    }
    
// called when the client loses its connection
    function onConnectionLost(responseObject) {
      if (responseObject.errorCode !== 0) {
        console.log("onConnectionLost:"+responseObject.errorMessage);
      }
    }
    
    function onFailedConnection(responseObject) {
      if (responseObject.errorCode !== 0) {
        console.log("onFailedConnection:"+responseObject.errorMessage);
      }
    }
    
// called when a message arrives
    function onMessageArrived(message) {
      console.log("onMessageArrived:"+message.payloadString);
    }
    
    
    function MQTTconnect() {
      console.log("connecting to " + host);
// connect the client
//client.connect({onSuccess:onConnect});
client.connect({onSuccess:onConnect, cleanSession:true, useSSL:false, keepAliveInterval:10}); // line 53
}

</script>
</head>
<body>
  <h1>Main Body</h1>
  <script>
MQTTconnect();  // line 61
</script>
</body>
</html>

问题排查与解决 #

1. 端口与SSL配置不匹配 #

test.mosquitto.org的8080端口对应加密WebSocket（wss协议），但你设置了useSSL:false，导致协议不匹配连接失败。两种解决方式：

• 保持端口8080，将useSSL改为true；
• 改用非加密WebSocket端口8081，保持useSSL:false。

2. 无效的onFailure回调绑定方式 #

Paho MQTT JavaScript客户端不支持client.onFailure这种直接挂载的回调，正确做法是在connect方法的配置参数中传入onFailure函数。

3. 消息内容与主题混淆 #

你在onConnect中把主题字符串"topic1"当成了消息内容，建议改为实际要发送的内容，避免逻辑混淆。

修改后的代码示例 #

<html>
<head>
  <title>MQTT WebSocket Example</title>
  <style></style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript">
  </script>
  <script type = "text/javascript" language="javascript">
    var mqtt;
    
    host = "test.mosquitto.org"
    port = 8080;
    clientId = "myclientid111_" + parseInt(Math.random() * 100, 10)
    
    // Create a client instance
    var client = new Paho.MQTT.Client(host, Number(port), clientId);
    
    // set callback handlers
    client.onConnectionLost = onConnectionLost;
    client.onMessageArrived = onMessageArrived;
    
    // called when the client connects
    function onConnect() {
      console.log("onConnect");
      // 区分消息内容与主题
      message = new Paho.MQTT.Message("Hello from MQTT WebSocket");
      message.destinationName = "topic1";
      client.send(message);
    }
    
    // called when the client loses its connection
    function onConnectionLost(responseObject) {
      if (responseObject.errorCode !== 0) {
        console.log("onConnectionLost:"+responseObject.errorMessage);
      }
    }
    
    function onFailedConnection(responseObject) {
      if (responseObject.errorCode !== 0) {
        console.log("onFailedConnection:"+responseObject.errorMessage);
      }
    }
    
    // called when a message arrives
    function onMessageArrived(message) {
      console.log("onMessageArrived:"+message.payloadString);
    }
    
    function MQTTconnect() {
      console.log("connecting to " + host);
      // 修正SSL配置与回调绑定方式
      client.connect({
        onSuccess: onConnect,
        onFailure: onFailedConnection,
        cleanSession: true,
        useSSL: true,
        keepAliveInterval: 10
      });
    }

</script>
</head>
<body>
  <h1>Main Body</h1>
  <script>
MQTTconnect();
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者garrettb