wire:poll

轮询是 Web 应用程序中使用的一种技术，用于"轮询"服务器（定期发送请求）以获取更新。这是一种简单的方法，可以使页面保持最新，而无需使用像 WebSockets 这样更复杂的技术。

基本用法

在 Livewire 中使用轮询就像向元素添加 wire:poll 一样简单。

以下是显示用户订阅者数量的 SubscriberCount 组件的示例：

<?php

namespace App\Livewire;

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

class SubscriberCount extends Component
{
    public function render()
    {
        return view('livewire.subscriber-count', [
            'count' => Auth::user()->subscribers->count(),
        ]);
    }
}

<div wire:poll> <!-- [tl! highlight] -->
    Subscribers: {{ $count }}
</div>

通常，此组件会显示用户的订阅者数量，并且在刷新页面之前不会更新。但是，由于组件模板上的 wire:poll，此组件现在将每 2.5 秒刷新一次，保持订阅者数量最新。

你还可以通过向 wire:poll 传递值来指定在轮询间隔上触发的操作：

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

现在，组件上的 refreshSubscribers() 方法将每 2.5 秒调用一次。

时间控制

轮询的主要缺点是它可能占用大量资源。如果使用轮询的页面上有一千名访问者，则每 2.5 秒将触发一千个网络请求。

在这种情况下减少请求的最佳方法是简单地延长轮询间隔。

你可以通过将所需的持续时间附加到 wire:poll 来手动控制组件轮询的频率，如下所示：

<div wire:poll.15s> <!-- 以秒为单位... -->

<div wire:poll.15000ms> <!-- 以毫秒为单位... -->

后台节流

为了进一步减少服务器请求，当页面处于后台时，Livewire 会自动节流轮询。例如，如果用户在不同的浏览器选项卡中保持页面打开，Livewire 将减少 95% 的轮询请求，直到用户重新访问该选项卡。

如果你想退出此行为并持续轮询，即使选项卡处于后台，也可以将 .keep-alive 修饰符添加到 wire:poll：

<div wire:poll.keep-alive>

视口节流

你可以采取的另一个仅在必要时轮询的措施是将 .visible 修饰符添加到 wire:poll。.visible 修饰符指示 Livewire 仅在组件在页面上可见时轮询它：

<div wire:poll.visible>

如果使用 wire:visible 的组件位于长页面的底部，它将不会开始轮询，直到用户将其滚动到视口中。当用户滚动离开时，它将再次停止轮询。