แพ็กเกจอย่างเป็นทางการ · เฟรมเวิร์ก

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

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

เวอร์ชันบน Packagistสัญญาอนุญาต

hibira-io/livewirePackagist ↗GitHub ↗

วิธีที่เร็วที่สุด: ปลั๊กอิน Hibira กับพรอมต์เดียว

ติดตั้งปลั๊กอินในเอเจนต์เขียนโค้ด AI ของคุณแล้ววางพรอมต์ เอเจนต์จะลงชื่อเข้าใช้ สร้างแอปฟรีหากจำเป็น เขียนโค้ด และส่งอีเวนต์ทดสอบให้ GitHub ↗

  1. ติดตั้งปลั๊กอิน

    claude plugin marketplace add hibira-io/agent-plugin
claude plugin install hibira@hibira

  2. วางพรอมต์นี้

    Add Hibira Livewire (hibira-io/livewire) to this project.
Follow https://hibira.io/guides/livewire, adapted to how this project is already set up.
If I have no Hibira app yet, create a Free one that allows http://localhost so I can test right away.
Keep the app key and secret in environment variables, add placeholders to .env.example, and never commit real values or send the secret to a browser.
When you are done, send a test event, show me it arriving, and list the files you changed.

อยากทำเองใช่ไหม ขั้นตอนด้านล่างมีดังนี้:

  1. ติดตั้ง
  2. ใช้งาน

เครื่องมือ AI อื่นและสิ่งที่อยู่ในปลั๊กอิน →

  • <x-hibira-whos-here /> แสดงผู้ใช้ที่ลงชื่อเข้าใช้บนหน้าหรือห้องเดียวกันแบบสดผ่าน presence channel
  • <livewire:hibira-batch-progress :batch="$id" /> ติดตาม Bus::batch() โดยไม่ต้องใช้ wire:poll: อัปเดตหลังแต่ละงานเสร็จ และส่ง hibira-batch-finished เมื่อจบ
  • รองรับ Laravel 10 ถึง 13 พร้อมข้อความภาษาอังกฤษ จีนตัวเต็มและตัวย่อ ญี่ปุ่น เกาหลี ไทย และเวียดนาม
หน้า Livewire ที่แสดงอวาตาร์ของผู้ใช้อีกคนที่ลงชื่อเข้าใช้ ไฟ Live สีเขียว และการนำเข้าลูกค้าที่ 35% เสร็จแล้ว 7 จาก 20
หน้า Livewire ที่แสดงอวาตาร์ของผู้ใช้อีกคนที่ลงชื่อเข้าใช้ ไฟ Live สีเขียว และการนำเข้าลูกค้าที่ 35% เสร็จแล้ว 7 จาก 20

ลงชื่อเข้าใช้เพื่อดูโค้ดตัวอย่างเหล่านี้พร้อมโฮสต์คลัสเตอร์ของคุณเอง ลงชื่อเข้าใช้

  1. ติดตั้ง

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

  2. ใช้งาน

    <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 ทำงานไว้ตลอด

ใช้ app key จากแดชบอร์ดของคุณ ส่วน secret ให้เก็บไว้บนเซิร์ฟเวอร์เท่านั้น ช่อง อีเวนต์ และ endpoint การยืนยันสิทธิ์ทำงานเหมือนกับที่ใช้กับ Pusher ทุกประการ สร้างบัญชีฟรีของคุณ →