# Livewire のリアルタイムコンポーネント

> Livewire 3 と 4 にそのまま置ける 3 つの部品：同じページにいる人のアバター、キューの進み具合に合わせて動くジョブバッチの進捗バー、リアルタイム接続がつながっているかを示すランプです。

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

Livewire 3 と 4 にそのまま置ける 3 つの部品：同じページにいる人のアバター、キューの進み具合に合わせて動くジョブバッチの進捗バー、リアルタイム接続がつながっているかを示すランプです。

Package: hibira-io/livewire

- <x-hibira-whos-here /> は、同じページやルームにいるサインイン中のユーザーをプレゼンスチャンネルでリアルタイムに表示します。
- <livewire:hibira-batch-progress :batch="$id" /> は wire:poll なしで Bus::batch() を追いかけます。ジョブが終わるたびに更新し、最後に hibira-batch-finished を発行します。
- Laravel 10〜13 に対応し、表示テキストは英語、繁体字中国語、簡体字中国語、日本語、韓国語、タイ語、ベトナム語です。

## 1. インストール

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

## 2. 使う

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

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

## 始める前に

- アプリのシークレットは、アプリの作成時とシークレットのローテーション時に一度だけ表示されます。サーバーにだけ置き、ブラウザやゲームのビルドには入れないでください。
- コンポーネントは hibira:install が resources/js/echo.js に書き出す window.Echo を使います。resources/js/app.js でインポートしてください。
- バッチの進捗はキューから配信されます。php artisan queue:work を動かしたままにしてください。

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