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-app-cluster # 例如：ap2, mt1, eu

'connections' => [
    'pusher' => [
        'driver' => 'pusher',
        'key' => env('PUSHER_APP_KEY'),
        'secret' => env('PUSHER_APP_SECRET'),
        'app_id' => env('PUSHER_APP_ID'),
        'options' => [
            'cluster' => env('PUSHER_APP_CLUSTER'),
            'encrypted' => true, // 建议开启加密
        ],
    ],
    // ... 其他广播驱动
],

php artisan make:event PushDemoEvent

<?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 PushDemoEvent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;
    public $title;
    public $icon;
    public $actions;

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

    /**
     * 获取事件应该广播到的频道。
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        // 这里定义事件广播到的公共频道。
        // 如果是私有频道，可以使用 PrivateChannel
        return new Channel('notifyChannel');
    }

    /**
     * 获取事件的广播名称。
     * 默认情况下，事件的类名被用作广播名称。
     * 如果你需要自定义，可以重写此方法。
     *
     * @return string
     */
    public function broadcastAs()
    {
        return 'notifyEvent'; // 自定义事件名称
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Events\PushDemoEvent; // 引入你创建的事件
use Illuminate\Support\Facades\Log;

class PushController extends Controller
{
    // ... 其他代码

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

        // 构造通知数据
        $title = '新消息！';
        $message = '您有一条来自系统的新通知。';
        $icon = 'https://example.com/icon.png'; // 可选
        $actions = [
            ['action' => 'view', 'title' => '查看'],
        ];

        // 触发事件，Laravel 会通过 Pusher 将其广播
        event(new PushDemoEvent($title, $message, $icon, $actions));

        return response()->json(['status' => 'Notification sent via Pusher']);
    }

    // ... 其他方法
}

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

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

function NotificationComponent() {
  const [notifications, setNotifications] = useState([]);

  useEffect(() => {
    // 确保在组件卸载时清理 Pusher 连接
    let pusher = null;
    let channel = null;

    try {
      pusher = new Pusher(process.env.REACT_APP_PUSHER_APP_KEY, {
        cluster: process.env.REACT_APP_PUSHER_APP_CLUSTER,
        encrypted: true, // 保持与后端配置一致
      });

      channel = pusher.subscribe("notifyChannel");

      channel.bind("notifyEvent", function (data) {
        console.log("Received notification:", data);
        // 在这里处理接收到的通知数据
        // 例如：显示一个弹窗，更新状态，或者使用浏览器 Notification API
        setNotifications(prevNotifications => [...prevNotifications, data]);
        alert(`新通知: ${data.title} - ${data.message}`);

        // 如果想使用浏览器原生通知（与Service Worker不同，这是通过JS触发的）
        if (Notification.permission === 'granted') {
          new Notification(data.title, {
            body: data.message,
            icon: data.icon,
            actions: data.actions
          });
        } else if (Notification.permission !== 'denied') {
          Notification.requestPermission().then(permission => {
            if (permission === 'granted') {
              new Notification(data.title, {
                body: data.message,
                icon: data.icon,
                actions: data.actions
              });
            }
          });
        }
      });

      // 绑定成功订阅的事件（可选）
      channel.bind('pusher:subscription_succeeded', () => {
        console.log('Successfully subscribed to notifyChannel');
      });

    } catch (error) {
      console.error("Pusher initialization failed:", error);
    }

    // 清理函数：在组件卸载时取消订阅并断开 Pusher 连接
    return () => {
      if (channel) {
        channel.unbind_all(); // 解绑所有事件
        pusher.unsubscribe("notifyChannel"); // 取消订阅频道
      }
      if (pusher) {
        pusher.disconnect(); // 断开 Pusher 连接
      }
    };
  }, []); // 空依赖数组表示只在组件挂载和卸载时运行

  return (
    <div>
      <h1>实时通知</h1>
      <button onClick={() => console.log('This button now triggers backend to send event')}>
        测试通知 (触发后端事件)
      </button>
      <div>
        {notifications.length === 0 ? (
          <p>暂无新通知。</p>
        ) : (
          <ul>
            {notifications.map((notif, index) => (
              <li key={index}>
                <strong>{notif.title}:</strong> {notif.message}
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
}

export default NotificationComponent;