[英]Unable to get socket.io to work in production using Laravel Echo Server and Nginx with HTTPS
I am having trouble getting my Laravel Echo Server to work in a staging/production environment.我无法让我的Laravel Echo 服务器在暂存/生产环境中工作。 It works great in my local but not sure why I can't get things going on my Debian 10 VPS.
它在我的本地运行良好,但不知道为什么我的 Debian 10 VPS 无法正常运行。 Here is my configuration.
这是我的配置。
I have no firewall configured yet so there should be no issue with ports being blocked我还没有配置防火墙,所以端口被阻止应该没有问题
What I see in the browser console我在浏览器控制台中看到的
GET https://dev.domain.com:6001/socket.io/?EIO=3&transport=polling&t=NGLF-O_ net::ERR_CONNECTION_TIMED_OUT
Services are running via Supervisor服务通过 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
Output of Laravel Echo Log Output 的 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 CONFIG 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 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"
}
}
SNIPPET of relevant APP.JS相关 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"
});
EDIT:编辑:
Forgot to mention, not sure if this is relevant, but I am using Cloudflare with SSL encryption set to FULL and I'm using LetsEncrypt to generate the certificate on the server which can be seen in my Nginx configuration忘了提,不确定这是否相关,但我正在使用 Cloudflare,SSL 加密设置为FULL ,我正在使用LetsEncrypt在服务器上生成证书,这可以在我的 Nginx 配置中看到
Not sure what the problem is, but I found a solution.不知道问题是什么,但我找到了解决方案。 I've updated a lot: Nginx to 1.19.1, possibly installed additional modules.
我更新了很多:Nginx 到 1.19.1,可能安装了额外的模块。 Installed npm not globally, but locally.
npm 不是全局安装,而是本地安装。 And at some point, it started working as it should.
在某个时候,它开始按应有的方式工作。 I still don't understand what's the matter)
我还是不明白这是怎么回事)
Note: this only works if you write location /socket.io.注意:这仅在您编写位置 /socket.io 时才有效。
YES,,!!!, i made this working, i am using aws lightsail and in the networking section all you need to do is to allow that port to work,是的,,!!!,我做到了,我正在使用aws lightsail ,在网络部分,您需要做的就是允许该端口工作,
Here is some of the configuration which I've used to make it work,这是我用来使其工作的一些配置,
resources/js/bootstrap.js资源/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']
});
}
blade file刀片文件
<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 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"
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.