# Livewire 实时组件

> 三个可直接放进 Livewire 3 和 4 的组件：同一页面上有谁的头像、随队列处理而前进的任务批次进度条，以及显示实时连接是否正常的指示灯。

Source: https://hibira.io/zh-cn/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)