EP.77 การสร้างระบบแจ้งเตือนแบบทันที (Instant Notification System) ใน WebSocket

ในตอนนี้ เราจะสอนวิธีสร้าง ระบบแจ้งเตือนแบบทันที (Instant Notification System) โดยใช้ WebSocket เพื่อให้ผู้ใช้สามารถรับการแจ้งเตือนเมื่อเกิดเหตุการณ์ใหม่ เช่น ข้อความใหม่ กิจกรรมสำคัญ หรือ event ต่าง ๆ แบบ Real-Time โดยไม่ต้องรีเฟรชหน้าเว็บหรือดึงข้อมูลซ้ำ

เราจะใช้ภาษา Go (Golang) ในการพัฒนา WebSocket Server พร้อมตัวอย่างโค้ดฝั่ง Server และ Client เพื่อให้เข้าใจการทำงานครบถ้วน

🔸 ทำไมระบบ Instant Notification จึงสำคัญ?

1. ยกระดับประสบการณ์ผู้ใช้ (UX):
ผู้ใช้สามารถรับรู้เหตุการณ์ใหม่ได้ทันที ไม่พลาดข้อมูลสำคัญ

2. การสื่อสารแบบสองทาง (Bi-directional):
WebSocket ช่วยให้ทั้งฝั่ง Client และ Server สามารถส่งข้อมูลหากันได้ทันที โดยไม่ต้อง Polling

3. รองรับหลายผู้ใช้พร้อมกัน:
ระบบสามารถส่งการแจ้งเตือนไปยังผู้ใช้หลายรายได้ในเวลาเดียวกัน โดยยังคงรักษาประสิทธิภาพ

🔸 โครงสร้างระบบ

Server:
รับ event หรือข้อความใหม่ และส่งแจ้งเตือนไปยัง Client ผ่าน WebSocket
Client:
เชื่อมต่อกับ WebSocket และรอรับแจ้งเตือนแบบเรียลไทม์ พร้อมแสดงผลทันที

✅ ตัวอย่างโค้ด Golang: WebSocket Notification Server

package main

import (
    "log"
    "net/http"
    "github.com/gorilla/websocket"
)

var clients = make(map[*websocket.Conn]bool)
var broadcast = make(chan string)

var upgrader = websocket.Upgrader{
    CheckOrigin: func(r *http.Request) bool {
        return true
    },
}

func handleConnections(w http.ResponseWriter, r *http.Request) {
    conn, err := upgrader.Upgrade(w, r, nil)
    if err != nil {
        log.Println(err)
        return
    }
    defer conn.Close()

    clients[conn] = true

    for {
        var msg string
        err := conn.ReadJSON(&msg)
        if err != nil {
            log.Println(err)
            delete(clients, conn)
            break
        }

        broadcast <- msg
    }
}

func handleNotifications() {
    for {
        msg := <-broadcast
        for client := range clients {
            err := client.WriteJSON(msg)
            if err != nil {
                log.Println(err)
                client.Close()
                delete(clients, client)
            }
        }
    }
}

func main() {
    http.HandleFunc("/ws", handleConnections)
    go handleNotifications()

    log.Println("WebSocket Notification Server started on :8080")
    log.Fatal(http.ListenAndServe(":8080", nil))
}

✅ ตัวอย่าง JavaScript: ฝั่ง Client

const socket = new WebSocket("ws://localhost:8080/ws");

socket.onmessage = function(event) {
    const message = event.data;
    console.log("📢 Notification Received:", message);
    // แสดงข้อความแจ้งเตือนบน UI ได้ที่นี่
};

function sendNotification(msg) {
    socket.send(JSON.stringify(msg));
}

🧪 วิธีทดสอบระบบ

เปิด WebSocket Server ด้วยคำสั่ง go run main.go
เปิดเบราว์เซอร์หลายหน้าต่าง (หรือหลายอุปกรณ์) เพื่อจำลอง Client หลายราย
ส่งข้อความแจ้งเตือนจาก Client ใดก็ได้
ตรวจสอบว่า Client ทุกตัวได้รับข้อความทันทีแบบ Real-Time

💡 Tips & Best Practices

✅ ใช้ Targeted Notification สำหรับแจ้งเฉพาะผู้ใช้ที่เกี่ยวข้อง เพื่อลดภาระของระบบ
✅ ควบคุมจำนวน Broadcast เพื่อลดการส่งข้อมูลซ้ำซ้อน
✅ พิจารณาใช้ Redis Pub/Sub ร่วมกับ WebSocket หากระบบคุณรันหลาย instance หรือหลาย server

🔜 EP ถัดไป:

EP.78 – การจัดการ WebSocket Server ด้วย Kubernetes
เรียนรู้วิธีทำให้ WebSocket Server สามารถขยายระบบ รองรับผู้ใช้จำนวนมาก และทำงานได้อย่างมีเสถียรภาพในสภาพแวดล้อมแบบ Cloud-native!

อ่านบทความ Series อื่นๆ

🔵 Facebook: Superdev School (Superdev)

📸 Instagram: superdevschool

🎬 TikTok: superdevschool

🌐 Website: www.superdev.school