SuperAPI AI 工具集

real-time-features

前端与建站

查看项目

更新于 10-15 23:33

技能介绍

用途:该技能用于在 Next.js 应用中实现实时功能,涵盖实时数据更新、在线状态与协作交互,适合构建聊天、实时通知、协作编辑和实时仪表盘等场景。

主要能力:基于 Supabase Realtime,支持订阅 Postgres 表变更(INSERT、UPDATE、DELETE 或 *),可按条件过滤订阅;提供自定义实时订阅 Hook 的封装思路;支持 Presence 在线状态追踪与展示;支持 Broadcast 发送自定义消息,用于光标同步等协作功能;示例覆盖实时聊天(含输入中提示)、实时通知(含浏览器通知)、实时仪表盘统计更新,以及乐观更新。

使用方式:通过 @supabase/ssr 的 createBrowserClient 创建浏览器客户端,使用 supabase.channel(...).on('postgres_changes', {...}).subscribe() 订阅变更,组件卸载时调用 supabase.removeChannel(channel) 清理;Presence 使用 channel.track 与 presenceState;Broadcast 使用 channel.send({ type: 'broadcast', event, payload })。

适用场景:Next.js 客户端组件中的实时消息列表、房间聊天、在线用户列表、协作画布光标、通知铃铛、实时统计面板等。

限制:资料未提供具体版本要求、性能上限、计费信息或 Supabase 项目配置步骤;示例依赖 Supabase 认证与数据库表结构,实际使用需自行准备对应表与权限。