laravel 后端数据变化时前端页面自动刷新的问题?

Question

使用laravel 做一个展示大屏项目,后台的数据变化时,如何让前端的页面自动刷新.我想到的办法是使用laravel livewire组件. 具体代码如下:

http/livewire/show.php(控制器代码)

use App\Zdrw;
use App\Djgz;
use App\Shgg;
use App\Sjjb;

class Show extends Component
{
    public $zdrws;
    public $djgzs;
    public $shggs;
    public $sjjbs;

    public function mount()
    {
        $this->zdrws = Zdrw::all();
        $this->djgzs = Djgz::all();
        $this->shggs = Shgg::all();
        $this->sjjbs = Sjjb::all();
    }
    public function render()
    {
        return view('livewire.show');
    }
}

前端页面
views/home.blade.php

//这里按照文档添加了wie:poll
    <div wire:poll>
            <livewire:show />
    </div>

views/livewire/show.blade.php

 <table id="table" data-toggle="table" data-pagination="false" data-page-size="8" data-search="false">
        <thead>
        <tr>
            <th data-sortable="true">ID</th>
            <th data-sortable="true">任务名称</th>
            <th data-sortable="true">牵头科室</th>
            <th data-sortable="true">责任人</th>
            <th data-sortable="true">完成时限</th>
            <th data-sortable="true">工作进度</th>
        </tr>
        </thead>
        <tbody wire:model="zdrws">
        @foreach($zdrws as $zdrw)
            <tr>
                <td>{{$zdrw->id}}</td>
                <td>{{$zdrw->name}}</td>
                <td>{{$zdrw->department}}</td>
                <td>{{$zdrw->person}}</td>
                <td>{{$zdrw->finish}}</td>
                <td>{{$zdrw->status}}</td>
            </tr>
        @endforeach
     </tbody>
 </table>

后台数据变动时,删除\修改\添加, 前端数据都不自动变化,我哪里出问题了,应该怎么解决?请各位高手赐教,非常感谢

Answer 1

你的问题是数据没有实时更新，你已经用了 wire:poll 指令，但是你没有指定轮询的时间间隔，你可以先写一个事件类：

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Queue\SerializesModels;

class DataUpdated implements ShouldBroadcast
{
    use SerializesModels;

    public function __construct()
    {
        //
    }

    public function broadcastOn()
    {
        return new Channel('data-updated');
    }
}

然后，在数据更新的地方触发这个事件：

event(new App\Events\DataUpdated());

接下来，修改 Livewire 组件，监听广播的事件并重新获取数据：

use App\Events\DataUpdated;
// ...

class Show extends Component
{
    // ...

    protected $listeners = [
        'echo:data-updated,DataUpdated' => 'updateData',
    ];

    public function updateData()
    {
        $this->zdrws = Zdrw::all();
        $this->djgzs = Djgz::all();
        $this->shggs = Shgg::all();
        $this->sjjbs = Sjjb::all();
    }

    // ...
}

Answer 2

加一个事件监听方法

https://laravel-livewire.com/docs/2.x/events

Answer 3

这可能是因为前端没有及时获取最新的后台数据导致的。解决方法可以有以下几种：

1. 实时刷新：在后台数据变动时，可以使用 WebSocket 或者长轮询等技术实时通知前端进行数据更新。
2. 定时轮询：定时轮询后台接口，获取最新的数据。但是需要注意轮询的时间间隔，过于频繁会增加服务器负担，过于缓慢会导致数据不及时更新。
3. 利用缓存：在前端应用中使用缓存技术，例如 localStorage 或者 Vuex 等，存储后台数据的副本，并定时刷新。这种方式可以减少对服务器的请求，提高性能。
4. 使用响应式框架：例如 Vue.js 和 React 等响应式框架，能够实现数据的自动更新，即当数据变动时，会自动更新视图，无需手动操作。

综上所述，使用实时刷新或响应式框架可能是比较优秀的解决方案，但是需要具体情况具体分析。

Answer 4

一般大屏数据都会是异步加载数据，可以配置自动刷新间隔，比如5秒？

你这种就是在页面加载(mount)时，去绘制(render)一次页面。

livewire没用过，大概查了一下，好像只是可以自动生成CRUD对应的界面？

你应该需要改造一下这个页面。

做数据实时刷新一般两种思路：

• 前端定时拉取：①短连接 ②长轮询
• 后端主动推送：①WebSocket ②HTTP2