本地网络Reverb跨设备无法接收事件及Echo.js对接问题排查

一、局域网设备无法连接Reverb的解决 #

1. 确认Reverb环境变量配置 #

编辑项目根目录的.env文件，确保以下配置正确：

REVERB_APP_KEY=your-app-key-here
REVERB_APP_SECRET=your-app-secret-here
REVERB_SERVER_HOST=0.0.0.0
REVERB_SERVER_PORT=8080
REVERB_APP_ID=1

• REVERB_SERVER_HOST=0.0.0.0 确保服务监听所有网络接口，而非仅本地回环地址
• 前后端使用的REVERB_APP_KEY必须完全一致

2. 开放本地防火墙端口 #

部署Reverb的机器需要开放8080端口，允许局域网设备访问：

• Windows：在Windows Defender防火墙中添加「入站规则」，允许TCP协议的8080端口流量
• Linux：执行命令sudo ufw allow 8080/tcp

3. 标准启动Reverb服务 #

使用官方命令启动Reverb，避免手动绑定到本地回环：

php artisan reverb:start

启动后日志应显示Starting server on 0.0.0.0:8080，确认服务监听所有接口。

二、React前端无法接收消息的修复 #

1. 修正频道授权逻辑 #

编辑routes/channels.php，确保公开频道chat的授权回调返回true（公开频道必须允许所有用户访问）：

<?php

use Illuminate\Support\Facades\Broadcast;

Broadcast::channel('App.Models.User.{id}', function ($user, $id) {
    return (int) $user->id === (int) $id;
});

// 修正频道名称为小写，且返回true允许所有用户订阅
Broadcast::channel('chat', function () {
    return true;
});

2. 统一事件广播名称（可选但推荐） #

Laravel默认使用事件的完整类名（如App\Events\Chat）作为广播名称，可在事件类中添加broadcastAs()方法自定义简化名称：

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\InteractsWithSockets;
use Illuminate\Queue\SerializesModels;

class Chat implements ShouldBroadcastNow
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $msg;

    public function __construct($msg)
    {
        $this->msg = $msg;
    }

    public function broadcastOn(): array
    {
        return [
            new Channel('chat'),
        ];
    }

    // 自定义广播事件名称，与前端监听名称一致
    public function broadcastAs()
    {
        return 'Chat';
    }
}

3. 修正React前端监听逻辑 #

编辑React的App组件，修复3个核心错误：

import React, { useEffect, useState } from 'react';
import echo from './echo';

function App() {
    const [mensagem, setMensagem] = useState('');

    useEffect(() => {
        // 若未自定义broadcastAs，需使用完整类名：'App\\Events\\Chat'
        echo.channel('chat')
            .listen('Chat', (e) => {
                // 对应事件类中的public $msg字段
                setMensagem(e.msg);
                console.log('Evento recebido:', e);
            });

        return () => {
            // 离开实际订阅的频道'chat'，而非错误的'canal-reverb'
            echo.leaveChannel('chat');
        };
    }, []);

    return (
        <div>
            <h1>Mensagem Recebida:</h1>
            <p>{mensagem}</p>
        </div>
    );
}

export default App;

4. 验证Echo配置一致性 #

确保React的echo.js中，key与后端.env的REVERB_APP_KEY完全匹配：

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

const echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.REACT_APP_PUSHER_APP_KEY, // 与后端REVERB_APP_KEY保持一致
    wsHost: '192.168.1.69',
    wsPort: 8080,
    forceTLS: false, 
    disableStats: true,
});

export default echo;

三、测试验证流程 #

1. 重启Reverb服务：php artisan reverb:start
2. 重启Laravel应用服务器（如Valet/Nginx/Apache）
3. 在局域网设备上打开React前端页面
4. 访问路由/ws触发Chat事件，检查前端是否接收到test消息

内容的提问来源于stack exchange，提问作者Franklin Henrique