主 题
博客系统自文档 · 第 3/16 篇
目录 · 上一篇：文章、分类、标签与发现 · 下一篇：作者工作流（C 端写文）
写在前面
评论是博客的「社交心跳」。本篇说明：读者留言后，作者如何立刻在导航栏看到未读提醒——靠的是 DB 持久化 + WebSocket 推送，不是轮询。
功能与体验
| 角色 | 能力 | 入口 |
|---|---|---|
| 读者 | 评论、回复、点赞 | 文章详情页 |
| 作者 | 铃铛未读角标 | 全站导航 NavNotificationBell |
| 作者 | 评论列表 | /user/profile?tab=inbox |
| 作者 | 标记已读 | 铃铛下拉 / 收件箱 |
实时感：登录后连接 /realtime，新评论触发 siteNotification 事件，角标数字即时 +1。
设计与实现
sequenceDiagram
participant Reader as 读者
participant API as CommentService
participant NS as NotificationService
participant GW as RealtimeGateway
participant Home as use-site-notification
Reader->>API: POST 评论
API->>NS: create(作者uid, type, payload)
NS->>NS: INSERT site_notification
NS->>GW: pushToUser SITE_NOTIFICATION
GW->>Home: unreadCount 更新
数据表 site_notification
| 字段 | 说明 |
|---|---|
uid |
接收者（文章作者） |
type |
如 comment |
payload |
JSON（文章 id、评论内容摘要等） |
read |
是否已读 |
后端关键路径
- 触发：
CommentService创建评论 →NotificationService.create - 推送：
RealtimeGateway.pushToUser(uid, SITE_NOTIFICATION, { notification, unreadCount }) - 查询：
GET /notification/list、GET /notification/unread-count - 已读：
PATCH /notification/read
Home 端分工
| Composable | 职责 |
|---|---|
use-realtime-socket.ts |
连接 /realtime，订阅事件 |
use-site-notification.ts |
维护 unreadCount；挂载时 HTTP 拉一次兜底 |
NavNotificationBell.vue |
UI；列表仍 HTTP 拉取 |
断线重连后会再 HTTP 拉未读数，避免丢消息。
点赞
点赞走 like 模块，经验通过 Redis Stream 异步计入 RPG（见第 11 篇），不发站内通知。
更多互动
留言板、收藏、友链及 RPG 成就联动见 附录 A · 互动与社区（第 16 篇）。
踩坑与取舍
- 勿写「60s 轮询」：旧实现已改为 WebSocket，文档与代码以
use-site-notification.ts为准。 - Nginx 需反代
/socket.io/到 blog-server :5000，否则本地以外环境 WS 连不上。 - 通知只存 DB：刷新页面后历史仍在；WS 只负责「增量提醒」。
系列导航
- 导读 · 第 0 篇
- 延伸阅读：
core/realtime/README.md、verify-realtime-notification.mjs
延伸阅读
blog-server/src/modules/features/notification/notification.service.tsblog-home-nuxt/composables/use-site-notification.ts
全部评论(0)