supabase 实现聊天板（Chat Board）

1) 初始化数据库（在 Studio 中运行 SQL）

在 Studio -> SQL 编辑器中执行 dev/data.sql 里新增的聊天表与策略，或复制如下片段：

sql 复制代码

-- Messages 表和策略（已包含在 dev/data.sql）
create table if not exists public.messages (
  id bigserial primary key,
  room text not null default 'public',
  username text not null default '匿名',
  content text not null check (char_length(content) > 0),
  created_at timestamptz not null default now()
);

alter table public.messages enable row level security;

drop policy if exists "Anyone can read messages" on public.messages;
create policy "Anyone can read messages"
  on public.messages for select using (true);

drop policy if exists "Anyone can send messages" on public.messages;
create policy "Anyone can send messages"
  on public.messages for insert with check (true);

drop policy if exists "Admins can update messages" on public.messages;
create policy "Admins can update messages"
  on public.messages for update to service_role using (true);

drop policy if exists "Admins can delete messages" on public.messages;
create policy "Admins can delete messages"
  on public.messages for delete to service_role using (true);

alter publication supabase_realtime add table public.messages;

2) 快速测试（REST + Realtime）

环境变量设置

bash 复制代码

$env:ANON_KEY = ""
$env:KONG_HTTP_PORT = "8000"

拉取最近消息：

bash 复制代码

curl.exe -H "apikey: $env:ANON_KEY" -H "Authorization: Bearer $env:ANON_KEY" "http://localhost:$env:KONG_HTTP_PORT/rest/v1/messages?select=*&order=created_at.desc&limit=50"

发送消息：

bash 复制代码

  curl.exe -X POST `
  -H "Content-Type: application/json" `
  -H "apikey: $env:ANON_KEY" `
  -H "Authorization: Bearer $env:ANON_KEY" `
  -d '{\"room\":\"public\",\"username\":\"张三\",\"content\":\"大家好！\"}' `
  "http://localhost:$($env:KONG_HTTP_PORT)/rest/v1/messages"

3) 最小前端片段（可直接嵌入）

将下列 HTML 保存为 chat.html 并在浏览器中打开（注意将 SUPABASE_URL 与 ANON_KEY 替换成你的值）：

html 复制代码

<!doctype html>
<meta charset="utf-8" />
<title>Chat Board</title>
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<style>
  body { font-family: sans-serif; max-width: 720px; margin: 24px auto; }
  #messages { border: 1px solid #ddd; padding: 12px; height: 360px; overflow: auto; }
  #form { display: flex; gap: 8px; margin-top: 12px; }
  input, button { padding: 8px; }
  .row { margin: 6px 0; }
  .time { color: #888; font-size: 12px; margin-left: 8px; }
  .user { font-weight: bold; }
  .content { margin-left: 6px; }
  header { display: flex; justify-content: space-between; align-items: center; }
  select { padding: 4px; }
</style>
<header>
  <h1>Chat Board</h1>
  <label>Room:
    <select id="room">
      <option value="public">public</option>
      <option value="random">random</option>
    </select>
  </label>
  <label>User: <input id="username" value="匿名" /></label>
</header>
<div id="messages"></div>
<div id="form">
  <input id="input" placeholder="输入消息..." />
  <button id="send">发送</button>
  <button id="refresh">刷新</button>
  <button id="clear">清屏</button>
  <span id="status"></span>
  </div>
<script>
  const SUPABASE_URL = 'http://localhost:8000';
  const ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyAgCiAgICAicm9sZSI6ICJhbm9uIiwKICAgICJpc3MiOiAic3VwYWJhc2UtZGVtbyIsCiAgICAiaWF0IjogMTY0MTc2OTIwMCwKICAgICJleHAiOiAxNzk5NTM1NjAwCn0.dc_X5iR_VP_qT0zsiyj_I_OZ2T9FtRU2BBNWN8Bu4GE';
  const sb = supabase.createClient(SUPABASE_URL, ANON_KEY);

  const $ = (id) => document.getElementById(id);
  const box = $('messages');
  const roomSel = $('room');
  const usernameInput = $('username');
  const status = $('status');
  let channel;

  const isAscii = (s) => /^[\x00-\x7F]+$/.test(s);
  function validateConfig() {
    if (!SUPABASE_URL || !ANON_KEY) {
      status.textContent = '配置缺失：请设置 SUPABASE_URL 和 ANON_KEY';
      return false;
    }
    if (!isAscii(ANON_KEY) || /替换为/.test(ANON_KEY)) {
      status.textContent = '配置错误：请替换为实际 ANON_KEY（ASCII）';
      alert('请将 ANON_KEY 替换为实际匿名密钥字符串（ASCII），否则请求会失败。');
      return false;
    }
    return true;
  }

  function row({ username, content, created_at }) {
    const div = document.createElement('div');
    div.className = 'row';
    const time = new Date(created_at).toLocaleString();
    div.innerHTML = `<span class="user">${username}</span><span class="content">${content}</span><span class="time">${time}</span>`;
    return div;
  }

  async function list() {
    status.textContent = '加载中...';
    const { data, error } = await sb
      .from('messages')
      .select('*')
      .eq('room', roomSel.value)
      .order('created_at', { descending: false })
      .limit(200);
    status.textContent = error ? '加载失败' : `加载 ${data?.length ?? 0} 条`;
    box.innerHTML = '';
    (data || []).forEach(m => box.appendChild(row(m)));
    box.scrollTop = box.scrollHeight;
  }

  async function send() {
    const content = $('input').value.trim();
    if (!content) return;
    const username = usernameInput.value.trim() || '匿名';
    const { error } = await sb.from('messages').insert({ room: roomSel.value, username, content });
    if (error) alert('发送失败: ' + error.message);
    $('input').value = '';
  }

  function subscribe() {
    if (channel) sb.removeChannel(channel);
    channel = sb.channel(`room:${roomSel.value}`)
      .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'messages', filter: `room=eq.${roomSel.value}` }, payload => {
        box.appendChild(row(payload.new));
        box.scrollTop = box.scrollHeight;
      })
      .subscribe((status) => console.log('subscribe', status));
  }

  $('send').onclick = send;
  $('refresh').onclick = list;
  $('clear').onclick = () => (box.innerHTML = '');
  roomSel.onchange = () => { list(); subscribe(); };

  (async () => { if (!validateConfig()) return; await list(); subscribe(); })();
  </script>