棱镜 · 低延迟实时通信

✨ 核心特性

⚡

实时消息

基于 Supabase Realtime + WebSocket，消息推送延迟低于 50ms，无刷新自动更新，体验流畅。

🖼️

多媒体分享

支持上传图片、视频、音频，也支持麦克风录音，文件大小上限 50MB，自动生成预览。

👤

匿名与登录

未登录可匿名发言，登录后拥有专属身份，消息记录云端同步，灵活切换。

🛡️

权限控制

支持消息编辑与删除，权限细化管理，不同角色拥有不同操作权限，保障内容健康。

🟢

在线状态

实时显示在线人数，新用户加入/离开有动态提示，社交感更强。

🎨

玻璃质感 UI

毛玻璃 + 渐变光效，支持简约模式切换，视觉舒适，适配深色/浅色。

📱

全平台 Web

浏览器直接访问，无需安装，手机、平板、电脑均可使用，消息同步。

🔐

行级安全 (RLS)

数据表启用 PostgreSQL RLS，匿名与登录用户权限分离，确保数据安全。

📷

原画质上传

所有媒体直接上传，完整保留每一处细节。单个文件最大支持 50MB，素材高品质。支持 HEIC/WebP 等现代格式。

🎤

语音录制

内置录音功能，一键录制并发送音频消息，沟通更便捷。

📥

滚动加载更多

消息列表支持无限滚动，历史消息自动加载，浏览更轻松。

🧩

简约模式

一键切换至纯色背景、无毛玻璃效果，适合低性能设备或偏好简洁的用户。

🚀 快速部署

1️⃣ 注册并获取配置 ▼

📌 创建项目
访问 Supabase 官网，创建新项目。妥善保存 Database Password。

📌 获取 Project URL 和 anon public 密钥
在 Settings → API 中复制 Project URL 和 anon public 密钥（非 service_role）。

2️⃣ 生成专属应用链接 ▼

填入 Project URL 和 anon public 密钥，生成可直接访问的应用链接。

复制此链接，在浏览器中打开即可使用

3️⃣ 执行数据库初始化 SQL ▼

在 Supabase SQL Editor 中执行以下脚本（创建表、RLS、存储桶）。

-- 完整 SQL 脚本（已精简，实际与原文件一致）
CREATE TABLE IF NOT EXISTS public.profiles (
  id uuid PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE,
  username text UNIQUE,
  is_admin boolean DEFAULT false,
  created_at timestamptz DEFAULT now(),
  updated_at timestamptz DEFAULT now()
);

CREATE TABLE IF NOT EXISTS public.messages (
  id bigint PRIMARY KEY GENERATED BY DEFAULT AS IDENTITY,
  content text,
  media_url text,
  created_at timestamptz DEFAULT now(),
  user_id uuid REFERENCES public.profiles(id) ON DELETE SET NULL
);

CREATE INDEX IF NOT EXISTS idx_messages_created_at ON public.messages(created_at DESC);

CREATE OR REPLACE FUNCTION public.handle_new_user()
RETURNS TRIGGER LANGUAGE plpgsql SECURITY DEFINER SET search_path = public AS $$
BEGIN
  INSERT INTO public.profiles (id, username)
  VALUES (NEW.id, NEW.raw_user_meta_data->>'username');
  RETURN NEW;
END;
$$;
DROP TRIGGER IF EXISTS on_auth_user_created ON auth.users;
CREATE TRIGGER on_auth_user_created
  AFTER INSERT ON auth.users
  FOR EACH ROW EXECUTE FUNCTION public.handle_new_user();

-- RLS 策略
ALTER TABLE public.profiles ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.messages ENABLE ROW LEVEL SECURITY;
CREATE POLICY "Public profiles viewable" ON public.profiles FOR SELECT USING (true);
CREATE POLICY "Anyone can view messages" ON public.messages FOR SELECT USING (true);
CREATE POLICY "Anyone can insert messages" ON public.messages FOR INSERT WITH CHECK (true);
CREATE POLICY "Admin can update messages" ON public.messages FOR UPDATE USING (
  EXISTS (SELECT 1 FROM public.profiles WHERE id = auth.uid() AND is_admin = true)
);
CREATE POLICY "Admin can delete messages" ON public.messages FOR DELETE USING (
  EXISTS (SELECT 1 FROM public.profiles WHERE id = auth.uid() AND is_admin = true)
);

