# Realtime components for Livewire

> Three drop-in pieces for Livewire 3 and 4: avatars of who else is on the page, a job batch progress bar that moves as the queue works, and a light that shows whether the realtime connection is up.

Source: https://hibira.io/guides/livewire

Three drop-in pieces for Livewire 3 and 4: avatars of who else is on the page, a job batch progress bar that moves as the queue works, and a light that shows whether the realtime connection is up.

Package: hibira-io/livewire

- <x-hibira-whos-here /> shows the signed-in people on the same page or room, live, through a presence channel.
- <livewire:hibira-batch-progress :batch="$id" /> follows a Bus::batch() without wire:poll: it updates after each finished job and dispatches hibira-batch-finished at the end.
- Laravel 10 to 13, with texts in English, Traditional and Simplified Chinese, Japanese, Korean, Thai and Vietnamese.

## 1. Install

```shell
composer require hibira-io/livewire
php artisan hibira:install
npm install laravel-echo pusher-js
```

## 2. Use it

```html
<x-hibira-connection-status label />
<x-hibira-whos-here />

{{-- $batchId from Bus::batch([...])->dispatch()->id --}}
<livewire:hibira-batch-progress :batch="$batchId" />
```

## Before you start

- The app secret is shown only once, when you create the app or rotate its secret. Keep it on your server, never in a browser or game build.
- The components use window.Echo, which hibira:install writes in resources/js/echo.js: import it in resources/js/app.js.
- Batch progress is broadcast from the queue: keep php artisan queue:work running.

- [Packagist](https://packagist.org/packages/hibira-io/livewire)
- [GitHub](https://github.com/hibira-io/livewire)