使用 Laravel Echo Server 和 Nginx 和 HTTPS 无法让 socket.io 在生产环境中工作

Question

我无法让我的 Laravel Echo 服务器 在暂存/生产环境中工作。它在我的本地运行良好，但不确定为什么我无法在我的 Debian 10 VPS 上运行。这是我的配置。

我还没有配置防火墙，所以端口被阻止应该没有问题

我在浏览器控制台中看到的内容

GET https://dev.domain.com:6001/socket.io/?EIO=3&transport=polling&t=NGLF-O_ net::ERR_CONNECTION_TIMED_OUT

服务通过 Supervisor 运行

root@vultr:/var/www/html/website/storage/logs# supervisorctl status
echo-sever:echo-sever_00           RUNNING   pid 28148, uptime 0:22:44
laravel-worker:laravel-worker_00   RUNNING   pid 28140, uptime 0:22:44
laravel-worker:laravel-worker_01   RUNNING   pid 28141, uptime 0:22:44
laravel-worker:laravel-worker_02   RUNNING   pid 28142, uptime 0:22:44
laravel-worker:laravel-worker_03   RUNNING   pid 28143, uptime 0:22:44
laravel-worker:laravel-worker_04   RUNNING   pid 28144, uptime 0:22:44
laravel-worker:laravel-worker_05   RUNNING   pid 28145, uptime 0:22:44
laravel-worker:laravel-worker_06   RUNNING   pid 28146, uptime 0:22:44
laravel-worker:laravel-worker_07   RUNNING   pid 28147, uptime 0:22:44
peerjs-sever:peerjs-sever_00       RUNNING   pid 28149, uptime 0:22:44

Laravel Echo 日志的输出

L A R A V E L  E C H O  S E R V E R

version 1.6.2

⚠ Starting server in DEV mode...

✔  Running at localhost on port 6001
✔  Channels are ready.
✔  Listening for http events...
✔  Listening for redis events...

Server ready!

NGINX 配置

server { 

    #only use default_server if only its the only site running
    listen 80 default_server; 
    listen [::]:80 default_server; 
    
    root /var/www/html/website/public; 
    index index.php index.html index.htm index.nginx-debian.html; 
    server_name dev.domain.com; 
    
    location / { 
        try_files $uri $uri/ /index.php?$query_string;
    } 
    
    location ~ \.php$ { 
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/run/php/php7.4-fpm.sock; 
    }

    location ~* \.io {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-NginX-Proxy false;

        proxy_pass http://localhost:6001;
        proxy_redirect off;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
    location ~ /\.ht { 
        deny all; 
    }

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/dev.domain.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/dev.domain.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

laravel-echo-server.json

{
        "authHost": "https://dev.domain.com",
        "authEndpoint": "/broadcasting/auth",
        "clients": [
            {
                "appId": "my-app-id",
                "key": "my-app-key"
            }
        ],
        "database": "redis",
        "databaseConfig": {
            "redis": {
                "host": "my-redis-ip",
                "port": "6379",
                "password": "my-redis-pass"
            },
            "sqlite": {
                "databasePath": "/database/laravel-echo-server.sqlite"
            }
        },
        "devMode": true,
        "host": null,
        "port": "6001",
        "protocol": "https",
        "socketio": {},
        "secureOptions": 67108864,
        "sslCertPath": "/etc/letsencrypt/live/dev.domain.com/fullchain.pem",
        "sslKeyPath": "/etc/letsencrypt/live/dev.domain.com/privkey.pem",
        "sslCertChainPath": "",
        "sslPassphrase": "",
        "subscribers": {
            "http": true,
            "redis": true
        },
        "apiOriginAllow": {
            "allowCors": true,
            "allowOrigin": "https://dev.domain.com",
            "allowMethods": "GET, POST",
            "allowHeaders": "Origin, Content-Type, X-Auth-Token, X-Requested-With, Accept, Authorization, X-CSRF-TOKEN, X-Socket-Id"
        }
    }

相关APP.JS的SNIPPET

import Echo from "laravel-echo";
    window.io = require("socket.io-client");
    window.Echo = new Echo({
        broadcaster: "socket.io",
        host: "https://dev.domain.com:6001"
    });

编辑：

忘了提，不确定这是否相关，但我使用 Cloudflare 并将 SSL 加密设置为 FULL 并且我使用 LetsEncrypt 来生成证书在我的 Nginx 配置中可以看到的服务器

Answer 1

不确定是什么问题，但我找到了解决方案。 我更新了很多：Nginx 到 1.19.1，可能安装了额外的模块。不是全局安装 npm，而是在本地安装。 在某个时候，它开始按应有的方式工作。我还是不明白怎么回事）

注意：这仅在您编写 location /socket.io 时才有效。

Answer 2

是的!!!!!!，我做到了，我正在使用 aws lightsail，在网络部分，您需要做的就是允许该端口工作，

这是我用来使其工作的一些配置，

resources/js/bootstrap.js

window._ = require('lodash');

window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
window.axios.defaults.headers.common.crossDomain = true;
window.axios.defaults.baseURL = '/';
let token = document.head.querySelector('meta[name="csrf-token"]');


if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://adonisjs.com/docs/4.1/csrf');
}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

import Echo from "laravel-echo";

if (typeof window.io !== "undefined") {
    window.Echo = new Echo({
        broadcaster: "socket.io",
        host: window.location.hostname + ":6001",
        auth: {
            headers: {
                Accept: 'application/json',
                Authorization: 'Bearer ' + token
            }
        },
        wsPort: 80,
        wssPort: 443,
        disableStats: true,
        encrypted: true,
        forceTLS: true,
        transports: ['websocket', 'polling', 'flashsocket'],
        enabledTransports: ['ws', 'wss']
    });
}

刀片文件

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.1.2/socket.io.js"></script>
<script src="//{{ Request::getHost() }}:{{env('LARAVEL_ECHO_PORT')}}/socket.io/socket.io.js"></script>
<script src="{{ mix('/js/laravel-echo-setup.js') }}" type="text/javascript"></script>

laravel-echo-server.json

{
    "authHost": "http://ip-address-or-domain-name",
    "authEndpoint": "/broadcasting/auth",
    "clients": [],
    "database": "redis",
    "databaseConfig": {
        "redis": {},
        "sqlite": {
            "databasePath": "/database/laravel-echo-server.sqlite"
        }
    },
    "devMode": true,
    "host": null,
    "port": "6001",
    "protocol": "http",
    "socketio": {},
    "secureOptions": 67108864,
    "sslCertPath": "",
    "sslKeyPath": "",
    "sslCertChainPath": "",
    "sslPassphrase": "",
    "subscribers": {
        "http": true,
        "redis": true
    },
    "apiOriginAllow": {
        "allowCors": true,
        "allowOrigin": "http://ip-address-or-domain-name",
        "allowMethods": "GET, POST",
        "allowHeaders": "Origin, Content-Type, X-Auth-Token, X-Requested-With, Accept, Authorization, X-CSRF-TOKEN, X-Socket-Id"
    }
}