Troubleshooting Websocket Connection Errors in Deployed Streamlit Applications

The page keeps Loading “Please wait…” and on developer tools the wss calls failed.
“WebSocket connection to ‘wss://streamlit.us.stg.xpto.cloud/_stcore/stream’ failed”
On deployment the ingress is configured to redirect to ssl.

Introduction:

This blog post addresses a common challenge encountered when deploying Streamlit applications: Websocket connection errors. These errors often manifest during the initial page load, preventing the application from functioning correctly.

Understanding the Problem:

Streamlit applications leverage WebSockets for real-time communication between the browser and the server. When deploying the application behind a reverse proxy like Nginx, specific configuration is required to facilitate this two-way communication.

Resolving Websocket Connection Errors:

Here’s a breakdown of the provided Nginx configuration and how it addresses the issue:

1. Server Block:

• server_name website.com;: This line defines the domain name that the server block handles.

2. Location Block (/):

• proxy_pass http://127.0.0.1:8501/: This directive forwards all incoming requests to the Streamlit application running on the local machine (port 8501).
• The subsequent lines (proxy_set_header) configure essential headers for proper communication:
  • Host: Sets the correct hostname for the Streamlit application.
  • X-Real-IP: Captures the client’s original IP address behind the proxy.
  • X-Forwarded-For: Maintains the chain of proxies involved in the request.
  • X-Forwarded-Proto: Indicates the original protocol (HTTP/HTTPS) used by the client.
  • proxy_http_version 1.1: Enforces HTTP version 1.1 for communication.
  • proxy_set_header Upgrade $http_upgrade: Forwards the Upgrade header, crucial for WebSockets.
  • proxy_set_header Connection "upgrade": Sets the Connection header to “upgrade” for WebSocket establishment.

3. Location Block (/_stcore/stream):

• proxy_pass http://127.0.0.1:8501/_stcore/stream: This specifically routes requests to the Streamlit WebSocket endpoint, enabling real-time updates.
• Similar to the first location block, headers are configured for proper communication and WebSocket support.
• proxy_read_timeout 86400: Sets a high read timeout value (24 hours) to prevent premature connection closure.

NGIX -Server Configuration File

Go to 👉 /etc/nginx/sites-available

Open 👉 yourdomain.com file and update below content as per your local requirement.

server {
    server_name yourdomain.com;

    location / {
                proxy_pass http://127.0.0.1:8501/;
                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_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
    }

        location /_stcore/stream {
                proxy_pass http://127.0.0.1:8501/_stcore/stream;
                proxy_http_version 1.1;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header Host $host;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
                proxy_read_timeout 86400;
        }

}

Additional Tips:

• Double-check configuration: Ensure there are no typos or incorrect syntax in the Nginx configuration file.
• Verify Streamlit application: Make sure the Streamlit application is running and accessible on port 8501.
• Consider firewall restrictions: If using a firewall, ensure it allows connections to the Streamlit port.
• Consult documentation: Refer to the official Streamlit deployment documentation for further guidance: https://docs.streamlit.io/streamlit-community-cloud/deploy-your-app

By following these steps and understanding the provided Nginx configuration, you can effectively troubleshoot and resolve Websocket connection errors in your deployed Streamlit applications.