Gói chính thức · Thành phần thời gian thực

Hộp thông báo cho ứng dụng của bạn

Một chiếc chuông có số chưa đọc và danh sách thông báo có thể đánh dấu đã đọc, chưa đọc và lưu trữ, cập nhật tức thì trên mọi tab và ứng dụng đang mở. Máy chủ của bạn chỉ cần gửi một yêu cầu; Hibira lưu thông báo, gửi tức thì và đẩy thông báo cho người dùng đang ngoại tuyến.

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

• Component cho React, Vue và React Native, cùng widget Flutter trong gói hibira_inbox, hỗ trợ bảy ngôn ngữ, giao diện sáng và tối.
• Trình duyệt hoặc ứng dụng đọc và đánh dấu thông báo của chính mình bằng token người dùng ngắn hạn do máy chủ của bạn ký, nên bạn không phải viết endpoint trung gian.
• Người dùng không có kết nối sẽ nhận thông báo đẩy qua Hibira Push. Dùng key để thử lại an toàn: cùng một thông báo không bao giờ bị lưu hai lần.

Đăng nhập để xem các đoạn mã này với host cụm của riêng bạn. Đăng nhập

1. Cài đặt

   npm install @hibira-io/inbox pusher-js

2. Gửi từ máy chủ

   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) });
   });

3. Sử dụng

   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>;
   }

4. 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)]);

Trước khi bắt đầu

• Secret của ứng dụng chỉ hiện một lần, khi bạn tạo ứng dụng hoặc xoay vòng secret. Hãy giữ nó trên máy chủ, không bao giờ đưa vào trình duyệt hay bản build game.
• Để cập nhật tức thì, hãy đăng nhập người dùng ở phía client (pusher.signin() với endpoint xác thực người dùng). Nếu không, hộp thông báo sẽ làm mới mỗi phút.
• Thông báo được lưu 7 ngày với gói Free, 30 ngày với Hobby và Starter, 90 ngày từ Pro trở lên, và mỗi người dùng giữ 1.000 thông báo mới nhất. Mỗi người nhận được tính là một tin nhắn.

Dùng app key từ bảng điều khiển; secret chỉ để trên máy chủ của bạn. Kênh, sự kiện và endpoint xác thực hoạt động y như với Pusher. Tạo tài khoản miễn phí →