如何在Laravel 12的Livewire Starter Kit中使用Laravel Reverb？

1. 安装必要依赖 #

首先安装Laravel Echo和Pusher JS（Reverb兼容Pusher协议）：

npm install laravel-echo pusher-js

2. 创建Echo配置文件 #

在resources/js目录下新建echo.js，添加以下配置代码：

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

window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: import.meta.env.VITE_REVERB_HOST,
    wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
    wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
    // 利用Livewire全局变量处理认证
    auth: {
        headers: {
            'X-CSRF-TOKEN': window.Livewire.csrfToken,
        },
    },
});

3. 在入口JS中引入Echo配置 #

打开resources/js/app.js，在文件末尾加入：

import './echo';

4. 编译前端资源 #

运行编译命令生成可用的前端文件：

npm run build

5. 确保模板加载编译后的资源 #

检查你的主布局模板（如resources/views/layouts/app.blade.php），确认已包含Vite编译的资源：

@vite(['resources/js/app.js', "resources/css/app.css"])

6. 测试实时功能 #

• 创建一个广播事件（示例）：

namespace App\Events;

use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\InteractsWithSockets;
use Illuminate\Queue\SerializesModels;

class OrderCreated implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $order;

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

    public function broadcastOn(): PrivateChannel
    {
        return new PrivateChannel('user.'.auth()->id());
    }
}

• 在Livewire组件视图中监听事件：

<script>
window.Echo.private('user.{{ auth()->id() }}')
    .listen('OrderCreated', (e) => {
        console.log('新订单:', e.order);
        // 调用Livewire方法更新UI
        @this.call('refreshOrderList');
    });
</script>

• 在业务逻辑中触发事件：

event(new \App\Events\OrderCreated($newOrder));

关键注意事项 #

• 确保.env中的Reverb配置正确，且添加VITE前缀的变量：

REVERB_APP_KEY=your-reverb-key
REVERB_APP_ID=your-reverb-id
REVERB_APP_SECRET=your-reverb-secret
REVERB_HOST=localhost
REVERB_PORT=8080
REVERB_SCHEME=http

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

• 启用BroadcastServiceProvider（在config/app.php中取消对应注释）。

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