Hướng dẫn realtime websocket supabase
· Tác giả: Trường — Founder Webchốt
Một đơn đặt hàng nhảy vào dashboard trong khi CSKH đang gọi điện xác nhận — hai người xử lý cùng một ID và khách nhận hai SMS khác nhau. Nguyên nhân hay gặp không phải “thiếu tính năng chat” mà là UI chỉ đọc REST một lần rồi để đó. Hướng dẫn realtime websocket supabase dưới đây nhằm đưa luồng dữ liệu Postgres ra trình duyệt đồng bộ, có kiểm soát policy và tái kết nối khi Wi‑Fi chập chờn. Supabase không phải framework miracle — nhưng khi bạn hiểu channel, filter và giới hạn payload, production ít drama hơn rất nhiều so với việc tự dựng socket server và tự viết replay message. Webchốt thường gắn Realtime vào Next.js sau khi đã cố định schema và RLS; nếu bạn đang mơ hồ giữa broadcast và postgres_changes, đọc tiếp các phần so sánh và bảng tiêu chí để chọn đúng “đường ray” trước khi refactor UI.
Dashboard đa metric — realtime chỉ có giá trị khi người vận hành tin vào độ trễ hiển thị | Nguồn: webchot.com
Supabase realtime và vai trò của websocket trong kiến trúc
Supabase Realtime là lớp đẩy sự kiện lên client qua WebSocket, được SDK bọc thành khái niệm channel. Khi bạn gọi `channel.subscribe()`, client mở một phiên và đăng ký listener — heartbeat giữ phiên sống và SDK có cơ chế reconnect khi tab ngủ hoặc mạng đổi AP. Không giống SSE chỉ một chiều server→client, channel có thể nhận và phát tin trong cùng namespace — phù hợp presence và typing indicator.
Điểm then chốt: realtime không thay thế transaction Postgres; nó chỉ phản chiếu trạng thái đã commit. Do đó race condition “hai người sửa một row” vẫn cần optimistic locking hoặc rule nghiệp vụ — realtime chỉ giúp mọi người nhìn thấy kết quả sau commit gần như ngay lập tức. Đọc thêm Realtime docs Supabase và đối chiếu với roadmap Next.js phía client trong Next.js docs.
postgres_changes so với broadcast: khi nào dùng cái nào
`postgres_changes` hữu ích khi nguồn chân lý là bảng SQL: đơn hàng, vé, booking slot, trạng thái thanh toán. Bạn khai báo schema, sự kiện và filter (ví dụ theo `tenant_id`) — mỗi thay đổi đi qua pipeline Realtime và tới subscriber đủ điều kiện policy. Broadcast phù hợp payload nhỏ không cần lưu bảng: “ai đó vừa share màn hình”, “moderator mute room”, “thông báo bảo trì trong 30s”. Presence thêm metadata ai đang trong phòng — hữu ích cho whiteboard hoặc demo sales.
- Đúng bảng, cần audit trail: ưu tiên ghi DB rồi phát `postgres_changes`.
- Tin tức thời mang tính hiệu ứng UI: broadcast để khỏi ghi spam vào Postgres.
- Cộng tác đa người: presence + broadcast, còn dữ liệu nặng vẫn fetch qua REST/RPC có cache.
- Multi-tenant: policy RLS phải gắn chặt tenant; test bằng hai JWT khác tenant trên cùng filter.
Hạ tầng edge + Postgres — realtime là lớp “tia” chứ không phải lưu trữ chính | Nguồn: webchot.com
Bảng chọn chiến lược realtime (tham khảo triển khai)
Bảng dưới đây giúp team sản phẩm và dev cùng ngôn ngữ trước khi estimate. Số giờ là quy ước nội bộ Webchốt khi codebase Next.js đã có auth; dự án xanh sẽ cộng thêm setup CI và staging.
| Tiêu chí | Chỉ REST refetch | postgres_changes | Khuyên dùng |
|---|---|---|---|
| Độ phức tạp vận hành | Thấp — nhưng polling tốn plan | Trung bình — cần RLS + monitor | postgres_changes khi có nhiều viewer cùng bảng |
| Độ trễ cảm nhận | 1–5s tùy interval | <300ms trong điều kiện tốt | postgres_changes cho desk vận hành |
| Chi phí egress | HTTP lặp lại | Một socket, nhiều sự kiện | Giảm spam request nếu viewer >20 |
| Khi nào tránh | Bảng cực lớn refresh full | Policy lỏng hoặc thiếu index | Sửa RLS/index trước khi public |
Sau khi chốt chiến lược, map lại bảng giá Webchốt với phạm vi audit policy và logging — khách thường đánh giá thấp phần RLS cho tới khi staging lộ hở tenant. Xem trước template Next.js để hiểu skeleton component mà team bàn giao.
Quy trình tích hợp Next.js App Router với Supabase Realtime
- Khởi tạo client phía browser: singleton `createBrowserClient`, tách biệt service role chỉ chạy server action.
- Xác định channel name theo tenant: `order:${tenantId}` thay vì một channel chung để giảm noise.
- Đăng ký postgres_changes: chỉ định schema, table, event `INSERT|UPDATE|DELETE` và filter hợp lệ.
- Sync state UI: merge event vào React state hoặc cache; debounce khi burst update lớn.
- Cleanup: `removeChannel` khi route unmount; tránh duplicate listener khi StrictMode dev.
Trên production, bật logging reconnect và alert nếu tỉ lệ reconnect >5% phiên — thường do policy lỗi hoặc token hết hạn im lặng. Với dashboard nội bộ, cân nhắc fallback “nút làm mới” cho lúc socket chết hoàn toàn. Công cụ miễn phí trong hub platform tools vẫn hữu ích cho tài chính/nhân sự song song — realtime không loại trừ nhu cầu CSV hay VAT.
Khối client code cần gọn — càng ít side effect trong render càng dễ debug socket | Nguồn: webchot.com
Chi phí ẩn, bảo mật và gói phù hợp khi làm cùng Webchốt
Realtime làm lộ các chỗ team hay “để sau”: index thiếu trên cột filter, policy copy‑paste giữa staging và prod, hoặc payload JSON quá lớn làm mobile đơ. Khi billing Supabase phụ thuộc vào peak connection, việc giữ channel lifecycle chặt giúp tiền đứng im — một listener zombie có thể nhân với số tab mở của nhân viên vận hành.
Nếu bạn đọc hướng dẫn realtime websocket supabase này để tự làm MVP, vẫn nên có checkpoint policy trước public: hai role viewer/editor, tenant isolation, và khóa DELETE nếu không cần xóa cứng. Khi muốn rút ngắn đường cong, trang dịch vụ Webchốt liệt kê các gói triển khai Next.js có kiểm thử staging và checklist go‑live — phù hợp team không muốn tự ôm hạ tầng socket lúc đang chạy ads.
Sai lầm phổ biến khi bật Realtime lần đầu
Nhiều team bật replication slot mà quên giới hạn retention WAL — staging đầy disk và Postgres ngừng ghi; đây là kiểu incident không liên quan code nhưng giết timeline.
- Subscribe trong Server Component: không có lifecycle socket — refactor sang client boundary.
- Policy SELECT quá rộng: realtime đẩy toàn bộ row nhạy cảm cho mọi user trong tenant sai.
- Không dedupe event: burst INSERT làm UI nhấp nháy — merge theo primary key.
- Bỏ qua backoff reconnect: spam reconnect làm ban IP edge — giữ exponential backoff nhẹ.
Kết hợp guideline performance của Core Web Vitals để realtime không làm INP phình — ví dụ đừng rerender toàn bộ bảng khi chỉ một cell đổi.
Workshop nhỏ giúp đồng bộ dev–product–CSKH trước khi public realtime | Nguồn: webchot.com
FAQ — hướng dẫn realtime websocket supabase
Supabase Realtime có phải WebSocket thuần không?
Phần lớn luồng Realtime của Supabase dùng WebSocket để duy trì kênh hai chiều giữa client và edge. Bạn không tự viết frame thủ công; SDK `@supabase/supabase-js` bọc subscribe, heartbeat và tái kết nối. Trên Next.js App Router hãy đặt subscribe trong Client Component và cleanup channel khi unmount để tránh rò listener — StrictMode trong dev có thể gọi effect hai lần nên pattern singleton channel phải idempotent.
postgres_changes khác broadcast và presence ra sao?
`postgres_changes` bám WAL Postgres và đẩy INSERT/UPDATE/DELETE đã commit — thích hợp đồng bộ trạng thái nghiệp vụ có audit. Broadcast mang payload tuỳ ý không nhất thiết ghi DB — tiện cho hiệu ứng UX nhẹ. Presence lưu metadata ai đang trong room để hiển thị avatar hoặc cursor; ba mode có thể đứng song song trong một channel nhưng phải giữ payload nhỏ để không làm đơ mobile.
RLS có chặn hoặc lộ dữ liệu realtime không?
RLS áp cho cả đường đọc realtime: client chỉ nhận row policy cho phép. Policy quên index trên cột filter có thể làm CPU Postgres tăng khi burst event. Test với hai JWT khác tenant trên cùng filter; log cả phía Supabase và app để phát hiện claim thiếu `role` hoặc `tenant_id`. Đừng dùng service key ở browser — một lần lọt là toàn bộ tenant lộ.
App Router should place subscribe ở đâu cho an toàn?
Đặt trong client leaf gần UI cần data, hoặc một provider context chuyên subscription. Server Components vẫn fetch initial data qua REST/RPC; sau đó client layer merge delta realtime. Pattern này giữ SEO và TTFB tốt hơn so với hydrate toàn trang chỉ để mở socket. Nếu cần SSR auth, forward session cookie an toàn và chỉ expose anon key đã giới hạn.
Webchốt có thể đảm nhận phần hardening không?
Có — phạm vi thường gồm review policy, giới hạn payload, dashboard monitor reconnect và tài liệu bàn giao. Liên hệ 0905 151 701 hoặc hi@webchot.com kèm mô tả bảng nhạy cảm và số concurrent user mục tiêu; team sẽ đề xuất lộ trình staging trước khi mở realtime cho khách cuối.
Liên hệ Webchốt
Bài hướng dẫn realtime websocket supabase này cố ý nhấn policy và lifecycle channel vì đó là nơi dự án trượt ngã — không phải ở đoạn copy mã mẫu. Nếu bạn đã có Next.js nhưng realtime vẫn “đôi khi có đôi khi không”, khả năng cao là token, RLS hoặc duplicate listener chứ không phải Supabase “hư”. Webchốt có thể vào vai audit ngắn hoặc triển khai trọn gói tùy timeline. Gửi link repo (hoặc mô tả schema) để nhận checklist trước khi cam kết ngày go‑live.
- Hotline / Zalo: 0905 151 701 — gặp anh Trường (founder/dev).
- Chat Zalo: zalo.me/0905151701 — phản hồi nhanh.
- Email: hi@webchot.com — phản hồi <12h làm việc.
- Studio: 262/1/93 Phan Anh, Phường Phú Thạnh, TP.HCM (T2–T7, 9h–18h).
Tham khảo thêm: 17 template Next.js · 10 dịch vụ web chuyên sâu · bảng giá Webchốt 2026 · 12 công cụ kế toán/tài chính miễn phí.
Reference: Next.js docs · web.dev Core Web Vitals · Supabase Realtime.
