官方包 · 框架

实时替换 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 完全相同。 免费创建账号 →