วิธีตั้งค่าและใช้ Supabase Realtime สร้างแอปพลิเคชันเว็บแบบเรียลไทม์อย่างปลอดภัย

ภาพรวม — Overview

Supabase Realtime ให้คุณสร้างแอปเว็บที่อัปเดตข้อมูลแบบทันทีโดยไม่ต้องรีเฟรชหน้าเว็บ บริการนี้ทำงานบน WebSocket และผสานกับ PostgreSQL อย่างลึกซึ้ง การตั้งค่าอย่างถูกต้องจะช่วยให้ระบบปลอดภัยและรองรับผู้ใช้จำนวนมาก

• Realtime ทำหน้าที่ส่งข้อมูลเปลี่ยนแปลงจากฐานข้อมูลไปยังไคลเอนต์แบบเรียลไทม์
• Supabase มี **Row‑Level Security (RLS) เพื่อควบคุมสิทธิการอ่าน/เขียนของแต่ละผู้ใช้
• การผสานกับ Supabase Auth ทำให้คุณจัดการผู้ใช้และ token ได้อย่างง่ายดาย

**Tip: เริ่มต้นด้วยโครงการทดลองบนแผนฟรีเพื่อทดสอบฟีเจอร์ก่อนย้ายไปใช้งานจริง

ความต้องการเบื้องต้น — Prerequisites

ก่อนลงมือทำให้ตรวจสอบว่าคุณมีสิ่งต่อไปนี้พร้อมแล้ว

