💬
ระบบแชทและข้อความ
การสื่อสารแบบ 2 ทาง Real-time ด้วย WebSocket, Socket.io และ Redis Pub/Sub สำหรับแชทที่ Scale ได้
🔄 สถาปัตยกรรม Real-time Chat
📋 ขั้นตอนการส่งข้อความโดยละเอียด
1
🔌ผู้ใช้
เปิดหน้าแชท → Frontend สร้าง WebSocket connection ไปยัง Server (ws://)
2
🔐Server
ตรวจสอบสิทธิ์ WebSocket connection โดยใช้ JWT token ใน query param หรือ handshake
3
🏠Server
ผู้ใช้เข้าห้อง (chat_id) → Server บันทึกว่า Socket ไหนเป็นของผู้ใช้คนใด
4
✉️ผู้ใช้ A
พิมพ์ข้อความ → กดส่ง → Frontend emit event "send_message" ผ่าน WebSocket
5
⚙️WS Server
รับ event → ตรวจสอบเนื้อหา → บันทึกข้อความลงฐานข้อมูล (async)
6
⚡WS Server
Publish ไปยัง Redis Pub/Sub channel (สำหรับ Scaling หลาย instance)
7
📡Redis
ทุก WS Server instance ที่ Subscribe channel นั้นจะได้รับข้อความ
8
📤WS Server
Emit event "receive_message" ให้ผู้ใช้ทุกคนในห้องเดียวกัน
9
💬ผู้ใช้ B
Frontend รับ event → เพิ่มข้อความในหน้าแชท → แสดง Notification ถ้าไม่ได้อยู่ในหน้า
10
🗄️Database
บันทึกข้อความ: id, room_id, sender_id, content, type, status=DELIVERED, created_at
11
✅ระบบ
อัปเดต Read receipt เมื่อผู้ใช้ B อ่าน → Emit event "message_read" กลับไปยังผู้ใช้ A
✨ ฟีเจอร์ระบบแชท
✓✓
Read Receipts
แสดงว่าข้อความถูกส่งและอ่านแล้ว (เหมือน double tick ของ WhatsApp)
💬
Typing Indicator
"กำลังพิมพ์..." แสดงแบบ Real-time ผ่าน WebSocket event
📎
File Sharing
ส่งรูป เอกสาร ไฟล์มีเดียผ่านระบบ Upload + ส่ง URL ในข้อความ
📜
ประวัติข้อความ
โหลดข้อความเก่าด้วย Pagination (infinite scroll) เมื่อเปิดแชท
🟢
Online Status
ติดตามสถานะออนไลน์/ออฟไลน์จาก WebSocket connect/disconnect
📱
Push เมื่อออฟไลน์
ถ้าผู้ใช้ออฟไลน์ ใช้ Push notification (FCM/APNs) แทน
👥
Group Chat
ใช้ Room: ผู้ใช้หลายคนใน chat_id เดียว Server broadcast ให้ทุกคน
🔍
ค้นหาข้อความ
Full-text search ประวัติข้อความด้วย Elasticsearch หรือ DB index
🛠️ Tech Stack ที่แนะนำ
🌐
Frontend
•Socket.io-client
•React useEffect + useRef
•Infinite Scroll library
•Web Notifications API
⚙️
Backend
•Socket.io / ws (Node.js)
•Express / Fastify
•JWT authentication middleware
•Rate limiting ต่อ socket
⚡
Message Queue
•Redis Pub/Sub (หลาย server)
•Bull Queue (งาน background)
•Message deduplication
•Delivery guarantees
🗄️
Database
•PostgreSQL / MongoDB
•Index บน (room_id, created_at)
•Soft delete ข้อความ
•บันทึก read_at แยกต่างหาก
ต้องการระบบแชท Real-time? 💬
เราสร้างระบบแชทที่ Scale ได้ พร้อม WebSocket, Read receipt, Push notification และแชร์ไฟล์
← กลับหน้าเรียนติดต่อเรา