클라이언트 라이브러리

HTML에서 실시간 WebSocket 사용하기

어떤 웹 페이지든 script 태그 한 줄만 추가하세요. 연결된 클라이언트와 실시간 접속자 수, 피드, 토스트 알림을 빌드 없이 바로 쓸 수 있습니다.

로그인하면 예제 코드에 내 클러스터 호스트가 채워집니다. 로그인

AI 코딩 에이전트를 사용하시나요? 에이전트 프롬프트 복사 ↓

1. script 태그 추가

   <!-- Before </body>, on every page that needs live updates -->
   <script src="https://hibira.io/embed/v1.js" data-key="YOUR_APP_KEY" data-host="ws.hibira.io" async></script>

2. 기본 제공 위젯 넣기

   <!-- People on this page right now (turn on "Send subscriber counts" in the app settings) -->
   <span data-hibira-online="lobby">0</span> online
   
   <!-- The newest "update" events on the news channel, newest first -->
   <ul data-hibira-feed="news" data-event="update" data-limit="10"></ul>
   
   <!-- A toast for each "alert" event: { "title": "...", "body": "...", "url": "..." } -->
   <div data-hibira-toast="alerts" data-event="alert" data-position="bottom-right"></div>

3. 직접 작성한 코드에서 클라이언트 사용

   // Runs as soon as the script has loaded, even if this code runs first.
   (window.Hibira = window.Hibira || []).push((client) => {
     client.subscribe('orders').bind('order-shipped', (data) => {
       console.log('Order shipped', data);
     });
   });

대시보드의 앱 키와 시크릿을 사용하세요. 채널, 이벤트, 인가 엔드포인트는 Pusher와 똑같이 동작합니다. 라이브러리 레퍼런스 ↗