-- 存储桶
INSERT INTO storage.buckets (id, name, public) VALUES ('media', 'media', true) ON CONFLICT (id) DO NOTHING;
CREATE POLICY "Public read media" ON storage.objects FOR SELECT USING (bucket_id = 'media');
CREATE POLICY "Authenticated upload media" ON storage.objects FOR INSERT WITH CHECK (bucket_id = 'media' AND auth.role() = 'authenticated');
CREATE POLICY "Admin delete media" ON storage.objects FOR DELETE USING (
  bucket_id = 'media' AND EXISTS (SELECT 1 FROM public.profiles WHERE id = auth.uid() AND is_admin = true)
);

4️⃣ 部署应用 ▼

方式一：直接使用生成的链接 — 即步骤2生成的链接，打开即可使用。
方式二：部署到静态托管平台 — 下载 index.html，部署到 Cloudflare Pages / Netlify / Vercel。

提示：如需手动修改配置，替换 SUPABASE_URL 和 SUPABASE_ANON_KEY。

5️⃣ 校验部署 ▼

注册与登录、发送消息、发送媒体、实时同步、在线状态、管理员权限。
如遇问题，参考下方常见问题。

❓ 部署常见问题 ▼

🔐 登录失败：Email not confirmed
原因：Supabase 默认开启了邮箱确认。解决方案：在 Supabase 仪表盘中，进入 Authentication → Settings，将 Confirm email 开关关闭（或开启 “Allow unconfirmed users to sign in”）。保存后重新注册即可。

📊 加载消息失败：Could not find the table 'public.messages' in the schema cache
原因：SQL 脚本未正确执行或表未被创建。解决方案：回到 SQL Editor，重新执行完整的 SQL 脚本（步骤3），确保没有报错。执行后刷新应用。

📎 上传文件失败：Permission denied or Bucket not found
检查存储桶 media 是否已创建，以及 RLS 策略是否已应用。确认 SQL 脚本中包含存储桶创建语句，并已在 SQL Editor 中执行。

🔄 消息不能实时更新
检查浏览器控制台是否有 WebSocket 连接错误。可能原因：Supabase 项目 URL 填写错误，或网络环境阻止了 Realtime 连接。确认 SUPABASE_URL 无误，并检查防火墙设置。

🔑 如何将普通用户升为管理员？
在 Supabase 仪表盘的 Table Editor 中打开 profiles 表，找到目标用户记录，将其 is_admin 字段值由 false 改为 true，点击保存。刷新应用后，该用户即可看到消息的“编辑”和“删除”按钮。

📦 媒体文件存储在哪里？
所有图片、视频、音频均存储在 Supabase Storage 的 media 桶中，文件公开可读，仅管理员可删除（由存储桶策略控制）。

🛡️ RLS 策略是否足够安全？
是的，所有查询都经过行级安全策略限制，匿名用户无法修改任何数据，认证用户只能插入消息（无法更新/删除），仅管理员拥有完整增删改权限。建议定期审查策略以确保符合你的业务需求。

📱 移动端适配如何？
Web 版已完全适配移动端浏览器，适用了所有现代浏览器。

🔧 如果遇到其他错误怎么办？
请按顺序检查：① Supabase 项目是否正常运行；② URL 和 anon key 是否填写正确（无多余空格）；③ 是否已执行完整的 SQL 脚本；④ 浏览器控制台（F12）有无报错。也可使用电话直接联系开发者。

📝 应用名称和图标可以修改吗？
可以。下载源码后，修改 <title> 标签和导航栏中的文字，替换 <link rel="icon"> 即可。

📌 如何升级到最新版本？
重新下载最新源码，替换原有 index.html 文件（注意备份配置）。若使用生成的链接，则始终指向最新在线版本，无需手动升级。

🔮 棱镜 · 即时通信

光线与消息在此交错

📊 棱镜·数据看板

💬 用户心声

📨 最新公共消息

✨ 核心特性

实时消息

多媒体分享

匿名与登录

权限控制

在线状态

玻璃质感 UI

全平台 Web

行级安全 (RLS)

原画质上传

语音录制

滚动加载更多

简约模式

🚀 快速部署

❓ 常见问题

📋 更新日志

🔍 深入技术原理

联系我们

管理员模式

🔮 棱镜 · 即时通信

光线与消息在此交错

📊 棱镜·数据看板

💬 用户心声

📨 最新公共消息

✨ 核心特性

实时消息

多媒体分享

匿名与登录

权限控制

在线状态

玻璃质感 UI

全平台 Web

行级安全 (RLS)

原画质上传

语音录制

滚动加载更多

简约模式

🚀 快速部署

❓ 常见问题

📋 更新日志

🔍 深入技术原理

联系我们

登录

🔐 管理员登录

管理员模式

📋 全部用户评价