Client cannot connect (https) to WebSocket server through nginx reverse proxy

Our usecase is a webapp that is hosted within a Docker container. This container has a web server and a WebSocket server, both of which are passed requests from clients using an nginx reverse proxy hosted within another Docker container.

We are using an nginx reverse proxy because not all of the instances of our webapp require HTTPS, however, in the event that HTTPS is required, we need a server that can accept SSL connections without significantly modifying the code in the webapp Docker container.

A websocket connection is opened as follows:

url={`wss://${this.props.root}websocket`}

where ${this.props.root} is equivalent to example.com/, which changes based on what domain the server is hosted under.

The reverse proxy handles all requests to the server by passing them to the webapp's docker container with some

location / {
            proxy_pass http://___APPLICATION_IP___:___APPLICATION_PORT___;
            proxy_http_version 1.1;
            proxy_set_header        Host $host:$server_port;
                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_set_header Upgrade $http_upgrade;
            proxy_redirect off;
                proxy_set_header Connection "upgrade";
                proxy_read_timeout 60s;
        }

However, while regular requests (ie. css and html data passed through a regular HTTP/get) are working fine (and I can see the website's UI), the functionality that requires the websockets is not working. When I use the browser console, it says the following:

Firefox can’t establish a connection to the server at wss://{test-domain-omitted-here}/websocket.

Any ideas where we might be missing something?

via brunston