Polling

• Introduction
• Polling in the background
• Polling only when element is visible

Introduction

Livewire offers a directive called wire:poll that, when added to an element, will refresh the component every 2s.

        
1<div wire:poll>
2    Current time: {{ now() }}
3</div>
    

You can customize the frequency by passing a directive modifier like 750ms. For example:

        
1<div wire:poll.750ms>
2    Current time: {{ now() }}
3</div>
    

You can also specify a specific action to fire on the polling interval by passing a value to wire:poll:

        
1<div wire:poll="foo">
2    Current time: {{ now() }}
3</div>
    

Now, the foo method on the component will be called every 2 seconds.

Polling in the background

Livewire reduces polling when the browser tab is in the background so that it doesn't bog down the server with ajax requests unnecessarily. Only about 5% of the expected polling requests are kept.

If you'd like to keep polling at the normal rate even while the tab is in the background, you can use the keep-alive modifier:

        
1<div wire:poll.keep-alive>
2    Current time: {{ now() }}
3</div>
    

Polling only when element is visible

If your component isn't always visible in the browser's viewport (further down the page for example), you can opt to only poll the server when an element is visible by adding the .visible modifier to wire:poll. For example:

        
1<div wire:poll.visible></div>