WebSocket 连接到 <URL> 失败：WebSocket 握手期间出错：意外响应代码：521

Question

我在连接到套接字服务器时遇到问题。

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

我有两个不同的云服务器 (1) 用于客户端项目，(2) 用于套接字服务器。

(1) 客户项目：

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) 套接字服务器

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

以下是 laravel-echo-server 的配置。

{
    "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"
    }
}

主管

这是主管配置。

[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 回声服务器

注意：我使用redis 和laravel-echo-server，效果很好。

有人有解决办法吗？

Answer 1

本文档适用于使用 laravel echo server & nginx & socket.io & redis-server 的人，在客户端项目和 redis-server 之间有单独的服务器。

1) 编辑/etc/redis/redis.conf

bind 127.0.0.1
supervised no

到

bind 0.0.0.0
supervised systemd

2) 在[Service]下更新/etc/systemd/system/redis.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"
    }
}

注意：对于使用cloudflare 连接DNS 的人，请将默认socket.io 端口6001 更改为以下here。