Не удается подключиться к локальному брокеру Mosquitto с помощью Javascript? - PullRequest
Новая
       42

Не удается подключиться к локальному брокеру Mosquitto с помощью Javascript?

0 голосов
/ 05 мая 2019

У меня Raspberry Pi с запущенным на нем брокером Mosquitto, подключенным к сенсорному модулю со встроенным протоколом MQTT.Если я использую этот код в терминале, я могу подписаться и увидеть, что мои данные возвращаются.

 mosquitto_sub -h 169.254.118.199 -t Advantech/00D0C9FA9984/data

При использовании метода websocket в моем HTML / Javascript, я не могу установить соединение.Я не уверен на 100%, какой порт мне нужно указать, я видел большинство сообщений, использующих порт 1883, но, похоже, это не работает.В терминале порт не требуется.

Это работает при работе в Терминале, я хочу выполнить ту же задачу через мое веб-приложение.

Мой 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/

В консоли веб-браузера видно, что запрос на подключение истекает. 

       <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.

1 Ответ

2 голосов
/ 05 мая 2019

Как я уже говорил в комментариях, по умолчанию mosquitto не настраивает MQTT для прослушивателя WebSockets по умолчанию.

Клиент JavaScript Paho MQTT может подключаться к брокеру только через MQTT через WebSockets.

Чтобы добавить MQTT поверх WebSockets, вам необходимо добавить следующее в файл mosquitto.conf (или в файл в /etc/mosquitto/conf.d) 

listener 8083
protocol websockets

Затем необходимо убедиться, что клиент подключается кпорт 8083

...