Polling

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

Polling for changes over Ajax is a lightweight, simpler alternative to WebSocket strategy.

<div wire:poll>

  Current time: {{ date().timestamp }}
  
</div>

You can customize the frequency by passing a directive modifier like 750ms. E.g:

<div wire:poll.500ms>

  Current time: {{ date().timestamp }}
  
</div>

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

<div wire:poll="doSomething">

  Current time: {{ date().timestamp }}
  
</div>

With above, the doSomething method on the component will be called every 2 seconds.

WireDrupal 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:

<div wire:poll.keep-alive>

  Current time: {{ date().timestamp }}
  
</div>

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. E.g:

<div wire:poll.visible>

    ...

</div>