通过网络套接字将网页连接到 MQTT 代理

Question

我在 cloudMQTT 创建了 mqtt 代理，这是我得到的有关端口和服务器的信息

现在我将该代码写入运行连接到该代理并发送 hello world 的网页。

<html>
   <head>
      <title>JavaScript MQTT WebSocket Example</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript">
     </script>
     <script type = "text/javascript" language = "javascript">
        var mqtt;
        var reconnectTimeout = 2000;
        var host="m23.cloudmqtt.com"; //change this
        var port= 38788;

        function onConnect() {
      // Once a connection has been made, make a subscription and send a message.

        console.log("Connected ");
        //mqtt.subscribe("sensor1");
        message = new Paho.MQTT.Message("Hello world");
        message.destinationName = "orange1";
        mqtt.send(message);
      }
      function MQTTconnect() {
        console.log("connecting to "+ host +" "+ port);
        mqtt = new Paho.MQTT.Client(host,port,"clientjs");
        //document.write("connecting to "+ host);
        var options = {
            timeout: 3,
            onSuccess: onConnect,

         };

        mqtt.connect(options); //connect
        }

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

每次我打开该页面并打开 console.js 我都会收到问题消息：

（这里是我的 console.log 中出现的错误列表 .. 以帮助任何可以看到图像的人）与 'ws://m23.cloudmqtt.com:38788/mqtt' 的 WebSocket 连接失败：WebSocket 握手期间出错：net::ERR_CONNECTION_RESET mqttws31.js:979

Paho.MQTT.ClientImpl._doConnect@mqttws31.js:979

Paho.MQTT.ClientImpl.connect@mqttws31.js:849

Client.connect@mqttws31.js:1799

MQTTconnect @websockets-1.htm:31

（匿名）@websockets-1.htm:39

与 'ws://m23.cloudmqtt.com:38788/mqtt' 的 WebSocket 连接失败：WebSocket 握手期间出错：net::ERR_CONNECTION_RESET mqttws31.js:977

Paho.MQTT.ClientImpl._doConnect@mqttws31.js:977

Paho.MQTT.ClientImpl._disconnected@mqttws31.js:1459

Paho.MQTT.ClientImpl._on_socket_error@mqttws31.js:1347

（匿名）@ mqttws31.js:157

我试图更改端口，但我遇到了同样的问题。我该如何解决类似的问题？如果我尝试连接到 https://test.mosquitto.org/ 我有同样的问题？这怎么也能解决？

Answer 1

您需要设置标志以启用 SSL（因为端口图片表明 Websocket 需要 TLS）

var options = {
  timeout: 3,
  onSuccess: onConnect,
  useSSL: true
};

Answer 2

请检查此代码：

更改 websocket 和端口以及用户和密码，从 cloudmqtt.com

获取

<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 websocket="m13.cloudmqtt.com";
var port=31609;
var user="test1234";
var pass="test1234";

 //client = new Paho.MQTT.Client(websocket, port, "web_" + parseInt(Math.random() * 100, 10));

client = new Paho.MQTT.Client(websocket, port, "Deviceid_34534543");


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

  var options = {
    useSSL: true,
    userName: user,
    password: pass,
    onSuccess:onConnect,
    onFailure:doFail
  }

  // connect the client

    client.connect(options);


  // called when the client connects

  function onConnect() {
    // Once a connection has been made, make a subscription and send a message.


document.getElementById("connstatus").innerHTML = "Mqtt Connected";

  console.log("Mqtt Connected");

        client.subscribe("/sensor/#");
        message = new Paho.MQTT.Message("Hello world");
        message.destinationName = "/sensor/1";
        client.send(message);
      

  }

  function doFail(e){
    console.log(e);
  }

  // called when the client loses its connection
  function onConnectionLost(responseObject) {

    document.getElementById("connstatus").innerHTML = "Mqtt Not Connected";

    if (responseObject.errorCode !== 0) {
      console.log("onConnectionLost:"+responseObject.errorMessage);
    }
  }

function onMessageArrived(message) {

console.log("onMessageArrived:"+message.destinationName);
console.log("message.payloadString:"+message.payloadString);

 
  
}


</script>

</html>

通过网络套接字将网页连接到 MQTT 代理

connect webpage through web socket to MQTT broker

javascript

websocket

mqtt

paho

iot