官方包 · 实时功能组件

为你的 App 加上通知中心

铃铛加上未读数，以及可标为已读、未读和归档的通知列表，在每个打开的标签页和 App 中实时同步。服务器只需发送一个请求，Hibira 就会存储通知、实时送达，并推送给离线的用户。

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

提供 React、Vue、React Native 组件，以及 hibira_inbox 包中的 Flutter 组件，支持七种语言与浅色、深色主题。
浏览器或 App 使用服务器签发的短期用户 token 直接读取并标记自己的通知，无需另写转发接口。
没有连接的用户会通过 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() 配合用户认证端点）。未登录时，通知中心每分钟刷新一次。
通知保存期限：Free 7 天、Hobby 与 Starter 30 天、Pro 及以上 90 天，每位用户保留最新的 1,000 条。每位收件人计为一条消息。

请使用控制台中应用的 Key；Secret 只放在你的服务器上。频道、事件与授权端点的用法与 Pusher 完全相同。免费创建账号 →

为你的 App 加上通知中心

安装

从服务器发送

使用

Flutter

开始之前