LaravelEcho怎么用_LaravelEcho前端事件监听配置【实时】-php教程-PHP中文网

前端监听不到laravel广播事件，主因是echo初始化或频道匹配错误：频道类型（public/private/presence）须与broadcaston()返回的频道类严格对应，事件名监听必须带.前缀且大小写敏感，驱动配置需匹配协议与端口，跨域及反向代理须透传upgrade头。

laravelecho怎么用_laravelecho前端事件监听配置【实时】

前端监听不到 Laravel 广播事件，八成不是后端没发，而是 Echo 初始化或频道匹配错了——尤其是频道类型（public/private/presence）和事件名前缀这两个点，错一个就静默失败。

取决于后端 broadcastOn() 返回的频道名前缀：

返回 new Channel('chat') → 前端用 Echo.channel('chat')
返回 new PrivateChannel('chat.9722') → 前端必须用 Echo.private('chat.9722')，不能写成 channel('private-chat.9722') 或漏掉 private- 前缀
返回 new PresenceChannel('admin') → 用 Echo.join('admin')，且需在 routes/channels.php 中显式授权

常见错误：后端广播到 private-chat.9722，前端却调用 Echo.channel('chat.9722')，连接成功但收不到任何事件——因为频道根本没对上。

后端事件类中 broadcastAs() 返回 'LeagueChatCreated'，前端监听时必须写 .LeagueChatCreated（开头带点）：

echo.private('chat.9722').listen('.LeagueChatCreated', (e) => {
  console.log(e);
});

不加点、大小写错、多空格、拼错字母，都会导致监听失效。浏览器控制台不会报错，只会安静跳过。

Laravel Creem Agent

Creem 支付商店助理 — 查询订阅、客户、交易、产品，执行心跳检查，管理本地 Laravel支付商店。

下载

没定义 broadcastAs() 时，默认用完整类名，如 'App\Events\NewMessage'，前端监听就得写 '.App.Events.NewMessage'
推荐统一用 broadcastAs() 自定义简洁名，避免路径污染

不同广播驱动对应的 Echo 构造参数完全不同，硬套模板必挂：

用 Reverb：必须设 broadcaster: 'reverb'，key 取自 VITE_REVERB_APP_KEY，wsHost 是 http://127.0.0.1:8080（开发）或域名（生产），wsPort 显式传 8080
用 Pusher：设 broadcaster: 'pusher'，key 是 PUSHER_APP_KEY，cluster 必须匹配（如 mt1），且要确保 forceTLS: true 在 HTTPS 页面生效
用 laravel-echo-server（Socket.IO）：设 broadcaster: 'socket.io'，host 是完整 URL（如 https://api.site.com/socket.io），且需确认反向代理已透传 Upgrade 头

最容易被忽略的是协议一致性：页面是 https://，但 wsHost 写成 ws://，浏览器直接拒绝连接；或者用了 wss:// 但服务端没配 TLS，握手就断。

React 前端跑在 www.site.com，Laravel API 在 api.site.com，这时候：

后端 routes/channels.php 的授权接口（Broadcast::channel()）必须返回 true 或有效数据，且响应头含 Access-Control-Allow-Origin: https://www.site.com
如果用 Nginx 反代 WebSocket，必须显式设置：proxy_http_version 1.1;、proxy_set_header Upgrade $http_upgrade;、proxy_set_header Connection "upgrade";
前端 Echo 实例不要硬编码 host，建议从环境变量读取，比如 import.meta.env.VITE_WS_HOST