[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-blogs-en-1-1-all-ep-120-realtime-whiteboard-drawing-websocket-all--*":3,"academy-blog-faqs-clsm7oxkvsptxhx-en":85,"academy-blog-translations-clsm7oxkvsptxhx":86},{"data":4,"page":71,"perPage":71,"totalItems":71,"totalPages":71},[5],{"alt":6,"collectionId":7,"collectionName":8,"content":9,"cover_image":10,"cover_image_l_url":11,"cover_image_m_url":12,"cover_image_path":13,"cover_image_s_url":14,"created":15,"created_by":16,"expand":17,"id":79,"keywords":80,"locale":52,"published_at":81,"scheduled_at":60,"school_blog":75,"short_description":82,"status":73,"title":6,"updated":83,"updated_by":84,"slug":76,"views":78},"EP.120 Whiteboard & Real-time Drawing Synchronization with WebSocket","sclblg987654321","school_blog_translations","\u003Cp data-start=\"237\" data-end=\"382\">After building a collaborative document editor using text sync, it’s time to move toward something even more challenging real-time drawing.\u003C\u002Fp>\u003Cp data-start=\"237\" data-end=\"382\"> \u003C\u002Fp>\u003Cp data-start=\"384\" data-end=\"484\">Apps like Miro, FigJam, and Excalidraw must support highly interactive features such as:\u003C\u002Fp>\u003Cul data-start=\"486\" data-end=\"681\">\u003Cli data-start=\"486\" data-end=\"529\">\u003Cp data-start=\"488\" data-end=\"529\">Multiple users drawing at the same time\u003C\u002Fp>\u003C\u002Fli>\u003Cli data-start=\"530\" data-end=\"578\">\u003Cp data-start=\"532\" data-end=\"578\">Real-time shape, stroke, and cursor movement\u003C\u002Fp>\u003C\u002Fli>\u003Cli data-start=\"579\" data-end=\"631\">\u003Cp data-start=\"581\" data-end=\"631\">Shared canvas state that stays perfectly in sync\u003C\u002Fp>\u003C\u002Fli>\u003Cli data-start=\"632\" data-end=\"657\">\u003Cp data-start=\"634\" data-end=\"657\">Instant Undo\u002FRedo\u003C\u002Fp>\u003C\u002Fli>\u003Cli data-start=\"658\" data-end=\"681\">\u003Cp data-start=\"660\" data-end=\"681\">Ultra-low latency\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Cp data-start=\"660\" data-end=\"681\"> \u003C\u002Fp>\u003Cp data-start=\"683\" data-end=\"845\">In this article, you'll learn how to build a real-time Whiteboard System using Go + WebSocket, with architecture and code that’s ready for production use.\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2 data-start=\"852\" data-end=\"886\">🧠 System Architecture Overview\u003C\u002Fh2>\u003Cdiv class=\"contain-inline-size rounded-2xl corner-superellipse\u002F1.1 relative bg-token-sidebar-surface-primary\">\u003Cdiv class=\"@w-xl\u002Fmain:top-9 sticky top-[calc(--spacing(9)+var(--header-height))]\">\u003Cdiv class=\"absolute end-0 bottom-0 flex h-9 items-center pe-2\">\u003Cdiv class=\"bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs\"> \u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cpre>\u003Ccode class=\"language-plaintext\">Client (Canvas)\n  ↕ WebSocket\nWhiteboard Server (Go)\n  ↕ Broadcast\nAll clients in the same board\n\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cp> \u003C\u002Fp>\u003Ch3 data-start=\"994\" data-end=\"1012\">Key Components\u003C\u002Fh3>\u003Cul data-start=\"1014\" data-end=\"1281\">\u003Cli data-start=\"1014\" data-end=\"1063\">\u003Cp data-start=\"1016\" data-end=\"1063\">Canvas State – Current state of the board\u003C\u002Fp>\u003C\u002Fli>\u003Cli data-start=\"1064\" data-end=\"1109\">\u003Cp data-start=\"1066\" data-end=\"1109\">Draw Events – Stroke or shape actions\u003C\u002Fp>\u003C\u002Fli>\u003Cli data-start=\"1110\" data-end=\"1165\">\u003Cp data-start=\"1112\" data-end=\"1165\">Cursor Position – Each user's real-time pointer\u003C\u002Fp>\u003C\u002Fli>\u003Cli data-start=\"1166\" data-end=\"1217\">\u003Cp data-start=\"1168\" data-end=\"1217\">History Stack – For Undo\u002FRedo functionality\u003C\u002Fp>\u003C\u002Fli>\u003Cli data-start=\"1218\" data-end=\"1281\">\u003Cp data-start=\"1220\" data-end=\"1281\">Room (Board) – Scoped by \u003Ccode data-start=\"1249\" data-end=\"1259\">board_id\u003C\u002Fcode> for isolated sessions\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2 data-start=\"1288\" data-end=\"1322\">✏️ 1. Drawing Event Data Format\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp data-start=\"1324\" data-end=\"1387\">Rather than syncing the whole canvas, we only send draw events:\u003C\u002Fp>\u003Cdiv class=\"contain-inline-size rounded-2xl corner-superellipse\u002F1.1 relative bg-token-sidebar-surface-primary\">\u003Cpre>\u003Ccode class=\"language-plaintext\">{\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 } \u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cp data-start=\"1601\" data-end=\"1631\"> \u003C\u002Fp>\u003Cp data-start=\"1601\" data-end=\"1631\">Supported event types include:\u003C\u002Fp>\u003Cul data-start=\"1633\" data-end=\"1737\">\u003Cli data-start=\"1633\" data-end=\"1656\">\u003Cp data-start=\"1635\" data-end=\"1656\">\u003Ccode data-start=\"1635\" data-end=\"1641\">draw\u003C\u002Fcode> (pen, brush)\u003C\u002Fp>\u003C\u002Fli>\u003Cli data-start=\"1633\" data-end=\"1656\">\u003Cp data-start=\"1635\" data-end=\"1656\">\u003Ccode data-start=\"1659\" data-end=\"1666\">shape\u003C\u002Fcode> (rectangle, circle, arrow)\u003C\u002Fp>\u003C\u002Fli>\u003Cli data-start=\"1696\" data-end=\"1708\">\u003Cp data-start=\"1698\" data-end=\"1708\">\u003Ccode data-start=\"1698\" data-end=\"1706\">cursor\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003Cli data-start=\"1709\" data-end=\"1727\">\u003Cp data-start=\"1711\" data-end=\"1727\">\u003Ccode data-start=\"1711\" data-end=\"1717\">undo\u003C\u002Fcode>, \u003Ccode data-start=\"1719\" data-end=\"1725\">redo\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003Cli data-start=\"1728\" data-end=\"1737\">\u003Cp data-start=\"1730\" data-end=\"1737\">\u003Ccode data-start=\"1730\" data-end=\"1737\">clear\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2 data-start=\"1744\" data-end=\"1785\">⚙️ 2. Server-side Data Structures (Go)\u003C\u002Fh2>\u003Cdiv class=\"contain-inline-size rounded-2xl corner-superellipse\u002F1.1 relative bg-token-sidebar-surface-primary\">\u003Cdiv class=\"@w-xl\u002Fmain:top-9 sticky top-[calc(--spacing(9)+var(--header-height))]\">\u003Cdiv class=\"absolute end-0 bottom-0 flex h-9 items-center pe-2\">\u003Cdiv class=\"bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs\"> \u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cpre>\u003Ccode class=\"language-plaintext\">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>\u003C\u002Fdiv>\u003Cp data-start=\"2178\" data-end=\"2266\"> \u003C\u002Fp>\u003Cp data-start=\"2178\" data-end=\"2266\">Each whiteboard session is managed via \u003Ccode data-start=\"2217\" data-end=\"2227\">board_id\u003C\u002Fcode> to broadcast only within its own room.\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2 data-start=\"2273\" data-end=\"2306\">🔄 3. Real-time WebSocket Sync\u003C\u002Fh2>\u003Cdiv class=\"contain-inline-size rounded-2xl corner-superellipse\u002F1.1 relative bg-token-sidebar-surface-primary\">\u003Cdiv class=\"@w-xl\u002Fmain:top-9 sticky top-[calc(--spacing(9)+var(--header-height))]\">\u003Cdiv class=\"absolute end-0 bottom-0 flex h-9 items-center pe-2\">\u003Cdiv class=\"bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs\"> \u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cpre>\u003Ccode class=\"language-plaintext\">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>\u003C\u002Fdiv>\u003Cp data-start=\"2855\" data-end=\"2965\"> \u003C\u002Fp>\u003Cp data-start=\"2855\" data-end=\"2965\">Result: User A draws something → all users see it instantly\u003C\u002Fp>\u003Cp data-start=\"2855\" data-end=\"2965\">Latency: Millisecond-level performance\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2 data-start=\"2972\" data-end=\"3011\">🖱️ 4. Real-time Mouse \u002F Cursor Sync\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp data-start=\"3013\" data-end=\"3057\">To show what others are doing on the canvas:\u003C\u002Fp>\u003Cdiv class=\"contain-inline-size rounded-2xl corner-superellipse\u002F1.1 relative bg-token-sidebar-surface-primary\">\u003Cpre>\u003Ccode class=\"language-plaintext\">{\n  \"type\": \"cursor\",\n  \"user_id\": \"user-b\",\n  \"x\": 450,\n  \"y\": 300 } \u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cp data-start=\"3144\" data-end=\"3186\"> \u003C\u002Fp>\u003Cul data-start=\"3142\" data-end=\"3238\">\u003Cli data-start=\"3142\" data-end=\"3186\">\u003Cp data-start=\"3144\" data-end=\"3186\">Clients send cursor position every ~50ms\u003C\u002Fp>\u003C\u002Fli>\u003Cli data-start=\"3187\" data-end=\"3238\">\u003Cp data-start=\"3189\" data-end=\"3238\">Server broadcasts to all clients in the same room\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2 data-start=\"3245\" data-end=\"3275\">↩️ 5. Real-time Undo \u002F Redo\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Ch3 data-start=\"3277\" data-end=\"3289\">Concept:\u003C\u002Fh3>\u003Cul data-start=\"3291\" data-end=\"3360\">\u003Cli data-start=\"3291\" data-end=\"3323\">\u003Cp data-start=\"3293\" data-end=\"3323\">Each draw event = one action\u003C\u002Fp>\u003C\u002Fli>\u003Cli data-start=\"3324\" data-end=\"3360\">\u003Cp data-start=\"3326\" data-end=\"3360\">Maintain a history stack per board\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Cdiv class=\"contain-inline-size rounded-2xl corner-superellipse\u002F1.1 relative bg-token-sidebar-surface-primary\">\u003Cdiv class=\"@w-xl\u002Fmain:top-9 sticky top-[calc(--spacing(9)+var(--header-height))]\">\u003Cdiv class=\"absolute end-0 bottom-0 flex h-9 items-center pe-2\">\u003Cdiv class=\"bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs\"> \u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cpre>\u003Ccode class=\"language-plaintext\">type BoardHistory struct {\n\tUndo []DrawEvent\n\tRedo []DrawEvent\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cp data-start=\"3438\" data-end=\"3447\"> \u003C\u002Fp>\u003Ch3>Undo:\u003C\u002Fh3>\u003Cul data-start=\"3449\" data-end=\"3537\">\u003Cli data-start=\"3449\" data-end=\"3484\">\u003Cp data-start=\"3451\" data-end=\"3484\">Pop from \u003Ccode data-start=\"3460\" data-end=\"3466\">undo\u003C\u002Fcode>, push to \u003Ccode data-start=\"3476\" data-end=\"3482\">redo\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\u003Cli data-start=\"3485\" data-end=\"3537\">\u003Cp data-start=\"3487\" data-end=\"3537\">Broadcast to all clients to remove the last action\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2 data-start=\"3544\" data-end=\"3576\">⚡ 6. Performance Optimization\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp data-start=\"3578\" data-end=\"3615\">Important when scaling to many users:\u003C\u002Fp>\u003Cul data-start=\"3617\" data-end=\"3838\">\u003Cli data-start=\"3617\" data-end=\"3661\">\u003Cp data-start=\"3619\" data-end=\"3661\">Send only deltas, not entire strokes\u003C\u002Fp>\u003C\u002Fli>\u003Cli data-start=\"3662\" data-end=\"3705\">\u003Cp data-start=\"3664\" data-end=\"3705\">Throttle cursor updates (30–60 fps)\u003C\u002Fp>\u003C\u002Fli>\u003Cli data-start=\"3706\" data-end=\"3735\">\u003Cp data-start=\"3708\" data-end=\"3735\">Batch frequent events\u003C\u002Fp>\u003C\u002Fli>\u003Cli data-start=\"3736\" data-end=\"3780\">\u003Cp data-start=\"3738\" data-end=\"3780\">Use binary protocol for large boards\u003C\u002Fp>\u003C\u002Fli>\u003Cli data-start=\"3781\" data-end=\"3838\">\u003Cp data-start=\"3783\" data-end=\"3838\">Split canvas into layers: background \u002F drawing \u002F cursor\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2 data-start=\"3845\" data-end=\"3879\">🔐 7. Security & Access Control\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp data-start=\"3881\" data-end=\"3908\">Your system should include:\u003C\u002Fp>\u003Cul data-start=\"3910\" data-end=\"4074\">\u003Cli data-start=\"3910\" data-end=\"3957\">\u003Cp data-start=\"3912\" data-end=\"3957\">Board permissions (read \u002F write access)\u003C\u002Fp>\u003C\u002Fli>\u003Cli data-start=\"3958\" data-end=\"3986\">\u003Cp data-start=\"3960\" data-end=\"3986\">Rate limits per user\u003C\u002Fp>\u003C\u002Fli>\u003Cli data-start=\"3987\" data-end=\"4039\">\u003Cp data-start=\"3989\" data-end=\"4039\">Shape validation to avoid malformed payloads\u003C\u002Fp>\u003C\u002Fli>\u003Cli data-start=\"4040\" data-end=\"4074\">\u003Cp data-start=\"4042\" data-end=\"4074\">Protection against spam\u002Fflooding\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2 data-start=\"4081\" data-end=\"4109\">🚀 Mini Project Challenge\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp data-start=\"4111\" data-end=\"4150\">Try building a real demo that supports:\u003C\u002Fp>\u003Cul data-start=\"4152\" data-end=\"4274\">\u003Cli data-start=\"4152\" data-end=\"4186\">\u003Cp data-start=\"4154\" data-end=\"4186\">2–3 users drawing in real-time\u003C\u002Fp>\u003C\u002Fli>\u003Cli data-start=\"4187\" data-end=\"4202\">\u003Cp data-start=\"4189\" data-end=\"4202\">Cursor sync\u003C\u002Fp>\u003C\u002Fli>\u003Cli data-start=\"4203\" data-end=\"4224\">\u003Cp data-start=\"4205\" data-end=\"4224\">Instant Undo\u002FRedo\u003C\u002Fp>\u003C\u002Fli>\u003Cli data-start=\"4225\" data-end=\"4274\">\u003Cp data-start=\"4227\" data-end=\"4274\">Open multiple tabs they must stay 100% synced\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Cp data-start=\"4227\" data-end=\"4274\"> \u003C\u002Fp>\u003Cp data-start=\"4276\" data-end=\"4367\">✅ If you can build all this, you’ve truly mastered real-time drawing synchronization 🎯\u003C\u002Fp>\u003Cp data-start=\"4276\" data-end=\"4367\"> \u003C\u002Fp>\u003Chr>\u003Cp> \u003C\u002Fp>\u003Ch2 data-start=\"4374\" data-end=\"4442\">🔮 Coming Next: EP.121 Deploying WebSocket Server on Kubernetes\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp data-start=\"4444\" data-end=\"4490\">In the next episode, we’ll go full production.\u003C\u002Fp>\u003Cp data-start=\"4492\" data-end=\"4512\">You’ll learn how to:\u003C\u002Fp>\u003Cul data-start=\"4514\" data-end=\"4681\">\u003Cli data-start=\"4514\" data-end=\"4566\">\u003Cp data-start=\"4516\" data-end=\"4566\">Deploy your WebSocket Server with Kubernetes\u003C\u002Fp>\u003C\u002Fli>\u003Cli data-start=\"4567\" data-end=\"4616\">\u003Cp data-start=\"4569\" data-end=\"4616\">Set up Load Balancer with Sticky Sessions\u003C\u002Fp>\u003C\u002Fli>\u003Cli data-start=\"4617\" data-end=\"4681\">\u003Cp data-start=\"4619\" data-end=\"4681\">Implement Auto-Scaling to support thousands of connections\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Cp data-start=\"4683\" data-end=\"4697\">Stay tuned! 🚀\u003C\u002Fp>\u003Cp data-start=\"4683\" data-end=\"4697\"> \u003C\u002Fp>\u003Cdiv class=\"raw-html-embed\">\u003Cdiv style=\"margin:0 0 6px 0; font-weight:700;\">Read more:\u003C\u002Fdiv>\n\u003Cul style=\"list-style:none; padding:0; margin:0; line-height:1.4;\">\n  \u003Cli style=\"margin:0;\">\u003Ca href=\"\u002Fen\u002Fblogs\u002Fcategories\u002FGolang\" title=\"Golang The Series\">Golang The Series\u003C\u002Fa>\u003C\u002Fli>\n  \u003Cli style=\"margin:0;\">\u003Ca href=\"\u002Fen\u002Fblogs\u002Fcategories\u002FJS2GO\" title=\"JS2GO\">JS2GO\u003C\u002Fa>\u003C\u002Fli>\n  \u003Cli style=\"margin:0;\">\u003Ca href=\"\u002Fen\u002Fblogs\u002Fcategories\u002FTailwind%20CSS\" title=\"Tailwind CSS\">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=\"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=\"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\" target=\"_blank\" rel=\"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=\"noopener\" title=\"Watch short tips on TikTok\">TikTok: @superdevacademy\u003C\u002Fa>\n    \u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Fdiv>\u003Cp> \u003C\u002Fp>","cover_image_ep_tlqmwo22d8.onwithWebSocket.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002Fahq5ev6lnmk68vh\u002Fl\u002Fcover_image_ep_tlqmwo22d8.onwithWebSocket.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002Fahq5ev6lnmk68vh\u002Fm\u002Fcover_image_ep_tlqmwo22d8.onwithWebSocket.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002Fahq5ev6lnmk68vh\u002Fcover_image_ep_tlqmwo22d8.onwithWebSocket.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002Fahq5ev6lnmk68vh\u002Fs\u002Fcover_image_ep_tlqmwo22d8.onwithWebSocket.webp","2026-03-04 08:44:52.189Z","76qprkevbgfdps8",{"keywords":18,"locale":46,"school_blog":56},[19,26,31,36,41],{"collectionId":20,"collectionName":21,"created":22,"created_by":16,"id":23,"name":24,"updated":25,"updated_by":16},"sclkey987654321","school_keywords","2026-03-04 08:44:51.471Z","hlato0hav8vo8wm","Golang The Series","2026-06-07 06:46:40.040Z",{"collectionId":20,"collectionName":21,"created":27,"created_by":16,"id":28,"name":29,"updated":30,"updated_by":16},"2026-03-04 08:34:00.920Z","ecac9y661or1xka","WebSocket","2026-06-07 06:45:55.734Z",{"collectionId":20,"collectionName":21,"created":32,"created_by":16,"id":33,"name":34,"updated":35,"updated_by":16},"2026-03-04 08:20:14.253Z","ah6lvy4x8qe08l5","Golang","2026-06-07 06:45:08.193Z",{"collectionId":20,"collectionName":21,"created":37,"created_by":16,"id":38,"name":39,"updated":40,"updated_by":16},"2026-03-04 08:20:11.547Z","ey3puyme01a9bsw","Go","2026-06-07 06:45:07.798Z",{"collectionId":20,"collectionName":21,"created":42,"created_by":16,"id":43,"name":44,"updated":45,"updated_by":16},"2026-03-04 08:44:51.688Z","ztv5f26qud778za","whiteboard","2026-06-07 06:46:40.164Z",{"code":47,"collectionId":48,"collectionName":49,"created":50,"flag":51,"id":52,"is_default":53,"label":54,"updated":55},"en","pbc_1989393366","locales","2026-01-22 11:00:02.726Z","twemoji:flag-united-states","qv9c1llfov2d88z",false,"English","2026-04-10 15:42:46.825Z",{"category":57,"collectionId":58,"collectionName":59,"created":60,"expand":61,"id":75,"slug":76,"updated":77,"views":78},"wqxt7ag2gn7xcmk","pbc_2105096300","school_blogs","",{"category":62},{"blogIds":63,"collectionId":64,"collectionName":65,"created":66,"created_by":16,"id":57,"image":67,"image_alt":60,"image_path":68,"image_s_url":69,"label":70,"name":24,"priority":71,"publish_at":72,"scheduled_at":60,"status":73,"updated":74,"updated_by":16},[],"sclcatblg987654321","school_category_blogs","2026-03-04 08:33:53.210Z","59ty92ns80w_15oc1implw_bj2o4tjgh4.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclcatblg987654321\u002Fwqxt7ag2gn7xcmk\u002F59ty92ns80w_15oc1implw_bj2o4tjgh4.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclcatblg987654321\u002Fwqxt7ag2gn7xcmk\u002Fs\u002F59ty92ns80w_15oc1implw_bj2o4tjgh4.webp",{"en":24,"th":24},1,"2026-03-16 04:39:38.440Z","published","2026-08-18 14:48:36.739Z","clsm7oxkvsptxhx","ep-120-realtime-whiteboard-drawing-websocket","2026-10-20 08:36:33.373Z",246,"ahq5ev6lnmk68vh",[23,28,33,38,43],"2025-12-29 04:41:05.049Z","Learn how to build a real-time whiteboard system that supports multi-user drawing, cursor sync, and undo\u002Fredo using Go and WebSocket","2026-10-14 03:45:33.373Z","ebkf8ra4nd55ual",[],{"th":76,"en":76}]