EP.92 การใช้ WebSocket ในการพัฒนาเกมออนไลน์แบบเรียลไทม์ (Real-time Online Game Development)

การพัฒนาเกมออนไลน์แบบเรียลไทม์ (Real-time Multiplayer Game) เป็นความท้าทายทางเทคนิคอย่างมาก เพราะต้องมีการแลกเปลี่ยนข้อมูลระหว่างผู้เล่นหลายคนอย่างรวดเร็ว แม่นยำ และมี latency ต่ำที่สุดเท่าที่จะทำได้ ซึ่ง WebSocket คือเทคโนโลยีที่เหมาะสมที่สุดสำหรับงานลักษณะนี้

ในบทความนี้ เราจะพาคุณไปดูแนวทางการออกแบบระบบ WebSocket Server สำหรับเกมแบบ real-time พร้อมตัวอย่างโค้ดภาษา Go และแนวคิดสำคัญสำหรับสร้างเกมที่ลื่นไหล รองรับผู้เล่นจำนวนมาก และลดปัญหา lag

1. การจัดการสถานะผู้เล่น (Player State Management)

ทุกผู้เล่นควรมีข้อมูลสถานะ เช่น ตำแหน่ง, HP, การเคลื่อนไหว, และสถานะพิเศษอื่น ๆ ที่ต้อง sync กับผู้เล่นคนอื่น

type Player struct {
    ID     string  `json:"id"`
    X      float64 `json:"x"`
    Y      float64 `json:"y"`
    HP     int     `json:"hp"`
    Status string  `json:"status"`
}

var players = make(map[string]*Player)
var playerConns = make(map[string]*websocket.Conn)

2. การส่งตำแหน่งและเหตุการณ์แบบเรียลไทม์

Server จะรับข้อมูลการเคลื่อนไหวจาก client แล้ว broadcast ให้ client อื่นใน room เดียวกันทันที

func handleMessage(playerID string, msg []byte) {
    var updated Player
    if err := json.Unmarshal(msg, &updated); err != nil {
        return
    }

    // อัปเดตสถานะผู้เล่นใน memory
    if p, ok := players[playerID]; ok {
        p.X = updated.X
        p.Y = updated.Y
        p.Status = updated.Status
    }

    // Broadcast ไปยังผู้เล่นอื่น
    for id, conn := range playerConns {
        if id != playerID {
            conn.WriteJSON(updated)
        }
    }
}

3. ป้องกัน latency ด้วย Prediction & Delta Update

ทำ Client-side prediction ให้ตัวเกมเคลื่อนไหวได้ทันทีแม้ยังไม่ได้รับ response จาก server
Server ส่งเฉพาะ delta (ค่าที่เปลี่ยนเท่านั้น) เพื่อประหยัด bandwidth
ใช้ Tick Rate ที่เหมาะสม เช่น 30 updates/sec

const tickRate = 30 * time.Millisecond

func gameLoop() {
    ticker := time.NewTicker(tickRate)
    for {
        <-ticker.C
        for id, conn := range playerConns {
            if player, ok := players[id]; ok {
                conn.WriteJSON(player) // อาจปรับให้ส่งเฉพาะ delta
            }
        }
    }
}

4. ออกแบบระบบ Multiplayer ให้รองรับหลายห้อง (Rooms)

ใช้ room ID เพื่อแยกกลุ่มผู้เล่น
Server หลาย instance ควรใช้ Redis Pub/Sub sync ข้อมูลระหว่างกัน
จัดการการ join/leave อย่างเป็นระบบ

type Room struct {
    ID      string
    Members map[string]*websocket.Conn
}

5. Best Practices

✅ ส่งเฉพาะข้อมูลที่จำเป็น — เพื่อลด latency และ network load
✅ เก็บ timestamp สำหรับ event — ป้องกันลำดับข้อมูลผิดพลาด
✅ ใช้ compression หรือ binary protocol — เช่น protobuf, msgpack
✅ ทดสอบใน network แย่ๆ — จำลอง latency จริง เช่น 100ms/200ms
✅ มีระบบ reconnect & retry — หาก connection หลุด ต้องกลับมาใน session เดิมได้

🧪 ตัวอย่างโค้ด Go: WebSocket Handler สำหรับเกม

func gameSocketHandler(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()

    for {
        _, msg, err := conn.ReadMessage()
        if err != nil {
            log.Println("Read error:", err)
            break
        }

        var event GameEvent
        if err := json.Unmarshal(msg, &event); err == nil {
            handleGameEvent(event)
            broadcastToRoom(event.RoomID, msg)
        }
    }
}

อธิบาย:

โค้ดด้านบนเป็น WebSocket handler สำหรับเกมออนไลน์แบบเรียลไทม์ ที่ทำงานดังนี้:

รับการเชื่อมต่อจาก client ด้วย upgrader.Upgrade
อ่านข้อความที่ client ส่งเข้ามา
แปลงข้อความ JSON เป็น GameEvent
ประมวลผลเหตุการณ์ด้วย handleGameEvent
ส่งต่อข้อมูลไปยังผู้เล่นอื่นในห้องเดียวกันผ่าน broadcastToRoom

🧠 สรุปท้ายบทความ

การพัฒนาเกมออนไลน์แบบเรียลไทม์ด้วย WebSocket ช่วยให้คุณสร้างประสบการณ์เล่นเกมที่ รวดเร็ว, โต้ตอบได้ทันที, และ สนุกสำหรับผู้เล่นหลายคน

หากออกแบบสถาปัตยกรรมและโปรโตคอลอย่างถูกต้อง ควบคุม latency ได้ดี Server ของคุณจะสามารถรองรับผู้เล่น หลายพันคนพร้อมกัน ได้อย่างมั่นใจ

🔥 Challenge ก่อนอีพีหน้า!

ลองท้าทายตัวเองด้วย Mini Project:

🎯 สร้างเกมเล็ก ๆ ด้วย WebSocket ที่มีฟีเจอร์:

✅ สร้างระบบล็อบบี้หรือห้อง (Lobby)
✅ ให้ผู้เล่นหลายคนขยับบนแผนที่เดียวกันแบบเรียลไทม์
✅ ใช้ k6 เพื่อจำลองการเชื่อมต่อ 100 ผู้เล่นพร้อมกัน
✅ ติดตามค่า latency และอัตราการอัปเดต (tick rate)

จากนั้นวิเคราะห์ดูว่าระบบคุณควรปรับปรุงตรงไหน และแชร์ผลลัพธ์ให้ทีมของคุณดู!

🔜 Next EP:

“การเพิ่มฟีเจอร์การสื่อสารแบบ Voice หรือ Video ใน WebSocket Chat”
เรียนรู้การเพิ่มระบบเสียง/วิดีโอในการสื่อสารภายใน WebSocket Chat ให้ทำงานแบบเรียลไทม์และประหยัด bandwidth ด้วยเทคโนโลยี WebRTC และ signaling ผ่าน WebSocket

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

🔵 Facebook: https://www.facebook.com/superdev.academy.th

🔴 YouTube : Superdev Academy

📸 Instagram: Superdev Academy

🎬 TikTok: https://www.tiktok.com/@superdevacademy?lang=th-TH

🌐 Website: https://www.superdevacademy.com/