Belchertown MQTT Issues

[Geni]

I am having trouble getting the Belchertown skin MQTT websocket real-time updates to work correctly on my website wetter.affolter.familyds.net.
I have already spent a lot of time troubleshooting over the last few weeks
I have WeeWx with Mosquitto Broker on a Rasperry 3+ the database MariaDB and the webserver on a Synology
I know that the weewx-mqtt extension is installed correctly enough that I can see that the data arrives every 2.5 seconds in the broker on one side with "mosquitto_sub -h 192.168.56.51 -t weather/#" and on my desktop station with the program MQTT.fx

But on the web page nothing does only the message Connection (orange) but no Connect (green). For testing I didn't want to use SSL certificate.

Here are my current configs:

weewx.conf
    [[MQTT]]
        server_url = mqtt://user:pass...@192.168.56.51:1883/
        topic = wetter
        unit_system = METRIC
        binding = archive, loop
        aggregation = aggregate
               
               
            #--- MQTT Websockets (for Real Time Streaming) Options ---
            mqtt_websockets_enabled = 1
            mqtt_websockets_host = mqtt://192.168.56.51
            mqtt_websockets_port = 9001
            mqtt_websockets_ssl = 0
            mqtt_websockets_topic = wetter/loop
            mqtt_websockets_username = user
            mqtt_websockets_password = password
            disconnect_live_website_visitor = 1800000



/etc/mosquitto/conf.d/myconfig.conf
persistence false
allow_anonymous true
password_file /etc/mosquitto/passwd
acl_file /etc/mosquitto/acl

# Insecure mqtt to localhost only, and secure mqtt
listener 1883
protocol mqtt

# websockets
listener 9001
protocol websockets

Thanks in advance for anything I may be overlooking, advice or possible solutions.

[t...@tom.org]

My websockets_host is just my hostname without the protocol. So instead of "mqtt://foo.bar.com" or "ws://foo.bar.com" it is just "foo.bar.com"

[Doug Jenkins]

To add what Tom is saying, when I check your site in the Javascript console, I see this error:

Uncaught DOMException: Failed to construct 'WebSocket': The URL 'ws://[mqtt://192.168.56.51]:9001/mqtt' is invalid.

The reason the site is not showing the real-time weather data is that the local brower of your users needs to connect to the website on port 9001 to get the MQTT topic data to present. Since you are posting your internal server IP address, the internet user will not receive the information as there is no way to route this correctly.

What I would do is change mqtt_websockets_host to wetter.affolter.familyds.net and see if that works.

If it does not work, then the next best option is to set up Cloudflare to host your domain name and route the websockets and internet traffic to your local IP address at home. Cloudflare can help with the SSL Certificate portion automatically. From there, you would use a reverse proxy (NGINX Proxy Manager) to route the traffic correctly to your MQTT and WeeWX Web Server instances. Please let me know if you have any other questions or if you need instructions on how to do this.

Doug

--
You received this message because you are subscribed to the Google Groups "weewx-user" group.
To unsubscribe from this group and stop receiving emails from it, send an email to weewx-user+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/weewx-user/af0fb5e4-cd5b-4890-9cf9-b6e7dfb8683dn%40googlegroups.com.

[Geni]

If I only enter the local IP address of the Raspberry (weewx and mosquitto) in the mqtt_websockets_host as suggested and call the web server (on a Synology) with the local IP address of the Synology it works as desired.
For access from the Internet, can I get there with port forwarding to the target?

Geni

[Doug Jenkins]

No, port forwarding will not solve the problem. WeeWx is creating the belchertown JavaScript file every time an archive is executed. Your users are getting this JavaScript file from the webserver and running it on their browser. If you have your local ip address configured for mqtt, then it will not resolve for the client as they have no path back to your server.

I would first just try your domain name instead of the ip address. If it still does not work, check your firewall that port 9001 is being passed to your web server from the wan side of your Network.

To view this discussion on the web visit https://groups.google.com/d/msgid/weewx-user/81c4cefb-a7bc-47ff-86b3-eba4a0c0caf7n%40googlegroups.com.

[Geni]

I have now changed the "mqtt_websockets_host = wetter.affolter.familyds.net" and the port 9001 is forwarded to the weewx-server(raspberry).
The webserver is on a Synology and has a LetsEncrypt certificate.
With the call of the web page with the IP address (http://192.168.56.1/wetter/) of the Synology the live update works.
If you call the web page with the domain name (https://wetter.affolter.familyds.net/) of the web page, the live update does not work.

Does the Mosquitto also have to have a certificate? If so which one?

Geni

[Doug Jenkins]

Geni:

The problem now with your site is that your main website is now https, but your websocket is not. Here are the errors I get in my javascript console on your website:

=== START LOG ===
paho-mqtt.min.js:37
       
       Mixed Content: The page at 'https://wetter.affolter.familyds.net/' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://wetter.affolter.familyds.net:9001/mqtt'. This request has been blocked; this endpoint must be available over WSS.
d._doConnect @ paho-mqtt.min.js:37
jquery.min.js:2
       
       Uncaught DOMException: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.
    at d._doConnect (https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.1.0/paho-mqtt.min.js:37:221)
    at d.connect (https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.1.0/paho-mqtt.min.js:31:233)
    at Client.connect (https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.1.0/paho-mqtt.min.js:70:506)
    at connect (https://wetter.affolter.familyds.net/js/belchertown.js?1648519234:780:12)
    at HTMLDocument.<anonymous> (https://wetter.affolter.familyds.net/:157:21)
    at l (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:29375)
    at c (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:29677)

=== END LOG ===

I would try to set your mqtt_websockets_host = wetter.affolter.familyds.net and set the mqtt_websockets_ssl = 1. see below

    [[MQTT]]
        server_url = mqtt://user:pass...@192.168.56.51:1883/
        topic = wetter
        unit_system = METRIC
        binding = archive, loop
        aggregation = aggregate
               
               
            #--- MQTT Websockets (for Real Time Streaming) Options ---
            mqtt_websockets_enabled = 1

            mqtt_websockets_host = wetter.affolter.familyds.net
            mqtt_websockets_port = 9001
            mqtt_websockets_ssl = 1

            mqtt_websockets_topic = wetter/loop
            mqtt_websockets_username = user
            mqtt_websockets_password = password
            disconnect_live_website_visitor = 1800000

if it does not work, switch the mqtt_websockets_port = 443 and try that. If that does not work, then I would recommend setting up a reverse proxy on your network (see nginxproxymanager.com ) to allow 443 traffic to be properly routed to your weewx webserver and mosquitto.

Let us know if this helps.

DDJ