0成本🆓！10分钟⏱内用AI实现一个掘金在线实时聊天室📢!!!

不想看文章，直接安装体验：👇 scriptcat.org/scripts/cod…

预览效果：

只需3步，用油猴脚本实现掘金文章页面的实时聊天功能，所有代码可直接复制👇

一、Supabase 环境配置

1. ​创建数据表
   在Supabase控制台中创建 messages 表，结构如下：

   sql
   复制
   CREATE TABLE messages (
     id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
     content TEXT NOT NULL,       -- 消息内容
     created_at TIMESTAMPTZ DEFAULT NOW(),
     user_id TEXT                  -- 发送者标识（可替换为Supabase Auth用户ID）
   );
   

   • 启用Realtime：进入Supabase ​Replication 设置，为 messages 表开启 ​Insert 事件监听

2. ​配置行级安全（RLS）​
   添加RLS策略，允许匿名用户读写（根据需求调整）：

   sql
   复制
   -- 允许所有人插入新消息
   CREATE POLICY "允许匿名发送消息" ON messages 
   FOR INSERT WITH CHECK (true);
   
   -- 允许所有人读取消息
   CREATE POLICY "允许匿名读取消息" ON messages 
   FOR SELECT USING (true);
   

二、油猴脚本核心代码

scriptcat.org/scripts/cod…

关键功能解析

1. ​实时同步机制
   通过 postgres_changes 监听数据库插入事件，任何用户发送消息都会触发全局推送，实现跨浏览器/设备的实时聊天

2. ​用户标识管理
   使用 GM_setValue 持久化用户ID，确保同一设备多次访问时身份一致，避免重复生成临时ID

3. ​历史消息加载
   初始化时加载最近50条消息，倒序排列后正向渲染，保证最新消息始终在底部

4. ​输入优化

   • Enter键直接发送（Shift+Enter换行）
   • 消息框自动滚动到底部

三. ​部署与测试

1. 替换脚本中的 YOUR_SUPABASE_URL 和 YOUR_ANON_KEY。
2. 安装脚本后访问任意匹配网页（如 https://example.com）
3. 打开多个浏览器或设备，验证消息实时同步效果

此方案可在 ​10分钟内 实现一个跨站点、设备无关的实时聊天室，可实现油猴脚本数据的 ​实时跨设备同步 和 ​离线可用性，同时利用Supabase免费层（每月50MB数据库+1GB带宽）满足个人需求。