Giao diện
@digiforce-nc/plugin-notification-in-app-message
Plugin cung cấp kênh thông báo in-app real-time — hiển thị thông báo trực tiếp trong ứng dụng qua SSE (Server-Sent Events), hỗ trợ inbox UI và mobile.
Plugin này làm gì?
Plugin đăng ký kênh in-app-message vào notification-manager. Khi gửi thông báo in-app, server lưu message vào DB rồi đẩy real-time đến client qua SSE. Người dùng thấy thông báo ngay lập tức — không cần refresh.
Ba nhiệm vụ chính
| # | Nhiệm vụ | Chi tiết |
|---|---|---|
| 1 | Lưu và gửi real-time | Lưu message vào DB, đẩy qua SSE đến client đang online |
| 2 | Inbox UI | Danh sách thông báo với trạng thái đọc/chưa đọc, badge count |
| 3 | Hỗ trợ mobile | Routes và tab bar riêng cho mobile, badge thông báo mới |
Kiến trúc
Luồng gửi thông báo in-app
SSE - Real-time delivery
Plugin dùng Server-Sent Events thay vì WebSocket — đơn giản hơn, tương thích tốt với proxy/load balancer:
| Đặc điểm | Giá trị |
|---|---|
| Giao thức | HTTP SSE (text/event-stream) |
| Hướng | Server → Client (one-way) |
| Kết nối | Mỗi user một stream, auto-reconnect |
| Filtering | Chỉ push đến đúng userId |
Database - collection messages
| Field | Mô tả |
|---|---|
title | Tiêu đề thông báo |
content | Nội dung chi tiết (JSON cho rich content) |
userId | Người nhận |
read | Trạng thái đã đọc (mặc định false) |
Vòng đời plugin
Desktop vs Mobile
| Tính năng | Desktop | Mobile |
|---|---|---|
| Inbox UI | Popup dropdown từ header bell icon | Trang inbox toàn màn hình |
| Badge count | Số trên bell icon | Badge trên tab bar |
| Components | Antd | antd-mobile |
Ví dụ sử dụng API
Gửi thông báo in-app
typescript
await agent.resource('messages').send({
values: {
channelName: 'in-app-channel',
to: [userId],
title: 'Don hang moi',
content: { text: 'Don hang #1234', link: '/orders/1234' },
},
});Lấy thông báo chưa đọc
typescript
const response = await agent.resource('messages').list({
filter: { userId: currentUserId, read: false },
sort: ['-createdAt'],
});Đánh dấu đã đọc
typescript
await agent.resource('messages').update({
filterByTargetKey: messageId,
values: { read: true },
});Thành phần client
| Thành phần | Mô tả |
|---|---|
MessageManagerProvider | Context provider quản lý state thông báo (dùng immer) |
InboxPopup | Popup danh sách thông báo (desktop) |
InboxPage | Trang inbox toàn màn hình (mobile) |
NotificationBadge | Badge hiển thị số thông báo chưa đọc |
Dependencies
| Package | Vai trò |
|---|---|
immer | Immutable state management cho message list |
antd-mobile | UI components cho mobile inbox |
@digiforce-nc/plugin-notification-manager | Hub thông báo trung tâm (bắt buộc) |
@digiforce-nc/server | Server framework — SSE endpoint |
@digiforce-nc/client | Client framework — UI components |