Gói chính thức · Framework

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.

Phiên bản trên PackagistGiấy phép

hibira-io/livewirePackagist ↗GitHub ↗

Cách nhanh nhất: plugin Hibira và một prompt

Cài plugin vào agent lập trình AI của bạn rồi dán prompt. Agent sẽ đăng nhập, tạo ứng dụng miễn phí nếu cần, viết mã và gửi một sự kiện thử. GitHub ↗

  1. Cài plugin

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

  2. Dán prompt này

    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.

Muốn tự làm? Các bước bên dưới:

  1. Cài đặt
  2. Sử dụng

Công cụ AI khác và nội dung plugin →

  • <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.
Một trang Livewire có ảnh đại diện của một người khác đang đăng nhập, đèn Live màu xanh và lượt nhập khách hàng đạt 35%, xong 7 trên 20.
Một trang Livewire có ảnh đại diện của một người khác đang đăng nhập, đèn Live màu xanh và lượt nhập khách hàng đạt 35%, xong 7 trên 20.

Đăng nhập để xem các đoạn mã này với host cụm của riêng bạn. Đăng nhập

  1. Cài đặt

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

  2. Sử dụng

    <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.

Dùng app key từ bảng điều khiển; secret chỉ để trên máy chủ của bạn. Kênh, sự kiện và endpoint xác thực hoạt động y như với Pusher. Tạo tài khoản miễn phí →