[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-blogs-th-1-1-all-ep-120-realtime-whiteboard-drawing-websocket-all--*":3,"academy-blog-translations-clsm7oxkvsptxhx":78},{"data":4,"page":66,"perPage":66,"totalItems":66,"totalPages":66},[5],{"alt":6,"collectionId":7,"collectionName":8,"content":9,"cover_image":10,"cover_image_path":11,"created":12,"created_by":13,"expand":14,"id":72,"keywords":73,"locale":49,"published_at":74,"scheduled_at":13,"school_blog":70,"short_description":75,"slug":76,"status":68,"title":6,"updated":77,"updated_by":13,"views":71},"EP.120 Whiteboard & Real-time Drawing Synchronization ด้วย WebSocket","sclblg987654321","school_blog_translations","\u003Cp>หลังจากเราเรียนรู้การทำ Collaborative Document Editing (แบบตัวอักษร) มาแล้ว ตอนนี้ถึงเวลาขยับไปสู่สิ่งที่ \"ท้าทายกว่า\" การวาดรูปแบบเรียลไทม์ (Real-time Drawing)\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Cp>Whiteboard App อย่าง Miro, FigJam หรือ Excalidraw จำเป็นต้องรองรับการทำงานที่ซับซ้อน เช่น\u003C\u002Fp>\u003Cul>\u003Cli>ผู้ใช้หลายคนวาดพร้อมกัน\u003C\u002Fli>\u003Cli>การเคลื่อนไหวของเส้น รูปร่าง และ cursor แบบเรียลไทม์\u003C\u002Fli>\u003Cli>Canvas ที่ต้อง sync เหมือนกันทุกคน\u003C\u002Fli>\u003Cli>ระบบ Undo \u002F Redo ที่ทำงานทันที\u003C\u002Fli>\u003Cli>ความหน่วง (Latency) ต้องต่ำมาก\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Cp>บทความนี้จะพาคุณออกแบบ Real-time Whiteboard System โดยใช้ Go + WebSocket เป็นแกนกลาง พร้อมแนวคิดที่สามารถนำไปใช้ได้จริงใน Production\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>🧠 ภาพรวม Architecture\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext language-txt\">Client (Canvas)\n  ↕ WebSocket\nWhiteboard Server (Go)\n  ↕ Broadcast\nClients ทุกคนใน board เดียวกัน\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch3>องค์ประกอบหลัก\u003C\u002Fh3>\u003Cul>\u003Cli>Canvas State – สถานะปัจจุบันของกระดาน\u003C\u002Fli>\u003Cli>Draw Events – การวาดเส้นหรือรูปร่าง\u003C\u002Fli>\u003Cli>Cursor Position – ตำแหน่งเมาส์ของแต่ละคน\u003C\u002Fli>\u003Cli>History Stack – สำหรับ Undo \u002F Redo\u003C\u002Fli>\u003Cli>Room (Board) – แยกการวาดตาม \u003Ccode inline=\"\">board_id\u003C\u002Fcode>\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>✏️ 1. รูปแบบข้อมูลสำหรับ Drawing Event\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>เราไม่ส่งทั้ง Canvas ทุกครั้ง แต่ส่งเฉพาะ Draw Event\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext language-json\">{\n  \"board_id\": \"board-001\",\n  \"user_id\": \"user-a\",\n  \"type\": \"draw\",\n  \"tool\": \"pen\",\n  \"points\": [\n    { \"x\": 120, \"y\": 240 },\n    { \"x\": 122, \"y\": 245 }\n  ],\n  \"color\": \"#FF0000\",\n  \"stroke\": 2\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Cp>ประเภท Event ที่รองรับ:\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ccode inline=\"\">draw\u003C\u002Fcode> (pen\u002Fbrush)\u003C\u002Fli>\u003Cli>\u003Ccode inline=\"\">shape\u003C\u002Fcode> (rectangle, circle, arrow)\u003C\u002Fli>\u003Cli>\u003Ccode inline=\"\">cursor\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>\u003Ccode inline=\"\">undo\u003C\u002Fcode>, \u003Ccode inline=\"\">redo\u003C\u002Fcode>\u003C\u002Fli>\u003Cli>\u003Ccode inline=\"\">clear\u003C\u002Fcode>\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>⚙️ 2. โครงสร้างข้อมูลฝั่ง Server (Go)\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext language-go\">type DrawEvent struct {\n\tBoardID string      `json:\"board_id\"`\n\tUserID  string      `json:\"user_id\"`\n\tType    string      `json:\"type\"`\n\tTool    string      `json:\"tool\"`\n\tPoints  []Point     `json:\"points,omitempty\"`\n\tColor   string      `json:\"color,omitempty\"`\n\tStroke  int         `json:\"stroke,omitempty\"`\n}\n\ntype Point struct {\n\tX float64 `json:\"x\"`\n\tY float64 `json:\"y\"`\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Cp>จัดการ Room แยกตาม \u003Ccode inline=\"\">board_id\u003C\u002Fcode> เพื่อให้ส่งเฉพาะกลุ่มที่ใช้งานร่วมกัน\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>🔄 3. Real-time Sync ด้วย WebSocket\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext language-go\">var boards = make(map[string]map[*websocket.Conn]bool)\n\nfunc handleWhiteboard(conn *websocket.Conn, boardID string) {\n\tif boards[boardID] == nil {\n\t\tboards[boardID] = make(map[*websocket.Conn]bool)\n\t}\n\tboards[boardID][conn] = true\n\n\tdefer func() {\n\t\tdelete(boards[boardID], conn)\n\t\tconn.Close()\n\t}()\n\n\tfor {\n\t\tvar event DrawEvent\n\t\tif err := conn.ReadJSON(&event); err != nil {\n\t\t\treturn\n\t\t}\n\t\tbroadcast(boardID, event)\n\t}\n}\n\nfunc broadcast(boardID string, event DrawEvent) {\n\tfor c := range boards[boardID] {\n\t\tc.WriteJSON(event)\n\t}\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Cp>ผลลัพธ์: ผู้ใช้ A วาด → ทุกคนเห็นทันที\u003Cbr>Latency ต่ำ (ระดับ millisecond)\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>🖱️ 4. Mouse \u002F Cursor Sync\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>เพื่อแสดงว่า “ใครกำลังทำอะไรอยู่บนกระดาน”\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext language-json\">{\n  \"type\": \"cursor\",\n  \"user_id\": \"user-b\",\n  \"x\": 450,\n  \"y\": 300\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Cul>\u003Cli>Client ส่งตำแหน่งเมาส์ทุก ~50ms\u003C\u002Fli>\u003Cli>Server broadcast → ทุก client แสดงตำแหน่ง cursor\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>↩️ 5. Undo \u002F Redo แบบเรียลไทม์\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>แนวคิด:\u003C\u002Fp>\u003Cul>\u003Cli>ทุก \u003Ccode inline=\"\">draw\u003C\u002Fcode> event = 1 action\u003C\u002Fli>\u003Cli>Stack per board (\u003Ccode inline=\"\">Undo\u003C\u002Fcode>, \u003Ccode inline=\"\">Redo\u003C\u002Fcode>)\u003C\u002Fli>\u003C\u002Ful>\u003Cpre>\u003Ccode class=\"language-plaintext language-go\">type BoardHistory struct {\n\tUndo []DrawEvent\n\tRedo []DrawEvent\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Cp>เมื่อ Undo:\u003C\u002Fp>\u003Cul>\u003Cli>pop จาก undo\u003C\u002Fli>\u003Cli>push เข้า redo\u003C\u002Fli>\u003Cli>broadcast event undo → ทุก client ลบ action ล่าสุด\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>⚡ 6. Performance Optimization\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>สิ่งที่ต้องคำนึงถึงเมื่อระบบมีผู้ใช้งานจำนวนมาก:\u003C\u002Fp>\u003Cul>\u003Cli>ส่งเฉพาะ delta (ไม่ส่งทั้งเส้น)\u003C\u002Fli>\u003Cli>Throttle mouse event (30–60 fps)\u003C\u002Fli>\u003Cli>Batch event ที่เกิดถี่ ๆ\u003C\u002Fli>\u003Cli>ใช้ Binary Protocol สำหรับ board ขนาดใหญ่\u003C\u002Fli>\u003Cli>แยก layer canvas (background \u002F drawing \u002F cursor)\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>🔐 7. Security & Access Control\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>ระบบควรมี:\u003C\u002Fp>\u003Cul>\u003Cli>Board Permission (read \u002F write)\u003C\u002Fli>\u003Cli>Rate Limit event ต่อวินาที\u003C\u002Fli>\u003Cli>Validate Shape Data (กัน payload แปลก)\u003C\u002Fli>\u003Cli>ป้องกัน flood draw \u002F spam\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>🚀 ท้าให้ลอง!\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>Mini Project:\u003C\u002Fp>\u003Cul>\u003Cli>วาดพร้อมกัน 2–3 คน\u003C\u002Fli>\u003Cli>Sync cursor แบบ real-time\u003C\u002Fli>\u003Cli>Undo \u002F Redo ทันที\u003C\u002Fli>\u003Cli>เปิดหลาย tab → ต้อง sync กันเป๊ะ!\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Cp>✅ ถ้าทำได้ครบ = คุณเข้าใจระบบ Real-time Drawing อย่างแท้จริง 🎯\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Chr>\u003Cp> \u003C\u002Fp>\u003Ch2>🔮 EP ถัดไป: EP.121 Deploy WebSocket Server บน Kubernetes\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>ตอนหน้า เราจะนำ WebSocket Server ของคุณเข้าสู่โลก Production จริงจัง\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Cp>คุณจะได้เรียนรู้:\u003C\u002Fp>\u003Cul>\u003Cli>การ Deploy ด้วย Kubernetes\u003C\u002Fli>\u003Cli>Load Balancer และ Sticky Session\u003C\u002Fli>\u003Cli>การรองรับ Auto Scaling สำหรับ WebSocket\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Cdiv class=\"raw-html-embed\">\u003Cdiv style=\"margin:0 0 6px 0; font-weight:700;\">อ่านบทความ Series อื่นๆ:\u003C\u002Fdiv>\n\u003Cul style=\"list-style:none; padding:0; margin:0; line-height:1.4;\">\n  \u003Cli style=\"margin:0;\">\u003Ca href=\"\u002Fblogs\u002Fcategories\u002FGolang\" title=\"Golang The Series\">Golang The Series\u003C\u002Fa>\u003C\u002Fli>\n  \u003Cli style=\"margin:0;\">\u003Ca href=\"\u002Fblogs\u002Fcategories\u002FJS2GO\" title=\"JS2GO\">JS2GO\u003C\u002Fa>\u003C\u002Fli>\n  \u003Cli style=\"margin:0;\">\u003Ca href=\"\u002Fblogs\u002Fcategories\u002FTailwind%20CSS\" title=\"10 Ep ที่จะให้คุณเป็นมือโปร Tailwind CSS ในชั่วข้ามคืน\">10 Ep ที่จะให้คุณเป็นมือโปร Tailwind CSS ในชั่วข้ามคืน\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\u003C\u002Fdiv>\u003Cp> \u003C\u002Fp>\u003Cdiv class=\"raw-html-embed\">\n  \u003Cp style=\"margin:0 0 6px 0;\">\u003Cstrong>Follow Us:\u003C\u002Fstrong>\u003C\u002Fp>\n  \u003Cul style=\"list-style:none; padding:0; margin:0; line-height: 0.4;\">\n    \u003Cli style=\"display:flex; align-items:center; gap:6px; margin:0;\">\n      \n      \u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"#1877F2\" aria-hidden=\"true\">\n        \u003Cpath d=\"M22 12.07C22 6.48 17.52 2 11.93 2S2 6.48 2 12.07c0 5 3.66 9.14 8.44 9.93v-7.02H7.9v-2.91h2.54V9.41c0-2.5 1.49-3.88 3.77-3.88 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56v1.87h2.78l-.44 2.91h-2.34V22c4.78-.79 8.44-4.93 8.44-9.93Z\">\u003C\u002Fpath>\n      \u003C\u002Fsvg>\n      \u003Ca href=\"https:\u002F\u002Fwww.facebook.com\u002Fsuperdev.academy.th\" target=\"_blank\" rel=\"nofollow noopener\" title=\"Follow Superdev Academy on Facebook\">Facebook: Superdev Academy\u003C\u002Fa>\n    \u003C\u002Fli>\n\n    \u003Cli style=\"display:flex; align-items:center; gap:6px; margin:0;\">\n      \n      \u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"#FF0000\" aria-hidden=\"true\">\n        \u003Cpath d=\"M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2 31.5 31.5 0 0 0 0 12a31.5 31.5 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1A31.5 31.5 0 0 0 24 12a31.5 31.5 0 0 0-.5-5.8ZM9.75 15.02V8.98L15.5 12l-5.75 3.02Z\">\u003C\u002Fpath>\n      \u003C\u002Fsvg>\n      \u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002F@SuperdevAcademy\" target=\"_blank\" rel=\"nofollow noopener\" title=\"Watch on YouTube\">YouTube: Superdev Academy\u003C\u002Fa>\n    \u003C\u002Fli>\n\n    \u003Cli style=\"display:flex; align-items:center; gap:6px; margin:0;\">\n      \n      \u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"#E4405F\" aria-hidden=\"true\">\n        \u003Cpath d=\"M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm10 2H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3Zm-5 3.5A5.5 5.5 0 1 1 6.5 13 5.5 5.5 0 0 1 12 7.5Zm0 2A3.5 3.5 0 1 0 15.5 13 3.5 3.5 0 0 0 12 9.5Zm5.75-2.75a1.25 1.25 0 1 1-1.25 1.25 1.25 1.25 0 0 1 1.25-1.25Z\">\u003C\u002Fpath>\n      \u003C\u002Fsvg>\n      \u003Ca href=\"https:\u002F\u002Fwww.instagram.com\u002Fsuperdevacademy\u002F?hl=en target=\" _blank\"=\"\" rel=\"nofollow noopener\" title=\"See behind-the-scenes on Instagram\">Instagram: Superdev Academy\u003C\u002Fa>\n    \u003C\u002Fli>\n\n    \u003Cli style=\"display:flex; align-items:center; gap:6px; margin:0;\">\n      \n      \u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"#000000\" aria-hidden=\"true\">\n        \u003Cpath d=\"M21 8.12a6.86 6.86 0 0 1-4.8-2V16a6 6 0 1 1-6-6 5.9 5.9 0 0 1 1.63.23V8.05a9.08 9.08 0 0 1-1.63-.15V4.5a6.86 6.86 0 0 0 4.8 2.05V6.5a6.86 6.86 0 0 0 4.8 1.62ZM9.2 12.5A3.5 3.5 0 1 0 12.7 16V9.94a6 6 0 0 1-1.63-.27v3.95a3.5 3.5 0 0 1-1.87 3.17 3.5 3.5 0 0 1-4.78-3.23 3.5 3.5 0 0 1 4.78-3.06Z\">\u003C\u002Fpath>\n      \u003C\u002Fsvg>\n      \u003Ca href=\"https:\u002F\u002Fwww.tiktok.com\u002F@superdevacademy\" target=\"_blank\" rel=\"nofollow noopener\" title=\"Watch short tips on TikTok\">TikTok: @superdevacademy\u003C\u002Fa>\n    \u003C\u002Fli>\n\n    \u003Cli style=\"display:flex; align-items:center; gap:6px; margin:0;\">\n      \n      \u003Csvg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"#111827\" aria-hidden=\"true\">\n        \u003Cpath d=\"M12 2a10 10 0 1 0 10 10A10.01 10.01 0 0 0 12 2Zm6.93 6h-3.26a15.6 15.6 0 0 0-1.39-3.62A8.03 8.03 0 0 1 18.93 8ZM12 4c.73.93 1.7 2.74 2.2 4H9.8C10.3 6.74 11.27 4.93 12 4ZM8.72 4.38A15.6 15.6 0 0 0 7.32 8H4.07a8.03 8.03 0 0 1 4.65-3.62ZM4.07 16h3.25a15.6 15.6 0 0 0 1.4 3.62A8.03 8.03 0 0 1 4.07 16ZM12 20c-.73-.93-1.7-2.74-2.2-4h4.4C13.7 17.26 12.73 19.07 12 20Zm3.28-.38A15.6 15.6 0 0 0 16.68 16h3.25a8.03 8.03 0 0 1-4.65 3.62ZM20 14h-3.54a13.8 13.8 0 0 1-.26-4H20a7.98 7.98 0 0 1 0 4Zm-12.2 0H4a7.98 7.98 0 0 1 0-4h3.54a13.8 13.8 0 0 1-.26 4Zm2 .5h4.4a17.8 17.8 0 0 1-.72-4.5c0-1.58.25-3.1.72-4.5H9.8a17.8 17.8 0 0 1 .72 4.5c0 1.58-.25 3.1-.72 4.5Z\">\u003C\u002Fpath>\n      \u003C\u002Fsvg>\n      \u003Ca href=\"https:\u002F\u002Fwww.superdevacademy.com\u002F\" target=\"_blank\" rel=\"noopener\" title=\"Visit the official website of Superdev Academy\">Official Website: Superdev Academy.com\u003C\u002Fa>\n    \u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Fdiv>\u003Cp> \u003C\u002Fp>","cover_image_ep_siccboj32o.onwithWebSocket.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002Fb3o64zx8imsejrd\u002Fcover_image_ep_siccboj32o.onwithWebSocket.webp","2026-03-04 08:44:52.925Z","",{"keywords":15,"locale":43,"school_blog":53},[16,23,28,33,38],{"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:44:51.471Z","hlato0hav8vo8wm","Golang The Series","2026-04-10 16:12:50.850Z",{"collectionId":17,"collectionName":18,"created":29,"created_by":13,"id":30,"name":31,"updated":32,"updated_by":13},"2026-03-04 08:20:14.253Z","ah6lvy4x8qe08l5","Golang","2026-04-10 16:07:26.172Z",{"collectionId":17,"collectionName":18,"created":34,"created_by":13,"id":35,"name":36,"updated":37,"updated_by":13},"2026-03-04 08:20:11.547Z","ey3puyme01a9bsw","Go","2026-04-10 16:07:25.893Z",{"collectionId":17,"collectionName":18,"created":39,"created_by":13,"id":40,"name":41,"updated":42,"updated_by":13},"2026-03-04 08:44:51.688Z","ztv5f26qud778za","whiteboard","2026-04-10 16:12:50.940Z",{"code":44,"collectionId":45,"collectionName":46,"created":47,"flag":48,"id":49,"is_default":50,"label":51,"updated":52},"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":54,"collectionId":55,"collectionName":56,"expand":57,"id":70,"views":71},"wqxt7ag2gn7xcmk","pbc_2105096300","school_blogs",{"category":58},{"blogIds":59,"collectionId":60,"collectionName":61,"created":62,"created_by":13,"id":54,"image":63,"image_alt":13,"image_path":64,"label":65,"name":26,"priority":66,"publish_at":67,"scheduled_at":13,"status":68,"updated":69,"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":26,"th":26},1,"2026-03-16 04:39:38.440Z","published","2026-04-25 02:32:15.470Z","clsm7oxkvsptxhx",236,"b3o64zx8imsejrd",[20,25,30,35,40],"2025-12-29 04:41:19.809Z","ออกแบบระบบ Whiteboard ที่รองรับการวาดพร้อมกันหลายคนแบบเรียลไทม์ ด้วย Go และ WebSocket พร้อมแนวคิด undo\u002Fredo และ performance optimization","ep-120-realtime-whiteboard-drawing-websocket","2026-04-25 02:47:46.937Z",{"th":76}]