官方套件 · 框架

Livewire 即時元件

三個可直接放進 Livewire 3 與 4 的元件：同一頁面上有誰的頭像、隨佇列處理而前進的工作批次進度條，以及顯示即時連線是否正常的燈號。

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 頻道，即時顯示同一頁面或房間裡已登入的人。
  • <livewire:hibira-batch-progress :batch="$id" /> 不用 wire:poll 就能追蹤 Bus::batch()：每完成一個工作就更新，結束時發出 hibira-batch-finished。
  • 支援 Laravel 10 到 13，介面文字有英文、繁體與簡體中文、日文、韓文、泰文和越南文。
一個 Livewire 頁面：顯示另一位已登入者的頭像、綠色的「即時」燈號，以及進行到 35%、20 筆完成 7 筆的客戶匯入。
一個 Livewire 頁面：顯示另一位已登入者的頭像、綠色的「即時」燈號，以及進行到 35%、20 筆完成 7 筆的客戶匯入。

登入後，範例程式碼會自動帶入您的叢集主機。 登入

  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" />

開始之前

  • 應用程式的密鑰只會在建立應用程式或輪替密鑰時顯示一次。請只放在伺服器上，不要放進瀏覽器或遊戲的建置檔。
  • 元件使用 hibira:install 寫在 resources/js/echo.js 的 window.Echo：請在 resources/js/app.js 匯入它。
  • 批次進度是從佇列廣播的：請保持 php artisan queue:work 執行中。

請使用儀表板中的應用程式 Key；Secret 只放在你的伺服器上。頻道、事件與授權端點的用法和 Pusher 完全相同。 免費建立帳號 →