Can a webapp connect to mosquitto?

Question

I have a mosquitto_sub running on background on serverA, let's say with topic "TEST", port 1883. I followed this to use nginx as a stream proxy to mosquitto, on ServerB.

Testing the setup sending a message to ServerB, using mosquitto_pub, the message is received and displayed correctly on serverA.

Now I'd like that a webapp running on serverC could receive the mqtt messages I send using a websocket, as far as I understand that nginx setup is made exactly for this purpose because browser can't use directly mqtt protocol.

I did two tests:

• pointing the websocket to ServerB stream (wss://serverB:1883)
• pointing the websocket to nginx reverse proxy with this config:

.

...
server {
    listen 443 ssl;
    ...

    location /webapp/websocket {
            proxy_set_header HOST $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_pass_request_headers on;
            proxy_pass http://serverB:1883/;
            proxy_http_version 1.0;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "Upgrade";
            proxy_read_timeout 1800s;
    }

}

With both the websocket doesn't work, with error 502 Bad Gateway. My questions are, did I understand wrong and can it be done? Does it say error 502 just because the webapp must be programmed to specify the topic to listen?

Answer 1

The Mosquitto broker supports MQTT over WebSockets, but it has to be on a separate port to native MQTT over TCP.

So if Mosquitto is normally listening on port 1883, you need to pick a different port to run the MQTT over WebSockets listener. e.g.

listener 1883

listener 8083
protocol websockets

You would then need to update the port in the proxy_pass entry to match.