[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-blogs-th-1-1-all-websocket-compression-ep73-th-all--*":3,"academy-blog-translations-wm44lqd0ujvu9w8":94},{"data":4,"page":82,"perPage":82,"totalItems":82,"totalPages":82},[5],{"alt":6,"collectionId":7,"collectionName":8,"content":9,"cover_image":10,"cover_image_path":11,"created":12,"created_by":13,"expand":14,"id":89,"keywords":90,"locale":64,"published_at":91,"scheduled_at":13,"school_blog":86,"short_description":92,"status":84,"title":6,"updated":93,"updated_by":13,"slug":87,"views":88},"EP.73 การปรับปรุงการเชื่อมต่อ WebSocket ด้วย WebSocket Compression","sclblg987654321","school_blog_translations","\u003Cp>ใน EP.73 นี้ เราจะพูดถึงการใช้ WebSocket Compression เพื่อเพิ่มประสิทธิภาพในการรับส่งข้อมูลระหว่าง WebSocket Server และ Client โดยเฉพาะในระบบที่มีปริมาณข้อมูลจำนวนมากหรือข้อความที่ซ้ำกัน เช่น ระบบแชทหรือแอปพลิเคชันแบบเรียลไทม์\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Cp>WebSocket Compression คือเทคนิคที่ช่วยบีบอัดข้อมูลก่อนส่ง ทำให้ลดขนาดของ payload ที่ส่งผ่านเครือข่าย ช่วยประหยัดแบนด์วิดท์ และลด latency ในการรับส่งข้อมูล โดยสามารถเปิดใช้งานได้ทั้งในฝั่ง Server และ Proxy เช่น NGINX\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>ทำไมต้องใช้ WebSocket Compression?\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>ข้อดีของ WebSocket Compression มีหลายประการ เช่น:\u003C\u002Fp>\u003Cul>\u003Cli>ลดขนาดข้อมูลที่ส่ง: ทำให้การรับส่งข้อมูลเร็วขึ้น และลดการใช้ bandwidth\u003C\u002Fli>\u003Cli>เพิ่มความเร็วในการโหลดข้อมูลซ้ำ: ข้อมูลที่มีลักษณะซ้ำกัน (เช่น ข้อความเดิม ๆ) จะถูกบีบอัดได้ดีมาก\u003C\u002Fli>\u003Cli>ลดภาระของเครือข่ายและเซิร์ฟเวอร์: ส่งผลให้ประหยัดต้นทุนและรองรับผู้ใช้งานได้มากขึ้น\u003C\u002Fli>\u003Cli>เหมาะกับระบบที่มีการเชื่อมต่อจำนวนมาก: เช่น Chat, Dashboard Monitoring, หรือเกมแบบมัลติเพลเยอร์\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>การตั้งค่า WebSocket Compression\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>เราสามารถเปิดใช้ WebSocket Compression ได้ทั้งในฝั่งแอปพลิเคชัน (Server) และ Reverse Proxy (เช่น NGINX)\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>1. การเปิดใช้งาน Compression ใน WebSocket Server ด้วย Go\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>ในตัวอย่างนี้ เราใช้ Go กับไลบรารี \u003Ccode inline=\"\">gorilla\u002Fwebsocket\u003C\u002Fcode> ซึ่งรองรับ compression โดยตรง\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext language-go\">package main\n\nimport (\n    \"log\"\n    \"net\u002Fhttp\"\n\n    \"github.com\u002Fgorilla\u002Fwebsocket\"\n)\n\nvar upgrader = websocket.Upgrader{\n    EnableCompression: true,\n    CheckOrigin: func(r *http.Request) bool {\n        return true\n    },\n}\n\nfunc handler(w http.ResponseWriter, r *http.Request) {\n    conn, err := upgrader.Upgrade(w, r, nil)\n    if err != nil {\n        log.Println(\"Upgrade error:\", err)\n        return\n    }\n    defer conn.Close()\n\n    \u002F\u002F เปิดการบีบอัดข้อความฝั่ง Client → Server\n    conn.EnableWriteCompression = true\n\n    for {\n        msgType, p, err := conn.ReadMessage()\n        if err != nil {\n            log.Println(\"Read error:\", err)\n            break\n        }\n\n        err = conn.WriteMessage(msgType, p)\n        if err != nil {\n            log.Println(\"Write error:\", err)\n            break\n        }\n    }\n}\n\nfunc main() {\n    http.HandleFunc(\"\u002F\", handler)\n    log.Println(\"WebSocket Server started on :8080\")\n    log.Fatal(http.ListenAndServe(\":8080\", nil))\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cblockquote>\u003Cp>🔎 หมายเหตุ: ไลบรารี \u003Ccode inline=\"\">gorilla\u002Fwebsocket\u003C\u002Fcode> ไม่มีแพ็กเกจย่อยชื่อ \u003Ccode inline=\"\">compression\u003C\u002Fcode> อย่างที่บทความต้นฉบับกล่าวไว้ — การเปิด compression ใช้ \u003Ccode inline=\"\">EnableCompression: true\u003C\u002Fcode> ใน \u003Ccode inline=\"\">Upgrader\u003C\u002Fcode> แทน\u003C\u002Fp>\u003C\u002Fblockquote>\u003Cp> \u003C\u002Fp>\u003Ch2>2. การเปิด WebSocket Compression ผ่าน NGINX\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>หากคุณใช้ NGINX เป็น reverse proxy คุณสามารถตั้งค่าให้ใช้ gzip สำหรับ traffic ที่เป็น WebSocket ได้ (แม้ว่า gzip จะไม่ได้บีบอัด WebSocket frame โดยตรง แต่จะช่วยในกรณีของ HTTP API หรือ fallback)\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext language-nginx\">http {\n    gzip on;\n    gzip_types application\u002Fjson text\u002Fplain;\n    gzip_min_length 1024;\n\n    server {\n        listen 80;\n\n        location \u002Fws {\n            proxy_pass http:\u002F\u002Flocalhost:8080;\n            proxy_http_version 1.1;\n            proxy_set_header Upgrade $http_upgrade;\n            proxy_set_header Connection \"upgrade\";\n            proxy_set_header Host $host;\n            proxy_cache_bypass $http_upgrade;\n        }\n    }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cblockquote>\u003Cp>💡 หากใช้ WebSocket แบบ binary frame หรือต้องการบีบอัดเฉพาะ WebSocket traffic จริง ๆ แนะนำเปิด \u003Ccode inline=\"\">permessage-deflate\u003C\u002Fcode> ที่ฝั่ง server และ client\u003C\u002Fp>\u003C\u002Fblockquote>\u003Cp> \u003C\u002Fp>\u003Ch2>3. การทดสอบ WebSocket Compression\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>หลังจากเปิดใช้ compression แล้ว ควรทำการทดสอบดังนี้:\u003C\u002Fp>\u003Cul>\u003Cli>✅ ทดสอบการส่งข้อความขนาดใหญ่ เช่น ข้อความ JSON หรือ payload ซ้ำ ๆ เพื่อดูว่า compression มีผลแค่ไหน\u003C\u002Fli>\u003Cli>✅ เปรียบเทียบ performance ก่อน–หลังเปิด compression โดยใช้เครื่องมือวัดขนาด frame หรือ Network tab ของ DevTools\u003C\u002Fli>\u003Cli>✅ ทดสอบการเชื่อมต่อพร้อมกันจำนวนมาก เพื่อดูว่า latency และ bandwidth ลดลงจริงหรือไม่\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Chr>\u003Cp> \u003C\u002Fp>\u003Ch3>ท้าให้ลอง!\u003C\u002Fh3>\u003Cp>ลองเปิดใช้งาน WebSocket Compression ในโปรเจกต์ของคุณ แล้ววัดผลเปรียบเทียบกับการเชื่อมต่อแบบไม่มี compression ว่าต่างกันแค่ไหนในสถานการณ์จริง!\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch3>EP ถัดไป:\u003C\u002Fh3>\u003Cp>ใน EP.74 เราจะมาดู การปรับแต่ง WebSocket Server ให้รองรับหลายภาษา (Multilingual Support) เพื่อสร้างระบบแชทที่สามารถสนทนาได้หลากหลายภาษาแบบเรียลไทม์! 🌐\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Cp>\u003Cstrong>อ่านบทความ Series อื่นๆ\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002Fblogs\u002Fcategories\u002FGolang\">\u003Cstrong>Golang The Series\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002Fblogs\u002Fcategories\u002FJS2GO\">\u003Cstrong>JS2GO\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002Fblogs\u002Fcategories\u002FTailwind%20CSS\">\u003Cstrong>10 Ep ที่จะให้คุณเป็นมือโปร Tailwind CSS ในชั่วข้ามคืน\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cstrong>🔵 Facebook: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.facebook.com\u002Fsuperdev.school.th\">\u003Cstrong>Superdev School  (Superdev)\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cp>\u003Cstrong>📸 Instagram: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.instagram.com\u002Fsuperdevschool\u002F\">\u003Cstrong>superdevschool\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cp>\u003Cstrong>🎬 TikTok: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.tiktok.com\u002F@superdevschool\">\u003Cstrong>superdevschool\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cp class=\"\" data-start=\"5978\" data-end=\"6095\">\u003Cstrong>🌐 Website: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002F\">\u003Cstrong>www.superdev.school\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>","117_11zon_4j7ab3gn04.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002F3ufng50b25yemqy\u002F117_11zon_4j7ab3gn04.webp","2026-03-04 08:47:27.065Z","",{"keywords":15,"locale":58,"school_blog":68},[16,23,28,33,38,43,48,53],{"collectionId":17,"collectionName":18,"created":19,"created_by":13,"id":20,"name":21,"updated":22,"updated_by":13},"sclkey987654321","school_keywords","2026-03-04 08:34:00.920Z","ecac9y661or1xka","WebSocket","2026-04-10 16:08:05.227Z",{"collectionId":17,"collectionName":18,"created":24,"created_by":13,"id":25,"name":26,"updated":27,"updated_by":13},"2026-03-04 08:34:06.204Z","uki2mmns85up9uf","Compression","2026-04-10 16:08:07.193Z",{"collectionId":17,"collectionName":18,"created":29,"created_by":13,"id":30,"name":31,"updated":32,"updated_by":13},"2026-03-04 08:47:25.158Z","uge2y6ouvrxnli2","บีบอัดข้อมูล","2026-04-10 16:13:28.445Z",{"collectionId":17,"collectionName":18,"created":34,"created_by":13,"id":35,"name":36,"updated":37,"updated_by":13},"2026-03-04 08:46:14.782Z","v0mhensk18fofru","WebSocket Chat","2026-04-10 16:13:10.563Z",{"collectionId":17,"collectionName":18,"created":39,"created_by":13,"id":40,"name":41,"updated":42,"updated_by":13},"2026-03-04 08:20:11.547Z","ey3puyme01a9bsw","Go","2026-04-10 16:07:25.893Z",{"collectionId":17,"collectionName":18,"created":44,"created_by":13,"id":45,"name":46,"updated":47,"updated_by":13},"2026-03-04 08:34:09.677Z","zy6p9bub451w3c8","NGINX","2026-04-10 16:08:08.440Z",{"collectionId":17,"collectionName":18,"created":49,"created_by":13,"id":50,"name":51,"updated":52,"updated_by":13},"2026-03-04 08:44:47.893Z","1r53azecnj44o3t","Real-time","2026-04-10 16:12:50.006Z",{"collectionId":17,"collectionName":18,"created":54,"created_by":13,"id":55,"name":56,"updated":57,"updated_by":13},"2026-03-04 08:47:25.404Z","cvnnrnwmh1rianr","Bandwidth","2026-04-10 16:13:28.607Z",{"code":59,"collectionId":60,"collectionName":61,"created":62,"flag":63,"id":64,"is_default":65,"label":66,"updated":67},"th","pbc_1989393366","locales","2026-01-22 10:59:55.832Z","twemoji:flag-thailand","s8wri3bt4vgg2ji",true,"Thai","2026-04-10 15:42:46.614Z",{"category":69,"collectionId":70,"collectionName":71,"created":13,"expand":72,"id":86,"slug":87,"updated":13,"views":88},"wqxt7ag2gn7xcmk","pbc_2105096300","school_blogs",{"category":73},{"blogIds":74,"collectionId":75,"collectionName":76,"created":77,"created_by":13,"id":69,"image":78,"image_alt":13,"image_path":79,"label":80,"name":81,"priority":82,"publish_at":83,"scheduled_at":13,"status":84,"updated":85,"updated_by":13},[],"sclcatblg987654321","school_category_blogs","2026-03-04 08:33:53.210Z","59ty92ns80w_15oc1implw.png","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclcatblg987654321\u002Fwqxt7ag2gn7xcmk\u002F59ty92ns80w_15oc1implw.png",{"en":81,"th":81},"Golang The Series",1,"2026-03-16 04:39:38.440Z","published","2026-04-25 02:32:15.470Z","wm44lqd0ujvu9w8","websocket-compression-ep73-th",272,"3ufng50b25yemqy",[20,25,30,35,40,45,50,55],"2025-08-07 01:39:48.961Z","เรียนรู้วิธีเพิ่มประสิทธิภาพ WebSocket ด้วยเทคนิคการบีบอัดข้อมูล ช่วยลดการใช้แบนด์วิดธ์และเพิ่มความเร็วในการส่งข้อมูล โดยใช้ Go และ NGINX","2026-04-25 02:48:15.319Z",{"th":87,"en":87}]