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