Laravel中数据库插入数据后如何向其他页面推送无刷新通知

以下提供两种可直接落地的实现方式，可根据业务场景选择： #

方案1：Laravel Echo + WebSocket 实时推送（推荐，无延迟体验好） #

通过WebSocket服务端主动推送消息，是实时通知场景的最优解。

步骤1：配置服务端广播依赖 #

先安装Pusher官方SDK，可选择付费的Pusher云服务，也可用开源的laravel/websockets自建服务无需额外成本：

composer require pusher/pusher-php-server

修改.env配置广播驱动：

BROADCAST_DRIVER=pusher
PUSHER_APP_ID=自定义ID
PUSHER_APP_KEY=自定义KEY
PUSHER_APP_SECRET=自定义SECRET
PUSHER_APP_CLUSTER=mt1
# 用自建Laravel Websockets需加下面3行配置
PUSHER_HOST=127.0.0.1
PUSHER_PORT=6001
PUSHER_SCHEME=http

在config/app.php中取消App\Providers\BroadcastServiceProvider::class的注释，开启广播服务。

步骤2：创建广播事件 #

运行命令生成事件类：

php artisan make:event NewDataInserted

修改事件类代码，实现ShouldBroadcast接口：

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

    public $testId; // 可自定义需要传递的通知数据

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

    // 定义广播频道，公开频道无需鉴权，需要权限可改用PrivateChannel
    public function broadcastOn()
    {
        return new Channel('public-notifications');
    }

    // 自定义广播事件名
    public function broadcastAs()
    {
        return 'new-data-inserted';
    }
}

步骤3：控制器触发事件 #

修改你的插入逻辑，插入成功后触发广播：

public function insertFunction(Request $request) {
    $insert = New ExampleTable;
    $insert->test_id = $request->id;
    $insert->save();
    
    // 触发广播事件
    event(new \App\Events\NewDataInserted($insert->test_id));
}

步骤4：前端配置监听 #

先安装前端依赖：

npm install laravel-echo pusher-js

在resources/js/bootstrap.js中配置Echo实例：

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';
window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1',
    wsHost: import.meta.env.VITE_PUSHER_HOST ?? `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
    wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
    wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
});

编译前端资源：

npm run build

修改panel.blade.php的JS代码，监听广播事件：

<script> 
    window.Echo.channel('public-notifications')
        .listen('.new-data-inserted', (event) => {
            // 可获取传递的参数：event.testId
            alert("新数据插入通知，ID：" + event.testId);
        });
</script>

步骤5：启动依赖服务 #

• 用自建Laravel Websockets需运行：php artisan websockets:serve
• 启动队列监听：php artisan queue:work

方案2：短轮询方案（无需额外服务，适合小流量场景） #

如果不想搭建WebSocket服务，可通过前端定时拉取的方式实现，逻辑更简单：

步骤1：新增检查新数据的接口 #

在路由文件中添加：

Route::get('/check-new-data', [YourController::class, 'checkNewData']);

控制器中增加查询方法：

public function checkNewData(Request $request)
{
    $lastCheckTime = $request->query('last_check', now()->subMinutes(10));
    $hasNewData = ExampleTable::where('created_at', '>', $lastCheckTime)->exists();
    return response()->json([
        'has_new' => $hasNewData,
        'latest_check' => now()
    ]);
}

步骤2：前端定时拉取 #

修改panel.blade.php的JS代码：

<script> 
    let lastCheckTime = new Date().toISOString();
    // 每3秒查询一次，可根据业务调整间隔
    setInterval(async () => {
        const res = await fetch(`/check-new-data?last_check=${lastCheckTime}`);
        const result = await res.json();
        if(result.has_new) {
            alert("notification came");
            lastCheckTime = result.latest_check;
        }
    }, 3000);
</script>

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