Home›Supabase in 5 Days›Day 5
Day 5 of 5
⏱ ~60 minutes
Supabase in 5 Days — Day 5

Realtime

Subscribe to database changes with Supabase Realtime, build a live chat, and understand broadcast and presence.

Supabase Realtime

Supabase wraps PostgreSQL's logical replication into a WebSocket API. Changes to any table can broadcast to subscribed clients instantly.

Subscribe to database changes
import { supabase } from './supabase';

// Listen to all inserts in 'messages' table
const channel = supabase
  .channel('public:messages')
  .on(
    'postgres_changes',
    { event: 'INSERT', schema: 'public', table: 'messages' },
    (payload) => {
      console.log('New message:', payload.new);
      setMessages(prev => [...prev, payload.new]);
    }
  )
  .subscribe();

// Cleanup on unmount
return () => supabase.removeChannel(channel);
Broadcast (custom events between clients)
// Send
await supabase.channel('room:123').send({
  type: 'broadcast',
  event: 'user_typing',
  payload: { userId: user.id, name: user.name }
});

// Receive
supabase.channel('room:123')
  .on('broadcast', { event: 'user_typing' }, ({ payload }) => {
    setTypingUsers(prev => [...prev, payload.name]);
  })
  .subscribe();
Presence (who is online)
const channel = supabase.channel('room:123');

channel
  .on('presence', { event: 'sync' }, () => {
    const state = channel.presenceState();
    console.log('Online users:', Object.values(state));
  })
  .subscribe(async (status) => {
    if (status === 'SUBSCRIBED') {
      await channel.track({ userId: user.id, name: user.name });
    }
  });
📝 Day 5 Exercise
Build a Live Chat Room
  1. C
  2. r
  3. e
  4. a
  5. t
  6. e
  8. a
  10. m
  11. e
  12. s
  13. s
  14. a
  15. g
  16. e
  17. s
  19. t
  20. a
  21. b
  22. l
  23. e
  24. .
  26. B
  27. u
  28. i
  29. l
  30. d
  32. a
  34. c
  35. h
  36. a
  37. t
  39. U
  40. I
  42. t
  43. h
  44. a
  45. t
  47. s
  48. e
  49. n
  50. d
  51. s
  53. m
  54. e
  55. s
  56. s
  57. a
  58. g
  59. e
  60. s
  62. t
  63. o
  65. t
  66. h
  67. e
  69. t
  70. a
  71. b
  72. l
  73. e
  75. a
  76. n
  77. d
  79. s
  80. u
  81. b
  82. s
  83. c
  84. r
  85. i
  86. b
  87. e
  88. s
  90. t
  91. o
  93. n
  94. e
  95. w
  97. i
  98. n
  99. s
  100. e
  101. r
  102. t
  103. s
  105. w
  106. i
  107. t
  108. h
  110. R
  111. e
  112. a
  113. l
  114. t
  115. i
  116. m
  117. e
  118. .
  120. A
  121. d
  122. d
  124. a
  126. t
  127. y
  128. p
  129. i
  130. n
  131. g
  133. i
  134. n
  135. d
  136. i
  137. c
  138. a
  139. t
  140. o
  141. r
  143. u
  144. s
  145. i
  146. n
  147. g
  149. B
  150. r
  151. o
  152. a
  153. d
  154. c
  155. a
  156. s
  157. t
  158. .
  160. S
  161. h
  162. o
  163. w
  165. w
  166. h
  167. o
  168. '
  169. s
  171. o
  172. n
  173. l
  174. i
  175. n
  176. e
  178. w
  179. i
  180. t
  181. h
  183. P
  184. r
  185. e
  186. s
  187. e
  188. n
  189. c
  190. e
  191. .

Day 5 Summary

  • postgres_changes subscription fires when rows are inserted, updated, or deleted.
  • Broadcast sends custom events between clients in a channel — no database write needed.
  • Presence syncs who is connected to a channel — ideal for online/offline indicators.
  • Always remove channels on component unmount to prevent memory leaks.
→
← Previous
Day 4: Edge Functions
Course Complete
Back to Supabase in 5 Days
→
Finished this lesson?