클라이언트 라이브러리

JavaScript에서 실시간 WebSocket 사용하기

공식 pusher-js 라이브러리로 브라우저, React, Vue, React Native를 지원합니다.

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

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

  1. 설치

    npm install pusher-js

  2. 채널 구독

    import Pusher from 'pusher-js';

const pusher = new Pusher('YOUR_APP_KEY', {
  cluster: 'ap',
  wsHost: 'ws.hibira.io',
  wsPort: 443,
  wssPort: 443,
  forceTLS: true,
  enabledTransports: ['ws', 'wss'],
  // Private and presence channels
  channelAuthorization: { endpoint: '/broadcasting/auth', transport: 'ajax' },
});

const channel = pusher.subscribe('orders');
channel.bind('order-shipped', (data) => {
  console.log('Order shipped', data);
});

에이전트 프롬프트

Claude Code, Cursor, GitHub Copilot 등 AI 코딩 에이전트에 붙여 넣으면 위 설정대로 Hibira를 내 JavaScript 프로젝트에 연동합니다.

YOUR_APP_KEY 등 자리 표시자는 대시보드의 값으로 바꾸세요. 에이전트가 환경 변수로 남겨 두게 한 뒤 나중에 채워도 됩니다.

또는 Hibira MCP 서버를 연결하면 에이전트가 앱을 만들고 자격 증명까지 직접 채웁니다. AI 코딩 에이전트 연결 →

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