Gói chính thức · Framework

Tiện ích htmx để thay HTML trực tiếp

Máy chủ của bạn render một đoạn HTML và phát đi; mọi trang đang mở thay nó vào bằng hx-ext="hibira". Không cần chạy máy chủ WebSocket, Channels hay Redis, dùng với mọi backend.

@hibira-io/htmxnpm ↗GitHub ↗

  • hibira-swap thay HTML được phát theo hx-swap, hx-target và quy tắc out-of-band; hx-trigger="hibira:event" thì cho phần tử tự gửi yêu cầu của nó.
  • Hỗ trợ htmx 2 và htmx 4, với Laravel, Django, Flask, FastAPI, Rails, Go, Node hoặc bất kỳ backend nào có thư viện máy chủ Pusher.
  • Kênh riêng tư được cấp quyền bằng header CSRF có sẵn trong hx-headers, và trang có Laravel Echo dùng lại đúng kết nối đó.
Bảng đơn hàng làm bằng htmx: đơn thêm ở một tab xuất hiện đầu danh sách trong mọi tab đang mở, và số đơn chưa xong cũng cập nhật theo.
Bảng đơn hàng làm bằng htmx: đơn thêm ở một tab xuất hiện đầu danh sách trong mọi tab đang mở, và số đơn chưa xong cũng cập nhật theo.

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

    <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. Thiết lập

    <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. Sử dụng

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

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.
  • Với gói Free, hãy thêm mọi origin mà trang của bạn tải từ đó vào Origin được phép của ứng dụng (http://localhost:3000 khi phát triển, sau đó là tên miền của bạn). "*" cần gói trả phí.
  • Gói Free cho mỗi sự kiện tối đa 4 KB. Với HTML lớn hoặc khác nhau theo người dùng, hãy phát một sự kiện nhỏ và để hx-trigger lấy HTML từ máy chủ của bạn.

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