🔮 棱镜 · 即时通信

1️⃣ 注册 Supabase 并获取配置

📌 第一步：创建项目
访问 Supabase 官网，使用 GitHub 或邮箱注册。进入仪表盘后，点击 “New project” 创建一个新项目。
项目名称 可自由填写，Database Password 请务必妥善保存（后续需要用到）。创建完成后，等待数据库初始化（约 1-2 分钟）。

📌 第二步：获取 Project URL 和 anon public 密钥
在项目仪表盘的左侧菜单中，点击 Settings（设置）→ 选择 API 选项卡。
• Project URL：在 “Project URL” 一栏中复制完整的链接（例如 https://xxxxx.supabase.co）。
• anon public 密钥：在 “Project API keys” 区域，找到 anon public 那一行，点击复制图标（注意：不是 service_role 密钥，该密钥仅用于后端）。
请将这两项保存在记事本中，后续步骤会用到。

2️⃣ 输入配置，生成你的专属应用链接

将上一步获取的 Project URL 和 anon public 密钥填入下方，点击按钮即可生成可直接访问的在线应用链接（参数将自动附加到地址后）。

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

在 Supabase 仪表盘左侧菜单点击 SQL Editor，然后点击 “New query” 新建一个查询窗口。将下方完整 SQL 脚本粘贴进去，点击 “Run” 执行。该脚本会创建所有必要的表、行级安全策略、存储桶及权限。

-- ============================================================ -- 1. 核心表 -- ============================================================ 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); -- ============================================================ -- 2. 触发器：新用户自动创建资料 -- ============================================================ 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(); -- ============================================================ -- 3. 注销账户存储过程 -- ============================================================ CREATE OR REPLACE FUNCTION public.delete_user_account(user_id uuid) RETURNS void LANGUAGE plpgsql SECURITY DEFINER SET search_path = public AS $$ BEGIN DELETE FROM public.messages WHERE user_id = delete_user_account.user_id; DELETE FROM public.profiles WHERE id = delete_user_account.user_id; DELETE FROM auth.users WHERE id = delete_user_account.user_id; END; $$; -- ============================================================ -- 4. RLS 策略 -- ============================================================ ALTER TABLE public.profiles ENABLE ROW LEVEL SECURITY; ALTER TABLE public.messages ENABLE ROW LEVEL SECURITY; DROP POLICY IF EXISTS "Public profiles viewable" ON public.profiles; CREATE POLICY "Public profiles viewable" ON public.profiles FOR SELECT USING (true); DROP POLICY IF EXISTS "Anyone can view messages" ON public.messages; CREATE POLICY "Anyone can view messages" ON public.messages FOR SELECT USING (true); DROP POLICY IF EXISTS "Anyone can insert messages" ON public.messages; CREATE POLICY "Anyone can insert messages" ON public.messages FOR INSERT WITH CHECK (true); DROP POLICY IF EXISTS "Admin can update messages" ON public.messages; 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) ); DROP POLICY IF EXISTS "Admin can delete messages" ON public.messages; 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) ); -- ============================================================ -- 5. 存储桶 (media) -- ============================================================ INSERT INTO storage.buckets (id, name, public) VALUES ('media', 'media', true) ON CONFLICT (id) DO NOTHING; DROP POLICY IF EXISTS "Public read media" ON storage.objects; DROP POLICY IF EXISTS "Authenticated upload media" ON storage.objects; DROP POLICY IF EXISTS "Authenticated update media" ON storage.objects; DROP POLICY IF EXISTS "Admin delete media" ON storage.objects; CREATE POLICY "Public read media" ON storage.objects FOR SELECT USING (bucket_id = 'media' AND true); CREATE POLICY "Authenticated upload media" ON storage.objects FOR INSERT WITH CHECK (bucket_id = 'media' AND auth.role() = 'authenticated'); CREATE POLICY "Authenticated update media" ON storage.objects FOR UPDATE USING (bucket_id = 'media' AND auth.role() = 'authenticated') 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 ) ); 📋 复制 SQL

执行完毕后，数据库即准备就绪。若执行过程中出现 “already exists” 提示，可忽略（说明对象已存在）。

4️⃣ 部署应用

选择以下任一方式部署你的应用：

• 方式一（推荐）：直接使用生成的链接
  即步骤2生成的链接（如 https://my.xiguacity.cn/study/.../example.html?supabaseUrl=...&supabaseKey=...），复制后在浏览器中打开即可立即使用，无需任何额外部署。
• 方式二：部署到静态托管平台（适合自定义域名、更高稳定性）
  下载源码 index.html（已内置示例配置，或可自行修改），将其部署到以下免费平台，获取专属域名：
  • Cloudflare Pages – 支持 Git 仓库或直接上传文件夹，自动 HTTPS，全球 CDN 加速。
  • Netlify – 拖拽上传或连接 Git，自动构建，可配置重定向。
  • Vercel – 同样支持静态站点，极速部署，与 GitHub 集成方便。
  部署后，你的应用即可通过平台提供的域名访问，所有消息数据均与你的 Supabase 项目实时同步。

提示：如需手动修改配置，打开下载的 index.html，替换 SUPABASE_URL 和 SUPABASE_ANON_KEY（位于脚本开头），保存后上传即可。

5️⃣ 校验部署

部署完成后，请进行以下测试，确保所有功能正常运行：

• 注册与登录 – 点击 “登录” 尝试注册一个新账号（若遇到 “Email not confirmed” 错误，请参考下方常见问题解决）。登录后应能看到用户名显示在右上角。
• 发送消息 – 在输入框中输入文字，点击发送，消息应立即出现在列表顶部（无需刷新）。
• 发送媒体 – 点击 📎 按钮，选择图片或录音，上传并发送，应能正常显示预览。
• 实时性 – 打开两个浏览器窗口（或使用不同设备），分别登录不同账号，互相发送消息，验证实时同步是否正常。
• 在线状态 – 观察顶部的在线人数圆点，当有人登录或退出时，状态应实时更新。
• 管理员权限 – 若你已将自己的账号设为管理员（修改 profiles.is_admin = true），消息卡片应出现 “编辑” 和 “删除” 按钮。

如果以上测试全部通过，说明部署成功！🎉

❓ 常见问题