EP.104 การใช้ WebSocket Compression และ Delta Updates

เมื่อระบบ WebSocket ต้องรับส่งข้อมูลจำนวนมากในแบบ เรียลไทม์ (Real-time) เช่น ระบบแชท, เกมออนไลน์, หรือแดชบอร์ดข้อมูลสด ประสิทธิภาพของการส่งข้อมูลจึงกลายเป็นหัวใจสำคัญ

เทคนิคที่ช่วยให้ระบบ เร็วขึ้นแต่ใช้ Bandwidth น้อยลง คือ

✅ การบีบอัดข้อมูล (WebSocket Compression)
✅ การอัปเดตเฉพาะส่วนที่เปลี่ยนแปลง (Delta Updates)

สองสิ่งนี้รวมกันจะช่วยให้ระบบของคุณ “เบาแต่แรง” เหมาะกับงานระดับ Production อย่างแท้จริง 🚀

🧩 1. WebSocket Compression คืออะไร

โดยปกติ WebSocket จะส่งข้อมูลดิบ (raw data) ทุกครั้ง ไม่ว่าจะเปลี่ยนแค่ตัวอักษรเดียว การเปิดใช้ Compression Extension (permessage-deflate) จะช่วยบีบอัดข้อมูลก่อนส่ง ทำให้ payload เล็กลงอย่างมาก

🔹 ตัวอย่างการเปิดใช้ Compression ใน Go

package main

import (
	"log"
	"net/http"

	"github.com/gorilla/websocket"
)

var upgrader = websocket.Upgrader{
	EnableCompression: true, // เปิดใช้ compression
	CheckOrigin: func(r *http.Request) bool { return true },
}

func handler(w http.ResponseWriter, r *http.Request) {
	conn, _ := upgrader.Upgrade(w, r, nil)
	defer conn.Close()

	conn.EnableWriteCompression(true) // เปิด compression สำหรับ message

	for {
		mt, msg, err := conn.ReadMessage()
		if err != nil {
			break
		}

		log.Printf("Received: %s", msg)
		conn.WriteMessage(mt, []byte("Compressed response OK!"))
	}
}

func main() {
	http.HandleFunc("/ws", handler)
	log.Println("WebSocket Server running on :8080")
	http.ListenAndServe(":8080", nil)
}

✅ ผลลัพธ์

ขนาดข้อมูลลดลง 30–80%
ประหยัด Bandwidth โดยเฉพาะบน mobile network
Latency ลดลงเมื่อข้อมูลมีลักษณะซ้ำ ๆ

⚙️ 2. Delta Updates คืออะไร

Delta Update หมายถึง การส่งเฉพาะส่วนของข้อมูลที่เปลี่ยนแปลง แทนที่จะส่งทั้ง object ใหม่ทุกครั้ง เช่น

// แบบปกติ
{
  "user_id": 101,
  "score": 4200
}

ถ้าเปลี่ยนแค่คะแนน (score) การส่งทั้ง object ซ้ำ ๆ จะสิ้นเปลืองมาก เราจึงส่งเฉพาะ “delta” เช่น

{ "score": 4300 }

หรือใน Binary Protocol จะ encode เฉพาะฟิลด์ที่เปลี่ยน

🔹 ตัวอย่าง Delta Update ใน Go

type UserData struct {
	ID    int    `json:"id"`
	Name  string `json:"name"`
	Score int    `json:"score"`
}

var oldData = UserData{ID: 1, Name: "Alice", Score: 4200}
var newData = UserData{ID: 1, Name: "Alice", Score: 4300}

func getDelta(old, new UserData) map[string]interface{} {
	delta := make(map[string]interface{})
	if old.Score != new.Score {
		delta["score"] = new.Score
	}
	if old.Name != new.Name {
		delta["name"] = new.Name
	}
	return delta
}

func main() {
	d := getDelta(oldData, newData)
	fmt.Println("Delta Update:", d)
}

ผลลัพธ์:

Delta Update: map[score:4300]

จากนั้นเราสามารถส่งเฉพาะ delta นี้ผ่าน WebSocket ไปยัง client ได้ทันที

🔧 3. การรวม Compression + Delta Updates

เมื่อเราผสาน WebSocket Compression กับ Delta Updates จะได้การสื่อสารที่ “ทั้งเร็วและเบา”

Compression ลดขนาด payload
Delta ลดปริมาณข้อมูลที่ส่ง

เหมาะกับระบบ:

Real-time dashboards
Multiplayer game
IoT data stream
Live trading platform

💡 4. Best Practices

เปิดใช้ EnableCompression เฉพาะเมื่อจำเป็น เพราะมี overhead จากการบีบอัด/ขยายข้อมูล
ใช้ Binary + Delta Encoding ร่วมกันจะได้ผลดีที่สุด
เก็บ snapshot ล่าสุดของข้อมูลฝั่ง server เพื่อคำนวณ delta ได้แม่นยำ
ตรวจสอบว่า client รองรับ delta logic ก่อนเปิดใช้จริง

🚀 ท้าให้ลอง!

ลองเปิดใช้ Compression + Delta Updates ใน WebSocket Server ของคุณ แล้วทดสอบดูว่า Bandwidth ลดลงเท่าไร และ Latency ดีขึ้นแค่ไหน 💪

🌟 EP ถัดไป:

ใน EP.105 เราจะพูดถึง "การจัดการ Event Queue และการจัดลำดับความสำคัญ (Event Queue Management and Prioritization)" ว่าระบบ 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/