# Thành phần thời gian thực cho Livewire

> Ba thành phần dùng ngay cho Livewire 3 và 4: ảnh đại diện của những ai đang ở cùng trang, thanh tiến độ của job batch chạy theo hàng đợi, và đèn cho biết kết nối thời gian thực có đang hoạt động không.

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

Ba thành phần dùng ngay cho Livewire 3 và 4: ảnh đại diện của những ai đang ở cùng trang, thanh tiến độ của job batch chạy theo hàng đợi, và đèn cho biết kết nối thời gian thực có đang hoạt động không.

Package: hibira-io/livewire

- <x-hibira-whos-here /> hiển thị trực tiếp những người đã đăng nhập trên cùng trang hoặc phòng qua presence channel.
- <livewire:hibira-batch-progress :batch="$id" /> theo dõi một Bus::batch() mà không cần wire:poll: cập nhật sau mỗi job xong và phát hibira-batch-finished khi kết thúc.
- Laravel 10 đến 13, với văn bản tiếng Anh, tiếng Trung phồn thể và giản thể, tiếng Nhật, tiếng Hàn, tiếng Thái và tiếng Việt.

## 1. Cài đặt

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

## 2. Sử dụng

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

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

## Trước khi bắt đầu

- Secret của ứng dụng chỉ hiện một lần, khi bạn tạo ứng dụng hoặc xoay vòng secret. Hãy giữ nó trên máy chủ, không bao giờ đưa vào trình duyệt hay bản build game.
- Các thành phần dùng window.Echo do hibira:install ghi trong resources/js/echo.js: hãy import nó trong resources/js/app.js.
- Tiến độ batch được phát từ hàng đợi: hãy để php artisan queue:work luôn chạy.

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