EP.71 การใช้ WebSocket ในการพัฒนาระบบส่งข้อความแบบกระจาย (Broadcast Messaging)

ใน EP.71 นี้เราจะพูดถึงการใช้ WebSocket ในการพัฒนาระบบ Broadcast Messaging ที่ช่วยให้ผู้ใช้สามารถส่งข้อความจาก WebSocket Server ไปยังหลายๆ Client ในเวลาเดียวกันในระบบ WebSocket Chat โดยไม่ต้องทำการเชื่อมต่อกับแต่ละ Client ทีละตัว ระบบนี้จะช่วยให้การสื่อสารในแอปพลิเคชันเป็นไปอย่างราบรื่นและมีประสิทธิภาพ

การใช้ Broadcast Messaging สามารถใช้ในการส่งข้อความประกาศ, การอัปเดตสถานะ, หรือแม้กระทั่งการส่งข้อความที่สำคัญให้กับผู้ใช้ทั้งหมดในห้องแชทเดียวกัน

ทำไมต้องใช้ Broadcast Messaging ใน WebSocket Chat?

การส่งข้อความแบบกระจาย (Broadcast Messaging) คือการส่งข้อความจากผู้ใช้หนึ่งคน ไปยังผู้ใช้ทุกคนในห้องแชทแบบเรียลไทม์ ซึ่งมีข้อดีดังนี้:

ประหยัดทรัพยากร: ไม่จำเป็นต้องวนส่งข้อความทีละคน ทำให้ลดภาระของเซิร์ฟเวอร์
ตอบสนองเร็ว: WebSocket ทำให้การส่งข้อมูลเป็นแบบสองทาง (bi-directional) และไม่ต้องมีการเชื่อมต่อใหม่ทุกครั้ง
จัดการง่าย: ผู้ดูแลสามารถประกาศข้อความสำคัญได้ทันทีถึงทุกคนในห้อง

การออกแบบระบบส่งข้อความแบบกระจาย (Broadcast Messaging)

ในระบบ Broadcast Messaging, ข้อความที่ถูกส่งจาก Server จะถูกกระจายไปยัง Client ทุกตัวที่เชื่อมต่ออยู่ในห้องแชทเดียวกัน โดยการใช้ WebSocket จะทำให้การสื่อสารเป็นไปแบบ สองทาง (bi-directional) ซึ่งทำให้ระบบสามารถส่งข้อความจาก Server ไปยัง Client ได้อย่างรวดเร็ว

ขั้นตอนการพัฒนา Broadcast Messaging ใน WebSocket

การตั้งค่า WebSocket Server:
ก่อนที่จะเริ่มพัฒนา Broadcast Messaging, คุณต้องตั้งค่า WebSocket Server ที่สามารถรับการเชื่อมต่อจากหลายๆ Client ได้
การเพิ่มฟังก์ชัน Broadcast:
เมื่อมีการรับข้อความจากผู้ใช้หนึ่งคน ระบบจะต้องกระจายข้อความนี้ไปยัง Client อื่นๆ ที่เชื่อมต่ออยู่

ตัวอย่างการสร้าง WebSocket Server ด้วย Go

package main

import (
    "log"
    "net/http"
    "sync"

    "github.com/gorilla/websocket"
)

var (
    clients   = make(map[*websocket.Conn]bool)
    clientsMu sync.Mutex
    broadcast = make(chan Message)
)

type Message struct {
    User    string `json:"user"`
    Message string `json:"message"`
}

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("Upgrade error:", err)
        return
    }
    defer conn.Close()

    clientsMu.Lock()
    clients[conn] = true
    clientsMu.Unlock()

    for {
        var msg Message
        if err := conn.ReadJSON(&msg); err != nil {
            log.Println("Read error:", err)
            clientsMu.Lock()
            delete(clients, conn)
            clientsMu.Unlock()
            break
        }
        broadcast <- msg
    }
}

func handleMessages() {
    for msg := range broadcast {
        clientsMu.Lock()
        for client := range clients {
            if err := client.WriteJSON(msg); err != nil {
                log.Println("Write error:", err)
                client.Close()
                delete(clients, client)
            }
        }
        clientsMu.Unlock()
    }
}

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

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

คำอธิบายโค้ด:

clients: เก็บการเชื่อมต่อทั้งหมด
clientsMu: ใช้สำหรับล็อกป้องกัน concurrent access
broadcast: ช่องที่ใช้ส่งข้อความระหว่าง goroutine
handleConnections: รอรับข้อความจากแต่ละ client
handleMessages: ส่งข้อความไปยังทุก client ที่เชื่อมต่ออยู่

ทดสอบระบบ

ลองเชื่อมต่อ client หลายตัวเข้ามาที่ /ws แล้วลองส่งข้อความจาก client ใดก็ได้ จะเห็นว่า client อื่นๆ ได้รับข้อความทันที

Challenge: ลองเพิ่มฟีเจอร์ใหม่!

ลองเพิ่มฟีเจอร์ "ข้อความประกาศจากแอดมิน" โดยกำหนดว่าถ้า message จาก User == "admin" จะถูกส่งแบบ highlight พิเศษใน client ได้เลย

EP ถัดไป:

ใน EP.72 เราจะมาดู การสร้างระบบการบันทึกและจัดเก็บข้อมูลการสนทนา (Message Logging) ใน WebSocket เพื่อให้สามารถจัดเก็บประวัติการสนทนาและข้อมูลต่างๆ ของผู้ใช้ในระบบ WebSocket Chat ได้!

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

🔵 Facebook: Superdev School (Superdev)

📸 Instagram: superdevschool

🎬 TikTok: superdevschool

🌐 Website: www.superdev.school