HTTPS网站无法连接deepstream服务器问题求助

Hey there, let's work through this problem together—this is a super common gotcha when moving from local HTTP to production HTTPS!

First, Let's Understand the Error #

The message you're seeing:

deepstream.min.js:3 Mixed Content: The page at 'https://example.com' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://:6020/deepstream'. This request has been blocked; this endpoint must be available over WSS.

This is all about the browser's mixed content policy: HTTPS pages are strictly blocked from making insecure (non-HTTPS) requests, including unencrypted WebSockets (ws://). You need to switch to using encrypted WebSockets with the wss:// protocol instead.

Step 1: Configure DeepStream to Support WSS #

First, you need to set up DeepStream to accept encrypted WebSocket connections. Here's how:

1. Get an SSL Certificate: For production, use a trusted certificate (like Let's Encrypt's free ones). For development, you can generate a self-signed cert, but note browsers will warn you about it.
2. Update DeepStream's Config File:
   Open your config.yml (or equivalent config file) and add/modify the WebSocket endpoint to include SSL settings:

   connectionEndpoints:
     - type: ws
       options:
         # Keep the existing ws endpoint for local development if needed
         port: 6020
         # Add a new WSS endpoint
         sslPort: 6021
         sslKey: ./path/to/your-private-key.pem
         sslCert: ./path/to/your-certificate.pem
         # Optional: If using a CA-signed cert, include the CA chain
         sslCa: ./path/to/ca-chain.pem
   

3. Open the SSL Port: Make sure your firewall/security group allows incoming traffic on the sslPort you set (e.g., 6021).

Step 2: Update Your Client Code #

Change your DeepStream connection URL from the insecure ws:// to the encrypted wss:// endpoint:

// Before (insecure)
const client = deepstream('ws://<deepstream-domain>:6020/deepstream');

// After (secure)
const client = deepstream('wss://<deepstream-domain>:6021/deepstream');

If you're using port 443 (the default HTTPS port), you can omit it entirely:

const client = deepstream('wss://<deepstream-domain>/deepstream');

Step 3: Common Pitfalls to Check #

• Reverse Proxy Setup: If DeepStream is behind a proxy like Nginx, you can handle SSL at the proxy level instead of directly in DeepStream. Here's a quick Nginx config snippet to proxy WSS requests:

  server {
      listen 443 ssl;
      server_name your-domain.com;
  
      ssl_certificate /path/to/your-cert.pem;
      ssl_certificate_key /path/to/your-key.pem;
  
      location /deepstream {
          proxy_pass http://localhost:6020;
          proxy_http_version 1.1;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection "upgrade";
          proxy_set_header Host $host;
      }
  }
  

  With this setup, your client can use wss://your-domain.com/deepstream without changing DeepStream's internal port.
• Certificate Validity: Ensure your certificate matches the domain you're using. Self-signed certs will cause browser errors in production—stick to trusted certs for live sites.
• DeepStream Logs: If connections still fail, check DeepStream's logs for SSL-related errors (like incorrect file paths for certs/keys).

Test the Connection #

You can quickly verify your WSS endpoint works using the wscat tool (install it via npm install -g wscat):

wscat -c wss://<deepstream-domain>:6021/deepstream

If you get a connection confirmation, your setup is working!

内容的提问来源于stack exchange，提问作者khushalbokadey