แพ็กเกจอย่างเป็นทางการ · เฟรมเวิร์ก

ส่วนขยาย htmx สำหรับสลับ HTML แบบสด

เซิร์ฟเวอร์ของคุณเรนเดอร์ชิ้นส่วน HTML แล้วเผยแพร่ ทุกหน้าที่เปิดอยู่จะสลับเข้าไปด้วย hx-ext="hibira" ไม่ต้องดูแลเซิร์ฟเวอร์ WebSocket, Channels หรือ Redis ใช้ได้กับทุกแบ็กเอนด์

@hibira-io/htmxnpm ↗GitHub ↗

  • hibira-swap สลับ HTML ที่เผยแพร่ตาม hx-swap, hx-target และ out-of-band ส่วน hx-trigger="hibira:event" จะให้องค์ประกอบส่งคำขอของตัวเองแทน
  • รองรับ htmx 2 และ htmx 4 ใช้กับ Laravel, Django, Flask, FastAPI, Rails, Go, Node หรือแบ็กเอนด์ใดก็ได้ที่มีไลบรารีเซิร์ฟเวอร์ของ Pusher
  • ช่องส่วนตัวยืนยันสิทธิ์ด้วยเฮดเดอร์ CSRF ที่มีอยู่แล้วใน hx-headers และหน้าที่มี 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 ให้ใส่ทุก origin ที่หน้าเว็บโหลดมาใน Origin ที่อนุญาตของแอป (http://localhost:3000 ระหว่างพัฒนา แล้วตามด้วยโดเมนของคุณ) ส่วน "*" ต้องใช้แพ็กเกจแบบชำระเงิน
  • แพ็กเกจ Free ส่งได้สูงสุด 4 KB ต่ออีเวนต์ สำหรับ HTML ที่ใหญ่หรือต่างกันตามผู้ใช้ ให้เผยแพร่อีเวนต์เล็กๆ แล้วให้ hx-trigger ดึง HTML จากเซิร์ฟเวอร์ของคุณ

ใช้ app key จากแดชบอร์ดของคุณ ส่วน secret ให้เก็บไว้บนเซิร์ฟเวอร์เท่านั้น ช่อง อีเวนต์ และ endpoint การยืนยันสิทธิ์ทำงานเหมือนกับที่ใช้กับ Pusher ทุกประการ สร้างบัญชีฟรีของคุณ →