# Livewire 即時元件

> 三個可直接放進 Livewire 3 與 4 的元件：同一頁面上有誰的頭像、隨佇列處理而前進的工作批次進度條，以及顯示即時連線是否正常的燈號。

Source: https://hibira.io/zh-tw/guides/livewire

三個可直接放進 Livewire 3 與 4 的元件：同一頁面上有誰的頭像、隨佇列處理而前進的工作批次進度條，以及顯示即時連線是否正常的燈號。

Package: hibira-io/livewire

- <x-hibira-whos-here /> 透過 presence 頻道，即時顯示同一頁面或房間裡已登入的人。
- <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)