Supabase Storage 와 Realtime — 파일과 변경을 한 벌의 권한 모델로

1insert into storage.buckets (id, name, public)
2values ('avatars', 'avatars', false);

1-- 1) 누구나 읽을 수 있다 (대신 public 토글 대용)
2create policy "anyone can view avatars"
3on storage.objects for select
4using ( bucket_id = 'avatars' );
5
6-- 2) 로그인 사용자가 자기 폴더에만 업로드할 수 있다
7create policy "users can upload to their own folder"
8on storage.objects for insert
9with check (
10  bucket_id = 'avatars'
11  and (storage.foldername(name))[1] = auth.uid()::text
12);
13
14-- 3) 본인 객체만 수정·삭제
15create policy "users can manage their own objects"
16on storage.objects for update using (
17  bucket_id = 'avatars'
18  and (storage.foldername(name))[1] = auth.uid()::text
19);
20
21create policy "users can delete their own objects"
22on storage.objects for delete using (
23  bucket_id = 'avatars'
24  and (storage.foldername(name))[1] = auth.uid()::text
25);

1const { data, error } = await supabase.storage
2  .from('avatars')
3  .upload(`${userId}/profile.png`, file, {
4    cacheControl: '3600',
5    upsert: true,
6    contentType: 'image/png',
7  });

1const { data } = supabase.storage
2  .from('avatars')
3  .getPublicUrl(`${userId}/profile.png`);
4
5// data.publicUrl: https://<project>.supabase.co/storage/v1/object/public/avatars/...

1const { data, error } = await supabase.storage
2  .from('avatars')
3  .createSignedUrl(`${userId}/profile.png`, 60); // 60초 유효
4
5// data.signedUrl: https://...?token=...

1const { data } = supabase.storage
2  .from('avatars')
3  .getPublicUrl('user-1/profile.png', {
4    transform: { width: 200, height: 200, resize: 'cover', quality: 80 },
5  });

1const channel = supabase
2  .channel('comments-stream')
3  .on(
4    'postgres_changes',
5    { event: '*', schema: 'public', table: 'comments', filter: `post_id=eq.${postId}` },
6    (payload) => {
7      console.log(payload.eventType, payload.new, payload.old);
8    },
9  )
10  .subscribe();

1-- 어떤 테이블의 변경을 Realtime 으로 흘릴지 명시 (publication 에 추가)
2alter publication supabase_realtime add table comments;

1// 보내는 쪽
2const channel = supabase.channel('typing-room', { config: { broadcast: { self: false } } });
3await channel.subscribe();
4
5await channel.send({
6  type: 'broadcast',
7  event: 'typing',
8  payload: { userId: 'kim', at: Date.now() },
9});
10
11// 받는 쪽
12channel.on('broadcast', { event: 'typing' }, (payload) => {
13  console.log('typing:', payload);
14});

1const channel = supabase.channel('room-1', {
2  config: { presence: { key: userId } },
3});
4
5channel
6  .on('presence', { event: 'sync' }, () => {
7    const state = channel.presenceState();
8    console.log('online users:', Object.keys(state));
9  })
10  .on('presence', { event: 'join' }, ({ key }) => console.log(key, 'joined'))
11  .on('presence', { event: 'leave' }, ({ key }) => console.log(key, 'left'))
12  .subscribe(async (status) => {
13    if (status === 'SUBSCRIBED') {
14      await channel.track({ status: 'online', cursor: null });
15    }
16  });

1const channel = supabase.channel(`room:${roomId}`, {
2  config: { presence: { key: userId } },
3});
4
5// (1) DB 에 저장된 메시지가 추가되면 화면에 추가
6channel.on(
7  'postgres_changes',
8  { event: 'INSERT', schema: 'public', table: 'messages', filter: `room_id=eq.${roomId}` },
9  (payload) => appendMessage(payload.new),
10);
11
12// (2) 입력 중 신호는 broadcast
13channel.on('broadcast', { event: 'typing' }, ({ payload }) => showTyping(payload.userId));
14
15// (3) 접속자 목록은 presence
16channel.on('presence', { event: 'sync' }, () => {
17  setOnlineUsers(Object.keys(channel.presenceState()));
18});
19
20await channel.subscribe(async (status) => {
21  if (status === 'SUBSCRIBED') await channel.track({ joined_at: Date.now() });
22});
23
24// 메시지 보내기 — DB 에 INSERT 만 하면, postgres_changes 가 모두에게 알려준다
25await supabase.from('messages').insert({
26  room_id: roomId, author_id: userId, body: text,
27});
28
29// 입력 중 알림 — DB 거치지 않고 broadcast
30await channel.send({ type: 'broadcast', event: 'typing', payload: { userId } });