官方套件 · 框架

即時換上 HTML 的 htmx 擴充

你的伺服器渲染 HTML 片段並發佈出去，每個開著的頁面就用 hx-ext="hibira" 換上。不用自架 WebSocket 伺服器、Channels 或 Redis，任何後端都能用。

@hibira-io/htmxnpm ↗GitHub ↗

  • hibira-swap 會依照 hx-swap、hx-target 與 out-of-band 規則換上發佈的 HTML；hx-trigger="hibira:事件" 則改由元素自己發出請求。
  • 支援 htmx 2 與 htmx 4，可搭配 Laravel、Django、Flask、FastAPI、Rails、Go、Node，或任何有 Pusher 伺服器函式庫的後端。
  • 私人頻道會用 hx-headers 裡現有的 CSRF 標頭授權；頁面已有 Laravel Echo 時沿用同一條連線。
用 htmx 做的訂單看板：在一個分頁新增的訂單，會出現在每個開著的分頁清單最上面，未完成數也一起更新。
用 htmx 做的訂單看板：在一個分頁新增的訂單，會出現在每個開著的分頁清單最上面，未完成數也一起更新。

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

  1. 安裝

    <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.11/dist/htmx.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pusher-js@8.6.0/dist/web/pusher.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@hibira-io/htmx@0.1/dist/hibira.min.js"></script>

  2. 設定

    <body hx-ext="hibira" hibira-connect="YOUR_APP_KEY"
      hibira-options='{"wsHost":"ws.hibira.io"}'
      hibira-auth-endpoint="/broadcasting/auth"
      hx-headers='{"X-CSRF-TOKEN": "..."}'>

  <!-- the HTML your server publishes is swapped in -->
  <ul hibira-channel="orders" hibira-swap="order-created" hx-swap="afterbegin">…</ul>

  <!-- or the event makes the element fetch fresh HTML from you -->
  <div hibira-channel="private-cart.42" hx-get="/cart" hx-trigger="load, hibira:cart-changed"></div>
</body>

  3. 使用

    import pusher

hibira = pusher.Pusher(
    app_id="YOUR_APP_ID",
    key="YOUR_APP_KEY",
    secret="YOUR_APP_SECRET",
    host="ws.hibira.io",
    ssl=True,
)

# after saving the order: every open page gets the new row
hibira.trigger("orders", "order-created", render_to_string("orders/_row.html", {"order": order}))

開始之前

  • 應用程式的密鑰只會在建立應用程式或輪替密鑰時顯示一次。請只放在伺服器上，不要放進瀏覽器或遊戲的建置檔。
  • Free 方案需要把頁面載入的每個來源都加進應用程式的「允許的來源」（開發時是 http://localhost:3000，之後是您的網域）。"*" 需要付費方案。
  • Free 方案每個事件最多 4 KB。較大或因使用者而異的 HTML，請發佈一個小事件，讓 hx-trigger 向你的伺服器取得 HTML。

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