Laravel与React实时通知：使用Pusher实现高效事件广播

composer require pusher/pusher-php-server

BROADCAST_DRIVER=pusher
PUSHER_APP_ID=your-pusher-app-id
PUSHER_APP_KEY=your-pusher-app-key
PUSHER_APP_SECRET=your-pusher-app-secret
PUSHER_APP_CLUSTER=your-pusher-cluster # 例如：ap2, mt1, us2
MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

// config/app.php
'providers' => [
    // ...
    App\Providers\BroadcastServiceProvider::class,
],

php artisan make:event NotificationEvent

<?php

namespace App\Events;

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

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

    public $message;
    public $userId;

    /**
     * 创建一个新的事件实例。
     *
     * @return void
     */
    public function __construct($message, $userId = null)
    {
        $this->message = $message;
        $this->userId = $userId;
    }

    /**
     * 获取事件应该广播到的频道。
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        // 广播到一个公共频道 'notifyChannel'
        // 如果需要针对特定用户，可以使用 PrivateChannel 或 PresenceChannel
        return new Channel('notifyChannel');
    }

    /**
     * 获取事件的广播名称。
     *
     * @return string
     */
    public function broadcastAs()
    {
        return 'new-notification'; // 客户端将监听这个事件名
    }

    /**
     * 获取广播有效载荷。
     *
     * @return array
     */
    public function broadcastWith()
    {
        return [
            'title' => '新通知',
            'body' => $this->message,
            'userId' => $this->userId,
            'timestamp' => now()->toDateTimeString(),
        ];
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Events\NotificationEvent; // 引入我们创建的事件
use Illuminate\Support\Facades\Log;

class PushController extends Controller
{
    // ... 其他use声明和trait

    public function push()
    {
        Log::info('Push push function called');

        // 假设我们想发送一个通用通知
        $message = "您的Laravel应用有新的更新！";
        $userId = null; // 如果是特定用户通知，这里可以传入用户ID

        // 触发NotificationEvent，它将通过Pusher广播
        event(new NotificationEvent($message, $userId));

        // 也可以直接返回JSON响应，而不是重定向
        return response()->json(['status' => 'success', 'message' => 'Notification broadcasted.']);
    }

    // ... store 方法保持不变，它用于Web Push API的订阅
}

npm install --save pusher-js
# 或者
yarn add pusher-js

import React, { useEffect } from 'react';
import Pusher from 'pusher-js';

function NotificationListener() {
  useEffect(() => {
    // 确保Pusher APP KEY和CLUSTER从环境变量中获取，以避免硬编码
    // 在Laravel项目中，通常通过MIX_PUSHER_APP_KEY等环境变量在webpack中注入
    const pusherAppKey = process.env.MIX_PUSHER_APP_KEY || 'your-pusher-key'; // 替换为你的Pusher App Key
    const pusherAppCluster = process.env.MIX_PUSHER_APP_CLUSTER || 'ap2'; // 替换为你的Pusher Cluster

    if (!pusherAppKey || !pusherAppCluster) {
      console.error("Pusher APP_KEY or CLUSTER is not defined.");
      return;
    }

    // 初始化Pusher实例
    var pusher = new Pusher(pusherAppKey, {
      cluster: pusherAppCluster,
      encrypted: true, // 推荐使用加密连接
    });

    // 订阅 'notifyChannel' 频道
    var channel = pusher.subscribe('notifyChannel');

    // 绑定 'new-notification' 事件（与Laravel事件的broadcastAs()方法对应）
    channel.bind('new-notification', function (data) {
      // 接收到通知数据
      console.log('Received real-time notification:', data);
      alert(`新通知: ${data.title} - ${data.body}`); // 简单地使用alert显示通知

      // 在实际应用中，你可能会更新React state来显示一个更美观的通知组件
      // 例如：setNotifications(prev => [...prev, data]);
    });

    // 清理函数：组件卸载时取消订阅，避免内存泄漏
    return () => {
      channel.unbind_all(); // 解绑所有事件监听器
      pusher.unsubscribe('notifyChannel'); // 取消订阅频道
      pusher.disconnect(); // 断开Pusher连接
    };
  }, []); // 空依赖数组表示只在组件挂载和卸载时执行

  return (
    <div>
      {/* 你的React组件UI */}
      <h1>实时通知监听器</h1>
      <p>正在监听来自Laravel的实时通知...</p>
      {/* 原始问题中的测试按钮，现在可以触发Laravel的push方法 */}
      <button onClick={() => {
        console.log('test button clicked');
        // 这里可以调用API来触发Laravel的push方法
        // workerApi.makePushNotification({ URL, token}) 假设这个方法现在调用的是Laravel的push()
        // 或者直接调用一个模拟的通知触发函数
        // 实际应用中，这个按钮可能是一个管理面板的“发送通知”按钮
        fetch('/api/push', { method: 'POST' }) // 假设Laravel的push方法通过POST请求访问
          .then(response => response.json())
          .then(data => console.log('Laravel push response:', data))
          .catch(error => console.error('Error triggering Laravel push:', error));
      }}>
        测试通知
      </button>
    </div>
  );
}

export default NotificationListener;