Eclipse Paho Javascript客户端和浏览器支持

时间:2018-05-25 08:18:13

标签: javascript apache browser mqtt

我的一个RPi被配置为webserver(Apache2)。在同一个RPi上运行一个MQTT代理(Mosquitto)。该网站配置如下:

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#

我已经编写了一个非常基本的网页来测试功能(截图正确)。事情在MS Edge中工作正常(左下角),但在其他一些浏览器中失败(Firefox,左上角):

Screenshot

我不确定这是RPi问题还是浏览器问题,但我需要解决这个问题。

任何人都知道什么可能导致此错误以及我如何解决它?

提前致谢,

1 个答案:

答案 0 :(得分:0)

好的,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