EP.73 การปรับปรุงการเชื่อมต่อ WebSocket ด้วย WebSocket Compression

ใน EP.73 นี้ เราจะพูดถึงการใช้ WebSocket Compression เพื่อเพิ่มประสิทธิภาพในการรับส่งข้อมูลระหว่าง WebSocket Server และ Client โดยเฉพาะในระบบที่มีปริมาณข้อมูลจำนวนมากหรือข้อความที่ซ้ำกัน เช่น ระบบแชทหรือแอปพลิเคชันแบบเรียลไทม์

WebSocket Compression คือเทคนิคที่ช่วยบีบอัดข้อมูลก่อนส่ง ทำให้ลดขนาดของ payload ที่ส่งผ่านเครือข่าย ช่วยประหยัดแบนด์วิดท์ และลด latency ในการรับส่งข้อมูล โดยสามารถเปิดใช้งานได้ทั้งในฝั่ง Server และ Proxy เช่น NGINX

ทำไมต้องใช้ WebSocket Compression?

ข้อดีของ WebSocket Compression มีหลายประการ เช่น:

ลดขนาดข้อมูลที่ส่ง: ทำให้การรับส่งข้อมูลเร็วขึ้น และลดการใช้ bandwidth
เพิ่มความเร็วในการโหลดข้อมูลซ้ำ: ข้อมูลที่มีลักษณะซ้ำกัน (เช่น ข้อความเดิม ๆ) จะถูกบีบอัดได้ดีมาก
ลดภาระของเครือข่ายและเซิร์ฟเวอร์: ส่งผลให้ประหยัดต้นทุนและรองรับผู้ใช้งานได้มากขึ้น
เหมาะกับระบบที่มีการเชื่อมต่อจำนวนมาก: เช่น Chat, Dashboard Monitoring, หรือเกมแบบมัลติเพลเยอร์

การตั้งค่า WebSocket Compression

เราสามารถเปิดใช้ WebSocket Compression ได้ทั้งในฝั่งแอปพลิเคชัน (Server) และ Reverse Proxy (เช่น NGINX)

1. การเปิดใช้งาน Compression ใน WebSocket Server ด้วย Go

ในตัวอย่างนี้ เราใช้ Go กับไลบรารี gorilla/websocket ซึ่งรองรับ compression โดยตรง

package main

import (
    "log"
    "net/http"

    "github.com/gorilla/websocket"
)

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

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

    // เปิดการบีบอัดข้อความฝั่ง Client → Server
    conn.EnableWriteCompression = true

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

        err = conn.WriteMessage(msgType, p)
        if err != nil {
            log.Println("Write error:", err)
            break
        }
    }
}

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

🔎 หมายเหตุ: ไลบรารี gorilla/websocket ไม่มีแพ็กเกจย่อยชื่อ compression อย่างที่บทความต้นฉบับกล่าวไว้ — การเปิด compression ใช้ EnableCompression: true ใน Upgrader แทน

2. การเปิด WebSocket Compression ผ่าน NGINX

หากคุณใช้ NGINX เป็น reverse proxy คุณสามารถตั้งค่าให้ใช้ gzip สำหรับ traffic ที่เป็น WebSocket ได้ (แม้ว่า gzip จะไม่ได้บีบอัด WebSocket frame โดยตรง แต่จะช่วยในกรณีของ HTTP API หรือ fallback)

http {
    gzip on;
    gzip_types application/json text/plain;
    gzip_min_length 1024;

    server {
        listen 80;

        location /ws {
            proxy_pass http://localhost:8080;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }
    }
}

💡 หากใช้ WebSocket แบบ binary frame หรือต้องการบีบอัดเฉพาะ WebSocket traffic จริง ๆ แนะนำเปิด permessage-deflate ที่ฝั่ง server และ client

3. การทดสอบ WebSocket Compression

หลังจากเปิดใช้ compression แล้ว ควรทำการทดสอบดังนี้:

✅ ทดสอบการส่งข้อความขนาดใหญ่ เช่น ข้อความ JSON หรือ payload ซ้ำ ๆ เพื่อดูว่า compression มีผลแค่ไหน
✅ เปรียบเทียบ performance ก่อน–หลังเปิด compression โดยใช้เครื่องมือวัดขนาด frame หรือ Network tab ของ DevTools
✅ ทดสอบการเชื่อมต่อพร้อมกันจำนวนมาก เพื่อดูว่า latency และ bandwidth ลดลงจริงหรือไม่

ท้าให้ลอง!

ลองเปิดใช้งาน WebSocket Compression ในโปรเจกต์ของคุณ แล้ววัดผลเปรียบเทียบกับการเชื่อมต่อแบบไม่มี compression ว่าต่างกันแค่ไหนในสถานการณ์จริง!

EP ถัดไป:

ใน EP.74 เราจะมาดู การปรับแต่ง WebSocket Server ให้รองรับหลายภาษา (Multilingual Support) เพื่อสร้างระบบแชทที่สามารถสนทนาได้หลากหลายภาษาแบบเรียลไทม์! 🌐

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

🔵 Facebook: Superdev School (Superdev)

📸 Instagram: superdevschool

🎬 TikTok: superdevschool

🌐 Website: www.superdev.school