• บัญชี Supabase (สมัครที่ https://supabase.com)
• Node.js เวอร์ชัน 14 ขึ้นไป หรือ Framework เว็บที่รองรับ JavaScript/TypeScript
• ความรู้พื้นฐานเกี่ยวกับ SQL และ HTTP API

• เครื่องมือพัฒนาอย่าง VS Code หรือ IDE ที่คุณถนัด

**Tip: หากใช้ React ให้ติดตั้ง `@supabase/supabase-js` เวอร์ชันล่าสุดเพื่อเข้าถึงฟีเจอร์ใหม่ ๆ อย่างเต็มที่

สร้างโปรเจกต์ Supabase — Create Project

การสร้างโปรเจกต์เป็นขั้นตอนแรกที่สำคัญที่สุด

• เข้าสู่ Dashboard ของ Supabase แล้วคลิก “New project”
• กำหนดชื่อฐานข้อมูล, รหัสผ่านผู้ดูแล (ควรใช้ password ที่ซับซ้อน) และเลือก region ใกล้กับผู้ใช้เป้าหมาย
• หลังจากสร้างเสร็จ ระบบจะให้ API URL และ anon public key ซึ่งต้องบันทึกไว้

**Warning: อย่าเผย `service_role` key ไปยังโค้ดฝั่งลูกค้า มิฉะนั้นระบบอาจถูกโจมตีได้ง่าย

เปิดใช้งาน Realtime — Enable Realtime

Supabase มี Realtime ปิดอยู่เป็นค่าเริ่มต้นในบางตาราง

• เข้าไปที่ “Database Replication” แล้วเปิดสวิตช์ Realtime สำหรับฐานข้อมูลทั้งหมดหรือเฉพาะตารางที่ต้องการ
• ตรวจสอบว่า RLS ถูกเปิดบนตารางนั้น ๆ (จะเห็น checkbox ในหน้า “Table editor”)

• หากต้องการฟิลเตอร์ข้อมูลเพิ่มเติม ให้ตั้งค่า Replication filters เช่น `INSERT, UPDATE` เฉพาะคอลัมน์ที่สำคัญ

**Tip: เปิด Realtime เฉพาะตารางที่จำเป็น จะลดโหลดบนเซิร์ฟเวอร์และเพิ่มความปลอดภัย

เชื่อมต่อจาก Frontend — Connect from Frontend

ใช้ไลบรารี `@supabase/supabase-js` เพื่อเชื่อมต่อ WebSocket

```js import { createClient } from '@supabase/supabase-js'

const supabase = createClient( 'https://YOUR-PROJECT.supabase.co', 'YOUR-ANON-PUBLIC-KEY' )

// Subscribe to changes ของตาราง messages supabase.channel('public:messages') .on('postgres_changes', { event: '*', schema: 'public', table: 'messages' }, payload => { console.log('เปลี่ยนแปลง:', payload) // อัปเดต UI ตาม payload ใหม่ }) .subscribe() ```

• ใช้ `.channel()` เพื่อกำหนดชื่อช่องและตั้งค่า filter (เช่น `INSERT` เท่านั้น)
• อย่าลืมจัดการ unsubscribe เมื่อคอมโพเนนต์ถูกทำลายเพื่อป้องกัน memory leak

**Tip: เก็บอ็อบเจ็กต์ Supabase เป็น singleton เพื่อหลีกเลี่ยงการสร้างหลาย connection

ปรับความปลอดภัยด้วย RLS — Secure with Row‑Level Security

RLS คือตัวกรองระดับแถวที่ทำงานบน PostgreSQL

• เปิด RLS บนตารางเป้าหมาย (เช่น `messages`)
• สร้าง policy เพื่อจำกัดการเข้าถึงตามผู้ใช้

```sql -- อนุญาตให้ผู้ใช้ดูเฉพาะข้อความของตัวเอง create policy "Owner can select" on public.messages for select using (auth.uid() = user_id); ```

• เพิ่ม policy สำหรับ `INSERT` และ `UPDATE` เพื่อบังคับให้ต้องมี `user_id` ตรงกับ `auth.uid()`

```sql create policy "Owner can insert" on public.messages for insert with check (auth.uid() = user_id); ```

**Warning: อย่าลืมทดสอบ Policy ทุกกรณีเพื่อป้องกันการรั่วข้อมูลโดยบังเอิญ

ตั้งค่าการยืนยันตัวตน — Authentication Setup

Supabase Auth รองรับหลายวิธี (Email/Password, OAuth, Magic Link)

• เปิดใช้งานผู้ให้บริการที่ต้องการใน “Auth Settings External OAuth Providers”
• ปรับ `Redirect URLs` ให้ตรงกับโดเมนของแอปพลิเคชัน

• หลังจากล็อกอินสำเร็จ ให้บันทึก access token ใน `localStorage` หรือ `sessionStorage` แล้วใช้กับ Realtime เพื่อให้ server ตรวจสอบสิทธิ

Tip: หากต้องการความปลอดภัยระดับ enterprise ควรใช้งาน JWT** ที่มีอายุสั้นและรีเฟรช token อย่างสม่ำเสมอ

ปรับแต่งการ Deploy และทดสอบ — Deploy & Test

เมื่อโค้ดพร้อมให้บริการ

• สร้างไฟล์ `.env` บนเซิร์ฟเวอร์ด้วยค่า `SUPABASE_URL`, `SUPABASE_ANON_KEY`, `SUPABASE_SERVICE_ROLE_KEY` (ใช้เฉพาะฝั่ง backend)
• Deploy ด้วย Vercel, Netlify หรือ Cloudflare Workers โดยตั้งค่า environment variables ให้ตรงกับ `.env`

ขั้นตอนทดสอบเบื้องต้น

• ตรวจสอบการเชื่อมต่อ WebSocket ผ่าน DevTools Network WS
• สร้างข้อมูลใหม่ในตารางและตรวจสอบว่า UI ของผู้ใช้รับอัปเดตโดยอัตโนมัติ
• ทดลองล็อกอินด้วยบัญชีที่ต่างกันเพื่อยืนยันว่าตารางแสดงเฉพาะข้อมูลของเจ้าของเท่านั้น

**Warning: อย่าลืมตั้งค่า CORS ใน “API Settings” เพื่อจำกัดโดเมนที่สามารถเข้าถึง API ของ Supabase

เคล็ดลับและข้อควรระวัง — Tips & Common Pitfalls

• ใช้ `max_retries: 3` เมื่อเชื่อมต่อ WebSocket เพื่อลดการพยายามเชื่อมต่อซ้ำบ่อยเกินไป
• ปิด Realtime บนตารางที่ไม่ได้ใช้จริงเพื่อลดค่าใช้จ่ายและปริมาณ traffic
• ตรวจสอบว่าเวลาของเซิร์ฟเวอร์และไคลเอนต์ตรงกัน (UTC) เพื่อหลีกเลี่ยงการตรวจสอบ token ผิดพลาด

**Tip: หากพบว่าอัปเดตไม่เกิดขึ้น ให้เช็คว่า `auth.uid()` ตรงกับค่าในคอลัมน์ `user_id` ของแถวที่เกี่ยวข้อง

สรุป — Summary

Supabase Realtime เป็นเครื่องมือที่ทำให้การสร้างเว็บเรียลไทม์เป็นเรื่องง่ายโดยไม่ต้องดูแลโครงสร้างพื้นฐานเอง การตั้งค่าที่ถูกต้องและการใช้ RLS ร่วมกับ Auth จะช่วยรักษาความปลอดภัยของข้อมูลได้อย่างมีประสิทธิภาพ

• สร้างโปรเจกต์ เปิด Realtime ตั้งค่า RLS
• เชื่อมต่อไคลเอนต์ ด้วย `@supabase/supabase-js` กำหนด channel & filter
• จัดการ Auth ให้ผู้ใช้ได้รับ token ที่ปลอดภัยและใช้เพื่อยืนยันสิทธิบน WebSocket

**สรุปที่ควรจำ: เปิด Realtime เฉพาะตารางสำคัญ, ใช้ RLS ป้องกันข้อมูลรั่วไหล, เก็บ `service_role` key ไว้ในฝั่งเซิร์ฟเวอร์เท่านั้น และทดสอบการทำงานทุกขั้นตอนก่อนเปิดใช้งานจริง.