WebSocket connection to <URL> failed: Error during WebSocket handshake: Unexpected response code: 521

问题

I have a problem with connecting to the socket server.

WebSocket connection to <URL> failed: Error during WebSocket handshake: Unexpected response code: 521

I have two different cloud server (1) for a client project and (2) for a socket server.

(1) Client Project:

var token = "{{ csrf_token() }}";
window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: "{{env('SOCKET_SERVER_HOST')}}",
    origin: '*',
    transports: ['websocket', 'polling', 'flashsocket', 'ws', 'wss'],
    auth: {
          headers: {
                'X-CSRF-TOKEN' : token,
          }
    },
    csrfToken:token,
    port:"6001",
});

(2) Socket Server

1. nginx

server {
  listen        443 ssl;
  listen        [::]:443 ssl;
  server_name   mydomain.com;

  error_log     /var/log/nginx/proxy-error.log error;

  ssl                         on;
  ssl_certificate             /etc/nginx/certs/mydomain.com.pem;
  ssl_certificate_key         /etc/nginx/certs/mydomain.com.key;
  ssl_session_timeout         3m;
  ssl_session_cache           shared:SSL:50m;
  ssl_protocols               TLSv1.1 TLSv1.2;
  ssl_ecdh_curve              secp384r1;

  location /socket.io {
    proxy_pass                          http://mydomaincom:6001;
    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  https;
    proxy_set_header X-VerifiedViaNginx yes;
    proxy_read_timeout                  60;
    proxy_connect_timeout               60;
    proxy_redirect                      off;

    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_cache_bypass $http_upgrade;
  }
}

laravel-echo-server.json

The below is laravel-echo-server configuration.

{
    "authHost": "https://mydomaincom",
    "authEndpoint": "/broadcasting/auth",
    "clients": [
        {
            "appId": "xxxxxxxxxx",
            "key": "yyyyyyyyyyyyyyyyyyyyyyyy"
        }
    ],
    "database": "redis",
    "databaseConfig": {
        "redis": {},
        "sqlite": {
            "databasePath": "/database/laravel-echo-server.sqlite"
        }
    },
    "devMode": true,
    "host": null,
    "port": "6001",
    "protocol": "https",
    "socketio": {},
    "secureOptions": 67108864,
    "sslCertPath": "/etc/nginx/certs/mydomain.com.pem",
    "sslKeyPath": "/etc/nginx/certs/mydomain.com.key",
    "sslCertChainPath": "",
    "sslPassphrase": "",
    "subscribers": {
        "http": true,
        "redis": true
    },
    "apiOriginAllow": {
        "allowCors": true,
        "allowOrigin": "*",
        "allowMethods": "GET, POST",
        "allowHeaders": "Origin, Content-Type, X-Auth-Token, X-Requested-With, Accept, Authorization, X-CSRF-TOKEN, X-Socket-Id"
    }
}

Supervisor

Here is the supervisor configuration.

[program:echo-worker]
directory=/home/user/apps/epanel
process_name=%(program_name)s_%(process_num)02d
command=laravel-echo-server start --config="ehealth-echo-server.json"
autostart=true
autorestart=true
user=user
numprocs=1
redirect_stderr=true
stdout_logfile=/home/user/apps/epanel/echo.log

2. Laravel Echo Server

Note: I use redis and laravel-echo-server and it's work very fine.

Does anyone have a solution?

回答1:

This document is for those who use laravel echo server & nginx & socket.io & redis-server with separated server between client project and redis-server.

1) Edit /etc/redis/redis.conf

bind 127.0.0.1
supervised no

To

bind 0.0.0.0
supervised systemd

2) Update /etc/systemd/system/redis.service under [Service]

Type=notify
ExecStart=/usr/bin/redis-server /etc/redis/redis.conf  --supervised systemd

3) Nginx /etc/nginx/sites-enabled/reverse-proxy.conf

server {
  listen        443 ssl;
  listen        [::]:443 ssl;
  server_name   mysitecom;

  error_log     /var/log/nginx/proxy-error.log error;

  # Start the SSL configurations
  ssl                         on;
  ssl_certificate             /etc/nginx/certs/mysitecom.pem;
  ssl_certificate_key         /etc/nginx/certs/mysitecom.key;
  ssl_session_timeout         3m;
  ssl_session_cache           shared:SSL:50m;
  ssl_protocols               TLSv1.1 TLSv1.2;

  # Diffie Hellmann performance improvements
  ssl_ecdh_curve              secp384r1;

  location /socket.io {
    proxy_pass                          http://mysitecom:2096;
    proxy_http_version 1.1;
    proxy_set_header Upgrade            $http_upgrade;
    proxy_set_header Connection         "upgrade";
    proxy_set_header Host               $host;
    proxy_set_header X-Real-IP          $remote_addr;
    proxy_buffers 16 4k;
    proxy_buffer_size 2k;

    proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto  https;
    proxy_set_header X-VerifiedViaNginx yes;
    proxy_read_timeout                  2h;
    proxy_connect_timeout               2h;
    proxy_redirect                      off;
  }
}

4) laravel-echo-server.json

{
    "authHost": "https://mysitecom",
    "authEndpoint": "/broadcasting/auth",
    "clients": [
        {
            "appId": "e45c056ec8ca8bd7",
            "key": "88d316b5cccafbc5e905aa9ee13e63f7"
        }
    ],
    "database": "redis",
    "databaseConfig": {
        "redis": {
            "host": "0.0.0.0",
            "port": "6379"
        },
        "sqlite": {
            "databasePath": "/database/laravel-echo-server.sqlite"
        }
    },
    "devMode": true,
    "host": null,
    "port": "2096",
    "protocol": "https",
    "socketio": {},
    "secureOptions": 67108864,
    "sslCertPath": "/etc/nginx/certs/mysitecom.pem",
    "sslKeyPath": "/etc/nginx/certs/mysitecom.key",
    "sslCertChainPath": "",
    "sslPassphrase": "",
    "subscribers": {
        "http": true,
        "redis": true
    },
    "apiOriginAllow": {
        "allowCors": true,
        "allowOrigin": "*",
        "allowMethods": "GET, POST",
        "allowHeaders": "Origin, Content-Type, X-Auth-Token, X-Requested-With, Accept, Authorization, X-CSRF-TOKEN, X-Socket-Id"
    }
}

Note: for someone who connects DNS with cloudflare please change default socket.io port 6001 to the following here.

来源：https://stackoverflow.com/questions/61092028/websocket-connection-to-url-failed-error-during-websocket-handshake-unexpect