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

// app/Events/NewNotification.php
<?php

namespace App\Events;

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

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

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

    /**
     * Create a new event instance.
     *
     * @param string $title
     * @param string $message
     * @param string|null $icon
     */
    public function __construct($title, $message, $icon = null)
    {
        $this->title = $title;
        $this->message = $message;
        $this->icon = $icon;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return array<int, \Illuminate\Broadcasting\Channel>
     */
    public function broadcastOn(): array
    {
        // 广播到一个公共频道
        return [new Channel('notifyChannel')];
    }

    /**
     * The event's broadcast name.
     *
     * @return string
     */
    public function broadcastAs()
    {
        return 'notifyEvent'; // 事件的名称，前端将通过这个名称监听
    }
}

// app/Http/Controllers/PushController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Events\NewNotification; // 引入你定义的事件
use Illuminate\Support\Facades\Log;

class PushController extends Controller
{
    public function sendNotification(Request $request)
    {
        // 假设你要发送一个简单的通知
        $title = "新消息！";
        $message = "您有一个新的订单等待处理。";
        $icon = "https://example.com/notification-icon.png";

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

        Log::info('Notification event dispatched.');

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

    // ... 你的其他方法，例如store
}

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

// src/components/NotificationListener.js 或你的主要App.js
import React, { useEffect } from 'react';
import Pusher from 'pusher-js';

const NotificationListener = () => {
  useEffect(() => {
    // 确保在组件挂载时只执行一次
    const pusher = new Pusher(process.env.REACT_APP_PUSHER_APP_KEY, {
      cluster: process.env.REACT_APP_PUSHER_APP_CLUSTER,
      encrypted: true, // 建议使用加密连接
    });

    const channel = pusher.subscribe('notifyChannel'); // 订阅与Laravel中定义的频道相同的频道

    // 绑定到Laravel中定义的事件名称
    channel.bind('notifyEvent', function (data) {
      console.log('收到实时通知:', data);
      // 在这里处理收到的通知数据
      // 例如，显示一个浏览器通知，或者更新UI
      alert(`新通知: ${data.title} - ${data.message}`);

      // 如果需要显示Web Push API风格的浏览器通知，可以在这里调用
      if (Notification.permission === 'granted') {
        navigator.serviceWorker.ready.then(registration => {
          registration.showNotification(data.title, {
            body: data.message,
            icon: data.icon,
            // actions: data.actions // 如果需要，可以添加通知操作
          });
        });
      }
    });

    // 清理函数：在组件卸载时取消订阅
    return () => {
      pusher.unsubscribe('notifyChannel');
      pusher.disconnect();
    };
  }, []); // 空数组表示只在组件挂载和卸载时执行

  return (
    <div>
      {/* 你的React应用的其他内容 */}
      <p>正在监听实时通知...</p>
    </div>
  );
};

export default NotificationListener;