# คอมโพเนนต์เรียลไทม์สำหรับ Livewire

> ส่วนประกอบสามชิ้นที่ใส่ใน Livewire 3 และ 4 ได้ทันที: อวาตาร์ของคนที่อยู่บนหน้าเดียวกัน แถบความคืบหน้าของ job batch ที่ขยับตามคิว และไฟที่บอกว่าการเชื่อมต่อเรียลไทม์ทำงานอยู่หรือไม่

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

ส่วนประกอบสามชิ้นที่ใส่ใน Livewire 3 และ 4 ได้ทันที: อวาตาร์ของคนที่อยู่บนหน้าเดียวกัน แถบความคืบหน้าของ job batch ที่ขยับตามคิว และไฟที่บอกว่าการเชื่อมต่อเรียลไทม์ทำงานอยู่หรือไม่

Package: hibira-io/livewire

- <x-hibira-whos-here /> แสดงผู้ใช้ที่ลงชื่อเข้าใช้บนหน้าหรือห้องเดียวกันแบบสดผ่าน presence channel
- <livewire:hibira-batch-progress :batch="$id" /> ติดตาม Bus::batch() โดยไม่ต้องใช้ wire:poll: อัปเดตหลังแต่ละงานเสร็จ และส่ง 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" />
```

## ก่อนเริ่ม

- ซีเคร็ตของแอปจะแสดงเพียงครั้งเดียว ตอนสร้างแอปหรือตอนหมุนเวียนซีเคร็ต เก็บไว้บนเซิร์ฟเวอร์เท่านั้น ห้ามใส่ในเบราว์เซอร์หรือไฟล์บิลด์ของเกม
- คอมโพเนนต์ใช้ window.Echo ที่ hibira:install เขียนไว้ใน resources/js/echo.js: นำเข้าใน resources/js/app.js
- ความคืบหน้าของ batch ถูกส่งจากคิว: ให้ php artisan queue:work ทำงานไว้ตลอด

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