Laravel Echo搭配Reverb无法实时监听事件且出现Pusher错误求助

环境：Laravel 11 + Vite

.env 配置 #

APP_NAME=PUSAT-OTP
APP_ENV=local
APP_KEY=base64:6JdemGaC90WRlzdHu67O5Jw6qKaTrW6XuHPF0GX4eQM=
APP_DEBUG=true
APP_URL=http://localhost:18080
APP_PORT=8080

# Database and Redis
DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=dbotp_project
DB_USERNAME=root
DB_PASSWORD=
CACHE_DRIVER=redis
QUEUE_CONNECTION=redis
REDIS_HOST=redis
REDIS_PORT=6379

# Broadcasting
BROADCAST_DRIVER=reverb
BROADCAST_CONNECTION=reverb

# Reverb Configuration
REVERB_APP_ID=946019
REVERB_APP_KEY=0hi8cdtq5c1fxvx51ggy
REVERB_APP_SECRET=binhrda9ycj51ybemsid
REVERB_HOST=0.0.0.0
REVERB_PORT=8080
REVERB_SCHEME=http
REVERB_SERVER=reverb

VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
VITE_REVERB_HOST="${REVERB_HOST}"
VITE_REVERB_PORT="${REVERB_PORT}"
VITE_REVERB_SCHEME="${REVERB_SCHEME}"

核心代码 #

控制器代码 #

public function storeSms(Request $request)
{
    // Other code...

    event(new SmsOTPUpdated($smsOtp->orderOtp));

    // Return response...
}

事件代码 #

class SmsOTPUpdated implements ShouldBroadcastNow
{
    public $orderOtp;

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

    public function broadcastOn(): Channel
    {
        return new Channel('order.' . $this->orderOtp->id);
    }

    public function broadcastWith()
    {
        return ['sms' => $this->orderOtp->smsOtp->sms];
    }
}

前端代码（Blade + JS） #

document.addEventListener('DOMContentLoaded', function() {
    @foreach ($orders as $order)
        Echo.channel('order.{{ $order->id }}')
            .listen('SmsOTPUpdated', (e) => {
                let smsElement = document.getElementById('sms-{{ $order->id }}');
                if (smsElement) {
                    smsElement.innerHTML = `<pre>${e.sms}</pre>`;
                }
            });
    @endforeach
});

错误信息 #

[2024-08-20 16:19:57] local.ERROR: Pusher error: cURL error 7: Failed to connect to localhost port 8080... 

已执行操作 #

• 确认.env中BROADCAST_DRIVER设为reverb
• 执行php artisan config:clear和php artisan cache:clear清除配置缓存
• 验证配置文件和事件类无Pusher引用
• 尝试运行php artisan queue:work

当前问题 #

• 事件无法实时监听，需刷新页面才生效
• 已配置Reverb仍出现Pusher相关错误

疑问 #

• 为何Laravel已配置Reverb却仍尝试使用Pusher？
• 如何确保Reverb实时监听事件并消除Pusher错误？

解决方案 #

1. 排查广播配置文件 #

检查config/broadcasting.php，确保reverb是默认连接，无残留Pusher配置干扰：

// config/broadcasting.php
return [
    'default' => env('BROADCAST_CONNECTION', 'reverb'),
    'connections' => [
        'reverb' => [
            'driver' => 'reverb',
            'key' => env('REVERB_APP_KEY'),
            'secret' => env('REVERB_APP_SECRET'),
            'app_id' => env('REVERB_APP_ID'),
            'options' => [
                'host' => env('REVERB_HOST', 'localhost'),
                'port' => env('REVERB_PORT', 8080),
                'scheme' => env('REVERB_SCHEME', 'http'),
                'useTLS' => env('REVERB_SCHEME') === 'https',
            ],
            'client_options' => [],
        ],
        // 注释或移除未使用的Pusher配置
        // 'pusher' => [
        //     ...
        // ],
    ],
];

2. 启动Reverb服务并解决端口冲突 #

你的.env中APP_PORT和REVERB_PORT均为8080，会导致端口占用冲突，先修改端口：

REVERB_PORT=8081
VITE_REVERB_PORT="${REVERB_PORT}"

再启动Reverb服务：

php artisan reverb:start

3. 修正前端Echo初始化配置 #

确保前端明确使用reverb驱动，而非默认的Pusher：

// resources/js/bootstrap.js
import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'reverb', // 必须指定为reverb
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: import.meta.env.VITE_REVERB_HOST,
    wsPort: import.meta.env.VITE_REVERB_PORT,
    wssPort: import.meta.env.VITE_REVERB_PORT,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME === 'https'),
    enabledTransports: ['ws', 'wss'],
});

修改后重新编译前端资源：

npm run dev # 开发环境
# 或 npm run build 生产环境

4. 清除Vite缓存 #

Vite可能缓存旧环境变量，强制刷新：

npm run dev -- --force

5. 验证事件广播逻辑 #

• 确认事件类的broadcastOn方法返回的通道名称与前端监听的完全一致
• 因为使用ShouldBroadcastNow，无需队列，但需确保没有旧队列任务残留，可执行php artisan queue:flush清理

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