Nginx: Mosquitto and Paho Javascript client

Hello everyone,

I'm new to Nginx, and I'm feeling a bit lost at the moment. I have a Linux Ubuntu server where I've set up the LEMP stack and installed Mosquitto on the same server. On this server, I've created a web server that hosts my IoT page, running the Paho JavaScript client via WebSockets.

My server is behind a router, and I've set up port forwarding on the router to direct traffic from port 80 to the Ubuntu server (which I'll later change to port 443 once it's running on port 80). I also have a domain, let's call it example.com, which points to my router.

Here's the challenge: I can connect to the IoT page with my domain without any issues. However, when the Paho JavaScript client attempts to establish a WebSocket connection to ws://example.com:8080/mqtt, it fails.

If I set up port forwarding on the router for port 8080 to the Ubuntu server, it works without any problems. However, I believe there should be a way to make this work with the correct Nginx configuration.

I'm struggling to figure out how to set up the configuration so that WebSocket connections work properly. I would greatly appreciate any guidance on how to configure this for successful WebSocket connections.


My webserver config looks like this:

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name example.com www.example;

    root /var/www/example.com;

    index index.html index.htm index.php;

    location / {
            #try_files $uri $uri/ =404;
        try_files $uri $uri/ /index.php?$args;
    }

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php/php8.2-fpm.sock;
    }

    location ~ /\.ht {
        deny all;
    }

}

Code (markup):

Thanks in advance.

Staehla