公式パッケージ · フレームワーク

HTML をライブで差し替える htmx 拡張

サーバーが HTML の断片をレンダリングして配信すると、開いているすべてのページが hx-ext="hibira" で差し替えます。WebSocket サーバーも Channels も Redis も不要で、バックエンドを選びません。

@hibira-io/htmxnpm ↗GitHub ↗

hibira-swap は配信された HTML を hx-swap、hx-target、out-of-band のルールで差し替えます。hx-trigger="hibira:イベント" なら要素自身のリクエストを実行します。
htmx 2 と htmx 4 に対応。Laravel、Django、Flask、FastAPI、Rails、Go、Node など、Pusher のサーバーライブラリがあるバックエンドで使えます。
プライベートチャンネルは hx-headers にある CSRF ヘッダーで認可し、Laravel Echo のあるページではその接続をそのまま使います。

htmx で作った注文ボード：あるタブで追加した注文が、開いているすべてのタブのリスト先頭に現れ、未完了の件数も一緒に更新されます。

サインインすると、コード例にご自身のクラスターホストが入ります。サインイン

インストール

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

設定する

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

使う

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 プランでは 1 イベント 4 KB まで。大きい HTML やユーザーごとに異なる HTML は小さなイベントだけを配信し、hx-trigger でサーバーから取得してください。

ダッシュボードのアプリキーを使ってください。シークレットはサーバー側だけに置きます。チャンネル、イベント、認可エンドポイントは Pusher とまったく同じように動作します。無料でアカウントを作成 →