공식 패키지 · 실시간 구성 요소

앱에 알림함 추가하기

읽지 않은 수가 표시되는 벨과 읽음, 읽지 않음, 보관을 지원하는 알림 목록이 열려 있는 모든 탭과 앱에서 실시간으로 갱신됩니다. 서버가 요청 한 번만 보내면 Hibira가 알림을 저장하고 실시간으로 전달하며, 오프라인 사용자에게는 푸시 알림을 보냅니다.

@hibira-io/inboxnpm ↗GitHub ↗pub.dev ↗

React, Vue, React Native 컴포넌트와 hibira_inbox 패키지의 Flutter 위젯을 제공하며, 7개 언어와 라이트·다크 테마를 지원합니다.
브라우저나 앱은 서버가 서명한 단기 사용자 토큰으로 자신의 알림을 직접 읽고 표시하므로 중계 엔드포인트를 따로 만들 필요가 없습니다.
연결되어 있지 않은 사용자는 Hibira Push로 푸시 알림을 받습니다. key를 지정하면 재시도해도 안전하며 같은 알림이 두 번 저장되지 않습니다.

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

설치
```
npm install @hibira-io/inbox pusher-js
```

서버에서 보내기

import { createInbox } from '@hibira-io/inbox';

const inbox = createInbox({
  appId: process.env.HIBIRA_APP_ID,
  key: process.env.HIBIRA_KEY,
  secret: process.env.HIBIRA_SECRET,
});

await inbox.send({
  users: ['ann', 'bob'],
  title: 'Order #1042 shipped',
  url: '/orders/1042',
  key: 'order-1042-shipped',
});

// GET /api/inbox-token, behind your login
app.get('/api/inbox-token', requireLogin, (req, res) => {
  res.json({ token: inbox.userToken(req.user.id) });
});

사용하기

import { NotificationBell, useInboxClient } from '@hibira-io/inbox/react';
import '@hibira-io/inbox/styles.css';

export function Header({ user }) {
  const client = useInboxClient({ appId: APP_ID, tokenUrl: '/api/inbox-token', pusher, userKey: user.id });
  return <header>{client && <NotificationBell client={client} />}</header>;
}

Flutter

// flutter pub add hibira_inbox
import 'package:hibira_inbox/hibira_inbox.dart';

final inbox = HibiraInbox(
  appId: hibiraAppId,
  token: () => api.inboxToken(), // from GET /api/inbox-token
  client: hibira, // a signed-in HibiraClient, for live updates
);

AppBar(actions: [NotificationBell(inbox: inbox)]);

시작하기 전에

앱 시크릿은 앱을 만들거나 시크릿을 교체할 때 한 번만 표시됩니다. 서버에만 두고, 브라우저나 게임 빌드에는 절대 넣지 마세요.
실시간으로 갱신하려면 클라이언트에서 사용자를 로그인시키세요(사용자 인증 엔드포인트와 함께 pusher.signin()). 로그인하지 않으면 알림함은 1분마다 새로 고칩니다.
알림은 Free에서 7일, Hobby와 Starter에서 30일, Pro 이상에서 90일 동안 보관되며 사용자마다 최신 1,000개를 유지합니다. 수신자 한 명당 메시지 1건으로 계산합니다.

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

앱에 알림함 추가하기

설치

서버에서 보내기

사용하기

Flutter

시작하기 전에