[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-blogs-th-1-1-all-golang-websocket-collaborative-app-all--*":3,"academy-blog-translations-ijqixgy1v4jhi85":74},{"data":4,"page":62,"perPage":62,"totalItems":62,"totalPages":62},[5],{"alt":6,"collectionId":7,"collectionName":8,"content":9,"cover_image":10,"cover_image_path":11,"created":12,"created_by":13,"expand":14,"id":68,"keywords":69,"locale":44,"published_at":70,"scheduled_at":13,"school_blog":66,"short_description":71,"slug":72,"status":64,"title":6,"updated":73,"updated_by":13,"views":67},"EP.83 การใช้ WebSocket สร้างแอปพลิเคชันแบบ Collaborative","sclblg987654321","school_blog_translations","\u003Cp>ใน EP.83 นี้ เราจะมาเรียนรู้การสร้าง Collaborative Application ด้วย Golang และ WebSocket เพื่อให้ผู้ใช้งานหลายคนสามารถทำงานร่วมกันแบบเรียลไทม์ เช่น:\u003C\u002Fp>\u003Cul>\u003Cli>การแก้ไขเอกสารพร้อมกันหลายคน\u003C\u002Fli>\u003Cli>Whiteboard ที่วาดพร้อมกันได้หลายคน\u003C\u002Fli>\u003Cli>ระบบ Team Chat ที่ทุกคนส่งข้อความถึงกันได้แบบสด ๆ\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>🔍 ทำไมต้องใช้ WebSocket สำหรับ Collaborative Application?\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>แอปพลิเคชันที่เน้นการทำงานร่วมกันแบบเรียลไทม์ ไม่เหมาะกับ HTTP ทั่วไป เพราะ HTTP เป็นแบบ \u003Ci>Request-Response\u003C\u002Fi> ซึ่งส่งผลให้เกิดความล่าช้า (latency) และไม่สามารถส่งข้อมูลได้แบบต่อเนื่องทันที\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Cp>WebSocket เข้ามาแก้ปัญหานี้ได้ด้วยการเป็น Full-duplex connection ซึ่งช่วยให้เซิร์ฟเวอร์สามารถส่งข้อมูลไปยังผู้ใช้งานทุกคนได้ทันทีเมื่อมีการเปลี่ยนแปลง\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>✅ ตัวอย่างแอปที่เหมาะกับ WebSocket\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cul>\u003Cli>ระบบเอกสารออนไลน์ที่หลายคนแก้ไขได้พร้อมกัน (Google Docs style)\u003C\u002Fli>\u003Cli>Whiteboard ออนไลน์แบบทีม\u003C\u002Fli>\u003Cli>ระบบ Team Chat แบบกลุ่ม\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>⚙️ การตั้งค่า WebSocket Server ด้วย Golang\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>ในตัวอย่างนี้ เราจะใช้ \u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fgithub.com\u002Fgorilla\u002Fwebsocket\">Gorilla WebSocket\u003C\u002Fa> ซึ่งเป็นไลบรารียอดนิยมสำหรับจัดการ WebSocket ในภาษา Go\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch3>1. Import packages\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-plaintext language-go\">import (\n    \"log\"\n    \"net\u002Fhttp\"\n    \"github.com\u002Fgorilla\u002Fwebsocket\"\n)\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch3>2. สร้าง Upgrader สำหรับยกระดับ HTTP → WebSocket\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-plaintext language-go\">var upgrader = websocket.Upgrader{\n    CheckOrigin: func(r *http.Request) bool {\n        return true \u002F\u002F อนุญาตให้ทุก origin เชื่อมต่อ (Production ควรจำกัด Origin)\n    },\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch3>3. สร้าง map เก็บ client\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-plaintext language-go\">var clients = make(map[*websocket.Conn]bool)\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>💬 การจัดการการเชื่อมต่อและ Broadcast\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Ch3>ฟังก์ชันส่งข้อความไปยังทุก client\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-plaintext language-go\">func broadcastMessage(message []byte) {\n    for client := range clients {\n        err := client.WriteMessage(websocket.TextMessage, message)\n        if err != nil {\n            client.Close()\n            delete(clients, client)\n        }\n    }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch3>ฟังก์ชันจัดการการเชื่อมต่อใหม่\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-plaintext language-go\">func handleConnections(w http.ResponseWriter, r *http.Request) {\n    ws, err := upgrader.Upgrade(w, r, nil)\n    if err != nil {\n        log.Println(\"Upgrade error:\", err)\n        return\n    }\n    defer ws.Close()\n\n    clients[ws] = true\n\n    for {\n        _, msg, err := ws.ReadMessage()\n        if err != nil {\n            log.Println(\"Read error:\", err)\n            delete(clients, ws)\n            break\n        }\n        broadcastMessage(msg)\n    }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch3>main function สำหรับเริ่มเซิร์ฟเวอร์\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-plaintext language-go\">func main() {\n    http.HandleFunc(\"\u002Fws\", handleConnections)\n    log.Println(\"WebSocket server started on :8080\")\n    log.Fatal(http.ListenAndServe(\":8080\", nil))\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>🧠 การจัดการ Conflict และ Synchronization\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>เมื่อผู้ใช้หลายคนทำงานกับข้อมูลเดียวกัน อาจเกิด conflict ได้ เช่น การแก้ไขข้อความพร้อมกัน\u003C\u002Fp>\u003Ch3>แนวทางการจัดการ:\u003C\u002Fh3>\u003Cp> \u003C\u002Fp>\u003Cfigure class=\"table\">\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>วิธี\u003C\u002Fth>\u003Cth>อธิบาย\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>Operational Transformation (OT)\u003C\u002Ftd>\u003Ctd>ใช้โครงสร้างข้อความแบบ operation เพื่อ sync ข้อมูลจาก client แต่ละคน\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Last Write Wins (LWW)\u003C\u002Ftd>\u003Ctd>ยอมให้ข้อมูลล่าสุดแทนที่เสมอ (เหมาะกับกรณีที่ไม่ซีเรียสเรื่อง conflict)\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Versioning\u003C\u002Ftd>\u003Ctd>เพิ่ม version ID ให้กับแต่ละข้อความหรือเอกสารเพื่อตรวจสอบความถูกต้อง\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003C\u002Ffigure>\u003Cp> \u003C\u002Fp>\u003Cp>สำหรับระบบแชทหรือ whiteboard เบื้องต้น อาจใช้การแนบ \u003Ccode inline=\"\">timestamp\u003C\u002Fcode> และ \u003Ccode inline=\"\">user_id\u003C\u002Fcode> กับแต่ละข้อความเพื่อจัดการลำดับและความถูกต้องได้ง่าย ๆ\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>🧪 ตัวอย่างการประยุกต์ใช้\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cfigure class=\"table\">\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>ประเภทระบบ\u003C\u002Fth>\u003Cth>รายละเอียด\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>Whiteboard\u003C\u002Ftd>\u003Ctd>ผู้ใช้วาดภาพพร้อมกัน → ส่งจุดพิกัดและสีไปยังผู้ใช้งานทั้งหมด\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Chat แบบกลุ่ม\u003C\u002Ftd>\u003Ctd>ผู้ใช้ส่งข้อความ → เซิร์ฟเวอร์กระจายข้อความไปยังทุกคนทันที\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Document Editor\u003C\u002Ftd>\u003Ctd>ใช้ OT หรือ LWW เพื่อจัดการการแก้ไขเอกสารแบบ real-time\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003C\u002Ffigure>\u003Cp> \u003C\u002Fp>\u003Ch2>⚠️ สิ่งที่ต้องระวัง\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cfigure class=\"table\">\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>หัวข้อ\u003C\u002Fth>\u003Cth>คำแนะนำ\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>Resource Management\u003C\u002Ftd>\u003Ctd>จำกัดจำนวน client ต่อ server เพื่อป้องกัน overload\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Security\u003C\u002Ftd>\u003Ctd>ตรวจสอบ origin และมีการยืนยันตัวตนก่อนให้เชื่อมต่อ\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Scalability\u003C\u002Ftd>\u003Ctd>ใช้ Redis Pub\u002FSub หรือ Message Queue (เช่น NATS, Kafka) สำหรับระบบที่ต้องทำงานข้ามหลายเครื่อง\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003C\u002Ffigure>\u003Cp> \u003C\u002Fp>\u003Chr>\u003Cp> \u003C\u002Fp>\u003Ch2>🚀 ท้าให้ลอง!\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>ลองสร้าง Collaborative App ขนาดเล็กด้วย Go + WebSocket เช่น:\u003C\u002Fp>\u003Cul>\u003Cli>✅ Whiteboard ออนไลน์\u003C\u002Fli>\u003Cli>✅ Chat ห้องเรียนแบบเรียลไทม์\u003C\u002Fli>\u003Cli>✅ Document editor แบบง่าย ๆ\u003C\u002Fli>\u003C\u002Ful>\u003Cp>ลองเพิ่มระบบ login และ filter เฉพาะกลุ่มผู้ใช้ แล้วให้ WebSocket ส่งข้อมูลแยกตามห้องหรือกลุ่ม\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>🔜 EP. ถัดไป\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>EP.84: การทดสอบประสิทธิภาพ WebSocket Server ด้วยเครื่องมือ Load Testing\u003C\u002Fp>\u003Cp>เราจะมาเรียนรู้วิธี Benchmark ระบบ WebSocket ด้วยเครื่องมือที่สามารถจำลองการเชื่อมต่อจำนวนมาก พร้อมวิเคราะห์ความสามารถในการรองรับ load แบบ production จริง\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>","137_11zon_dtqbdrwpmd.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002F509xbkpgz1pm92g\u002F137_11zon_dtqbdrwpmd.webp","2026-03-04 08:46:55.856Z","",{"keywords":15,"locale":38,"school_blog":48},[16,23,28,33],{"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:20:14.253Z","ah6lvy4x8qe08l5","Golang","2026-04-10 16:07:26.172Z",{"collectionId":17,"collectionName":18,"created":29,"created_by":13,"id":30,"name":31,"updated":32,"updated_by":13},"2026-03-04 08:20:11.547Z","ey3puyme01a9bsw","Go","2026-04-10 16:07:25.893Z",{"collectionId":17,"collectionName":18,"created":34,"created_by":13,"id":35,"name":36,"updated":37,"updated_by":13},"2026-03-04 08:44:49.445Z","0ips6v3gj6yy1h7","ระบบเรียลไทม์","2026-04-10 16:12:50.583Z",{"code":39,"collectionId":40,"collectionName":41,"created":42,"flag":43,"id":44,"is_default":45,"label":46,"updated":47},"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":49,"collectionId":50,"collectionName":51,"expand":52,"id":66,"views":67},"wqxt7ag2gn7xcmk","pbc_2105096300","school_blogs",{"category":53},{"blogIds":54,"collectionId":55,"collectionName":56,"created":57,"created_by":13,"id":49,"image":58,"image_alt":13,"image_path":59,"label":60,"name":61,"priority":62,"publish_at":63,"scheduled_at":13,"status":64,"updated":65,"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":61,"th":61},"Golang The Series",1,"2026-03-16 04:39:38.440Z","published","2026-04-25 02:32:15.470Z","ijqixgy1v4jhi85",232,"509xbkpgz1pm92g",[20,25,30,35],"2025-09-01 02:32:41.413Z","เรียนรู้วิธีสร้างระบบที่ผู้ใช้หลายคนสามารถทำงานร่วมกันแบบเรียลไทม์ เช่น แก้เอกสารพร้อมกัน, Whiteboard, หรือ Team Chat ด้วย WebSocket และ Golang","golang-websocket-collaborative-app","2026-04-25 02:48:10.233Z",{"th":72}]