공식 패키지 · 프레임워크

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 플랜에서는 이벤트당 최대 4 KB입니다. 큰 HTML이나 사용자별 HTML은 작은 이벤트만 발행하고 hx-trigger로 서버에서 가져오세요.

대시보드의 앱 키를 사용하세요. 시크릿은 서버에만 둡니다. 채널, 이벤트, 인가 엔드포인트는 Pusher와 똑같이 동작합니다. 무료 계정 만들기 →