bugfix> javascript > 投稿

私のRPiの1つがWebサーバー(Apache2)として構成されています。同じRPiでMQTTブローカー(Mosquitto)を実行します。 Webサイトは次のように構成されています。

root@raspberrypi:/etc/apache2/sites-available# cat 000-default.conf
<VirtualHost *:80>
        # The ServerName directive sets the request scheme, hostname and port that
        # the server uses to identify itself. This is used when creating
        # redirection URLs. In the context of virtual hosts, the ServerName
        # specifies what hostname must appear in the request's Host: header to
        # match this virtual host. For the default virtual host (this file) this
        # value is not decisive as it is used as a last resort host regardless.
        # However, you must set it for any further virtual host explicitly.
        #ServerName www.example.com
        ServerAdmin webmaster@localhost
        DocumentRoot /var/www/html
        # Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
        # error, crit, alert, emerg.
        # It is also possible to configure the loglevel for particular
        # modules, e.g.
        #LogLevel info ssl:warn
        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined
        # For most configuration files from conf-available/, which are
        # enabled or disabled at a global level, it is possible to
        # include a line for only one particular virtual host. For example the
        # following line enables the CGI configuration for this host only
        # after it has been globally disabled with "a2disconf".
        #Include conf-available/serve-cgi-bin.conf
#--- PAUL ---
ProxyPreserveHost On
<Location /mqtt>
  ProxyPass "ws://127.0.0.1:9001"
  ProxyPassReverse "ws://127.0.0.1:9001"
</Location>
#--- PAUL ---
</VirtualHost>
# vim: syntax=apache ts=4 sw=4 sts=4 sr noet
root@raspberrypi:/etc/apache2/sites-available#

また、mosquittoは次のように構成されます。

root@raspberrypi:/etc/mosquitto# cat 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
include_dir /etc/mosquitto/conf.d
listener 1883
listener 9001
protocol websockets
root@raspberrypi:/etc/mosquitto#

機能をテストするための非常に基本的なWebページを作成しました(スクリーンショットの右側)。 MS Edge(左下)では問題なく動作しますが、他のブラウザ(Firefox、左上)では失敗します:

これがRPiの問題なのかブラウザの問題なのかはわかりませんが、これを解決する必要があります。

誰がこのエラーを引き起こす可能性があり、どのように解決できるか考えていますか?

前もって感謝します、

ポール

回答 1 件
  • わかりました、index.php:

    <!DOCTYPE html>
    <html>
        <head>
            <title>IoThings & Trains</title>
            <script src="scripts/jquery-3.3.1.js"></script>
            <script src="scripts/paho-mqtt.js"></script>
            <script src="scripts/IoTT_Web.js"></script>
            <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
            <meta http-equiv="Pragma" content="no-cache" />
            <meta http-equiv="Expires" content="0" />
        </head>
        <body>
            Hello World !!
        </body>
    </html>
    
    

    IoTT_Web.js:

    client = new Paho.MQTT.Client(location.hostname, Number(location.port), "IoTT_Web");
    client.onConnectionLost = onConnectionLost;
    client.onMessageArrived = onMessageArrived;
    client.connect({onSuccess:onConnect});
    function onConnect()
    {
        console.log("onConnect");
        client.subscribe("#");
    }
    function onConnectionLost(responseObject)
    {
        if(responseObject.errorCode !== 0)
        {
            console.log("onConnectionLost: "+responseObject.errorMessage);
        }
    }
    function onMessageArrived(message)
    {
        console.log("onMessageArrived:\n\tFrom " + message.destinationName + "\n\tPayload " + message.payloadString);
    }
    
    

    Firefoxコンソールからのエラーメッセージ:

    SecurityError: The operation is insecure.
    paho-mqtt.js:1046
    LibraryFactory/PahoMQTT</ClientImpl.prototype._doConnect
    http://192.168.1.100/scripts/paho-mqtt.js:1046:18
    LibraryFactory/PahoMQTT</ClientImpl.prototype.connect
    http://192.168.1.100/scripts/paho-mqtt.js:881:4
    Client/this.connect
    http://192.168.1.100/scripts/paho-mqtt.js:2004:4
    <anonymous>
    http://192.168.1.100/scripts/IoTT_Web.js:6:1
    
    

    最後に、Edge(コンソール)からの(正しい)出力:

    HTML1300: Navigation occurred.
    192.168.1.100 (1,1)
     onConnect
     onMessageArrived:
        From TBTIoT/Devices/11936008677624121892/Status
        Payload Online
     onMessageArrived:
        From IoTT/Devices/11936008677624121892/Status
        Payload Online
    
    

あなたの答え