Skip to content
全部文档

轮询

轮询是 Web 应用中按固定间隔「询问」服务器(发送请求)以获取更新的技术。这是在不使用 WebSockets 等更复杂技术的情况下保持页面最新的简单方式。

基本用法

在 Livewire 中使用轮询很简单,只需给元素加上 wire:poll

下面是一个显示用户订阅者数量的 subscriber-count 组件示例:

php
<?php // resources/views/components/⚡subscriber-count.blade.php

use Illuminate\Support\Facades\Auth;
use Livewire\Attributes\Computed;
use Livewire\Component;

new class extends Component {
    #[Computed]
    public function count()
    {
        return Auth::user()->subscribers->count();
    }
};
blade
<div wire:poll>
    Subscribers: {{ $this->count }}
</div>

通常,该组件只会显示订阅者数量,直到刷新页面才会更新。但由于模板上有 wire:poll,组件现在会每 2.5 秒刷新一次,保持订阅者数量最新。

也可以给 wire:poll 传入值,指定在轮询间隔时触发的动作:

blade
<div wire:poll="refreshSubscribers">
    Subscribers: {{ $this->count }}
</div>

这样,组件上的 refreshSubscribers() 方法会每 2.5 秒调用一次。

控制间隔

轮询的主要缺点是可能消耗较多资源。若有一千名访客停留在使用轮询的页面上,每 2.5 秒就会触发一千次网络请求。

此时减少请求的最佳方式就是把轮询间隔拉长。

可以通过在 wire:poll 后追加期望时长来手动控制轮询频率,例如:

blade
<div wire:poll.1m> <!-- In minutes... -->

<div wire:poll.15s> <!-- In seconds... -->

<div wire:poll.15000ms> <!-- In milliseconds... -->

后台节流

为进一步减少服务器请求,页面处于后台时 Livewire 会自动节流轮询。例如,用户把页面留在另一个浏览器标签页时,Livewire 会把轮询请求减少约 95%,直到用户重新打开该标签。

若要退出该行为、即使标签页在后台也持续轮询,可给 wire:poll 加上 .keep-alive 修饰符:

blade
<div wire:poll.keep-alive>

视口节流

另一个只在必要时轮询的做法是给 wire:poll 加上 .visible 修饰符。.visible 会让 Livewire 仅在组件在页面上可见时才轮询:

blade
<div wire:poll.visible>

若使用可见性轮询的组件位于长页面底部,只有用户滚动到视口内才会开始轮询;滚出视口后会再次停止。