Laravel Echo服务器无法与React前端和Laravel后端正常工作

Question

似乎我已经正确设置了所有内容，但由于某种原因，我在侦听事件后看不到我的console.log。我有两个独立的IP，我在Laravel的后端使用MySQL作为我的数据库(api.site.com(，我在React的前端(www.site.com(

这是我的laravel-echo-server.json设置：

{
"authHost": "https://localhost",
"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": false,
"allowOrigin": ""
"allowMethods": "",
"allowHeaders": ""
}
}

我可以看到事件被记录：

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!
Channel: chat.9722
Event: LeagueChatCreated

这是我在前端的设置：

import Echo from "laravel-echo/dist/echo";
import socketio from "socket.io-client";
const echo = new Echo({
host: "https://api.site.com/socket.io", //might need to add this to the env
broadcaster: "socket.io",
client: socketio,
});
export default echo;

useEffect(() => {
echo.channel("chat." + leagueId).listen("LeagueChatCreated", (ev) => {
console.log("new request");
chat.request();
});
return () => {
echo.channel("chat." + leagueId).stopListening("LeagueChatCreated");
};
}, []);

在有人说，你确定leagueId与你正在广播的内容匹配吗？是的。

我已经设置了一个反向代理，使端口6001指向/socket.io，所以这不是问题所在。特别是因为我看到了来自网络请求的回复：

击球时https://api.site.com/socket.io/?EIO=4&transport=轮询&t=Nxqgsoi我得到200，这个响应：

96:0{"sid":"S0tvcT6YLVhsRfniAAAO","upgrades":["websocket"],"pingInterval":25000,"pingTimeout":5000}2:40

有人能帮帮我，告诉我我做错了什么吗？我目前没有什么想法。

以下是我的反向代理是如何设置的

RewriteEngine On
RewriteCond %{HTTP:Upgrade} websocket [NC]
RewriteCond %{REQUEST_URI}  ^/socket.io            [NC]
RewriteCond %{QUERY_STRING} transport=websocket    [NC]
RewriteRule /(.*)           ws://127.0.0.1:6001/$1 [P,L]
ProxyRequests off
ProxyPreserveHost On
SSLProxyEngine on
<Proxy *>
Require all granted
</Proxy>
ProxyPass        /socket.io http://127.0.0.1:6001/socket.io/
ProxyPassReverse /socket.io http://127.0.0.1:6001/socket.io/

Answer 1

尝试这些设置。此外，请确保为广播驱动程序设置了.env文件变量。

bootstrap.js

import Echo from 'laravel-echo';
window.io = require('socket.io-client');
window.Echo = new Echo({
broadcaster: 'socket.io',
host: window.location.hostname
});

laravel-echo-server.json

{
"authHost": "https://localhost",
"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": false,
"allowOrigin": ""
"allowMethods": "",
"allowHeaders": ""
}
}

package.json

{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env  NODE_OPTIONS=--max_old_space_size=4096 NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
... your own here
},
"dependencies": {
... your own here
"laravel-echo": "^1.11.3",
"laravel-echo-server": "^1.6.2",
"socket.io-client": "2.3.0"
}
}

在有人登录时加载的JS文件中

var channel = Echo.private(`users.${PUT_USER_ID_HERE}`)
channel.listen('.LeagueChatCreated', function (data) {
console.log(data);
})

在php事件文件中

public function broadcastOn()
{
return new PrivateChannel("users.".$this->user->id);
}
public function broadcastAs()
{
return "LeagueChatCreated";
}