-
Notifications
You must be signed in to change notification settings - Fork 223
/
polling.blade.php
67 lines (50 loc) · 1.99 KB
/
polling.blade.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
* [Introduction](#introduction)
* [Polling in the background](#polling-background)
* [Polling only when element is visible](#polling-element-visible)
## Introduction {#introduction}
Livewire offers a directive called `wire:poll` that, when added to an element, will refresh the component every `2s`.
@component('components.tip')
Polling for changes over Ajax is a lightweight, simpler alternative to something like Laravel Echo, Pusher, or any WebSocket strategy.
@endcomponent
@component('components.code')
@verbatim
<div wire:poll>
Current time: {{ now() }}
</div>
@endverbatim
@endcomponent
You can customize the frequency by passing a directive modifier like `750ms`. For example:
@component('components.code')
@verbatim
<div wire:poll.750ms>
Current time: {{ now() }}
</div>
@endverbatim
@endcomponent
You can also specify a specific action to fire on the polling interval by passing a value to `wire:poll`:
@component('components.code')
@verbatim
<div wire:poll="foo">
Current time: {{ now() }}
</div>
@endverbatim
@endcomponent
Now, the `foo` method on the component will be called every 2 seconds.
## Polling in the background {#polling-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:
@component('components.code')
@verbatim
<div wire:poll.keep-alive>
Current time: {{ now() }}
</div>
@endverbatim
@endcomponent
## Polling only when element is visible {#polling-element-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:
@component('components.code')
@verbatim
<div wire:poll.visible></div>
@endverbatim
@endcomponent