无法使用Laravel Echo Server和带有HTTPS的Nginx使socket.io在生产中工作

问题描述

我无法让我的 Laravel Echo Server 在登台/生产环境中工作。它在我的本地环境中效果很好,但不确定为什么我的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回声日志的输出

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加密设置为完全,并且我正在使用 LetsEncrypt 生成证书在我的Nginx配置中可以看到的服务器

解决方法

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

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

,

YES !!!!!!,我使这个工作正常,我正在使用 aws Lightsail 并且在网络部分,您需要做的就是允许该端口工作, enter image description here

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

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