[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-blogs-th-1-1-all-websocket-real-time-notification-ep112-all--*":3,"academy-blog-translations-8g70iqmnsdxbwpb":90},{"data":4,"page":77,"perPage":77,"totalItems":77,"totalPages":77},[5],{"alt":6,"collectionId":7,"collectionName":8,"content":9,"cover_image":10,"cover_image_path":11,"created":12,"created_by":13,"expand":14,"id":85,"keywords":86,"locale":59,"published_at":87,"scheduled_at":13,"school_blog":81,"short_description":88,"status":79,"title":6,"updated":89,"updated_by":13,"slug":82,"views":84},"EP.112 การสร้างระบบ Notification แบบเรียลไทม์ (Real-time Notification System)","sclblg987654321","school_blog_translations","\u003Cp>ในระบบเรียลไทม์ (Real-time System) ผู้ใช้คาดหวังว่า \"ทุกสิ่งต้องอัปเดตทันที\" ไม่ว่าจะเป็นข้อความใหม่ คำสั่งซื้อ สถานะออเดอร์ หรือการแจ้งเตือนต่าง ๆ หนึ่งในเทคโนโลยีที่ทำให้สิ่งนี้เป็นจริงคือ WebSocket ซึ่งสามารถ “push” ข้อมูลจากฝั่ง Server ไปยัง Client โดยไม่ต้องรอให้ผู้ใช้รีเฟรช\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Cp>ใน EP นี้ เราจะสร้าง Real-time Notification System ด้วย Go และ WebSocket เพื่อให้ระบบของคุณสามารถแจ้งเตือนผู้ใช้ “ทันที” เมื่อมี Event สำคัญเกิดขึ้น! 🚀\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>🧩 โครงสร้างของระบบ Notification แบบเรียลไทม์\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext\">Event Source → WebSocket Server → Connected Clients\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Cul>\u003Cli>Event Source: จุดกำเนิดเหตุการณ์ เช่น การสั่งซื้อ การตอบกลับ หรือการแจ้งเตือนจากระบบอื่น\u003C\u002Fli>\u003Cli>WebSocket Server: ทำหน้าที่ส่งข้อความแจ้งเตือนไปยังผู้ใช้แบบ real-time\u003C\u002Fli>\u003Cli>Clients: รับการแจ้งเตือนและแสดงผลบน UI\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Cp>✅ ระบบสามารถรองรับผู้ใช้จำนวนมากและขยายได้ด้วย Redis Pub\u002FSub\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>⚙️ ตัวอย่างการส่ง Notification ด้วย Go\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext language-go\">package main\n\nimport (\n\t\"context\"\n\t\"encoding\u002Fjson\"\n\t\"log\"\n\t\"net\u002Fhttp\"\n\n\t\"github.com\u002Fgorilla\u002Fwebsocket\"\n\t\"github.com\u002Fredis\u002Fgo-redis\u002Fv9\"\n)\n\nvar upgrader = websocket.Upgrader{\n\tCheckOrigin: func(r *http.Request) bool { return true },\n}\n\ntype Notification struct {\n\tUserID  string `json:\"user_id\"`\n\tTitle   string `json:\"title\"`\n\tMessage string `json:\"message\"`\n}\n\nvar (\n\tctx     = context.Background()\n\trdb     = redis.NewClient(&redis.Options{Addr: \"localhost:6379\"})\n\tclients = make(map[*websocket.Conn]string)\n)\n\nfunc handleWebSocket(w http.ResponseWriter, r *http.Request) {\n\tconn, _ := upgrader.Upgrade(w, r, nil)\n\tdefer conn.Close()\n\n\tuserID := r.URL.Query().Get(\"user\")\n\tclients[conn] = userID\n\tdefer delete(clients, conn)\n\n\tfor {\n\t\t_, _, err := conn.ReadMessage()\n\t\tif err != nil {\n\t\t\tbreak\n\t\t}\n\t}\n}\n\nfunc publishNotification(n Notification) {\n\tdata, _ := json.Marshal(n)\n\trdb.Publish(ctx, \"notifications\", data)\n}\n\nfunc subscribeNotifications() {\n\tsub := rdb.Subscribe(ctx, \"notifications\")\n\tch := sub.Channel()\n\n\tfor msg := range ch {\n\t\tvar n Notification\n\t\tjson.Unmarshal([]byte(msg.Payload), &n)\n\t\tfor conn, uid := range clients {\n\t\t\tif uid == n.UserID {\n\t\t\t\tconn.WriteJSON(n)\n\t\t\t}\n\t\t}\n\t}\n}\n\nfunc main() {\n\tgo subscribeNotifications()\n\thttp.HandleFunc(\"\u002Fws\", handleWebSocket)\n\n\tlog.Println(\"🔔 WebSocket Notification Server running on :8080\")\n\thttp.ListenAndServe(\":8080\", nil)\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Cp>✅ เมื่อเรียก \u003Ccode inline=\"\">publishNotification()\u003C\u002Fcode> → ระบบจะส่งข้อความไปยัง Redis\u003Cbr>และทุก instance ที่ subscribe จะ broadcast ข้อความไปยัง client ที่ตรงกับ \u003Ccode inline=\"\">UserID\u003C\u002Fcode>\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>📬 ตัวอย่างการส่ง Event แจ้งเตือนจากระบบอื่น\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>เมื่อต้องการส่งการแจ้งเตือน เช่น:\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext language-go\">publishNotification(Notification{\n\tUserID:  \"u123\",\n\tTitle:   \"คำสั่งซื้อของคุณถูกจัดส่งแล้ว!\",\n\tMessage: \"Tracking number: TH123456789\",\n})\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Cp>✅ ผู้ใช้ที่เชื่อมต่อแบบ real-time จะได้รับ Notification ทันทีบนหน้าจอ\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>🧠 การออกแบบ Notification ในระดับ Production\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cfigure class=\"table\">\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>หมวด\u003C\u002Fth>\u003Cth>แนวทางการออกแบบ\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>Scalability\u003C\u002Ftd>\u003Ctd>ใช้ Redis Pub\u002FSub หรือ Kafka สำหรับ event bus\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Filtering\u003C\u002Ftd>\u003Ctd>ส่งเฉพาะ event ที่เกี่ยวข้องกับผู้ใช้หรือกลุ่ม\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Durability\u003C\u002Ftd>\u003Ctd>บันทึก notification ลงฐานข้อมูลก่อน broadcast\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>UX\u003C\u002Ftd>\u003Ctd>แสดง unread badge, notification history\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Retry\u003C\u002Ftd>\u003Ctd>ส่งซ้ำหาก client reconnect แล้วพลาดข้อความไป\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003C\u002Ffigure>\u003Cp> \u003C\u002Fp>\u003Ch2>💡 เทคนิคเพิ่มประสิทธิภาพ\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cul>\u003Cli>ใช้ Goroutine Pool สำหรับ broadcast ปริมาณมาก\u003C\u002Fli>\u003Cli>Batch หลาย notification เพื่อลดจำนวนรอบการส่ง\u003C\u002Fli>\u003Cli>ใช้ Minified JSON เพื่อลดขนาด payload\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>🚀 ท้าให้ลอง!\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>ลองสร้าง Notification Server ด้วย Go แล้วให้ระบบอื่นยิง Event เข้ามา คุณจะเห็นว่า client ทุกคนได้รับการแจ้งเตือนแบบ เรียลไทม์ พร้อมกัน ⚡\u003C\u002Fp>\u003Cp>นึกภาพว่าคุณสามารถใช้ระบบนี้ได้กับ...\u003C\u002Fp>\u003Cul>\u003Cli>✅ ระบบแชท\u003C\u002Fli>\u003Cli>✅ การแจ้งสถานะคำสั่งซื้อ\u003C\u002Fli>\u003Cli>✅ ระบบแจ้งเตือนของแอดมิน\u003C\u002Fli>\u003C\u002Ful>\u003Cp>ทั้งหมดนี้ใช้ Go เขียนได้ภายในไม่กี่บรรทัด 💬\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Chr>\u003Cp> \u003C\u002Fp>\u003Ch2>🌟 Next EP: EP.113 การสร้างระบบ Chat Multi-room ขั้นสูง\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>ใน EP.113 เราจะยกระดับขึ้นอีกขั้น สู่การสร้างระบบ Chat ที่รองรับ “หลายห้องพร้อมกัน” แบบ Enterprise เรียนรู้การจัดการห้องหลายประเภท การกระจายข้อความระหว่างห้องและการใช้ Redis เพื่อควบคุม communication ได้อย่างมีประสิทธิภาพ! 💥\u003C\u002Fp>\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=\"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?hl=en 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\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>","cover_image_ep_ex8tskqzez.withGoWebSocket.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002Fwbl9d896ederjtt\u002Fcover_image_ep_ex8tskqzez.withGoWebSocket.webp","2026-03-04 08:45:14.603Z","",{"keywords":15,"locale":53,"school_blog":63},[16,23,28,33,38,43,48],{"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:44:48.724Z","s6xhnfomy7n5ycp","WebSocket Server","2026-04-10 16:12:50.171Z",{"collectionId":17,"collectionName":18,"created":24,"created_by":13,"id":25,"name":26,"updated":27,"updated_by":13},"2026-03-04 08:45:13.969Z","pyniezbvfdbyuyc","real-time notifications","2026-04-10 16:12:56.096Z",{"collectionId":17,"collectionName":18,"created":29,"created_by":13,"id":30,"name":31,"updated":32,"updated_by":13},"2026-03-04 08:34:10.254Z","rss87kgvhtvkri1","Redis Pub\u002FSub","2026-04-10 16:08:08.714Z",{"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:34:00.920Z","ecac9y661or1xka","WebSocket","2026-04-10 16:08:05.227Z",{"collectionId":17,"collectionName":18,"created":44,"created_by":13,"id":45,"name":46,"updated":47,"updated_by":13},"2026-03-04 08:45:13.578Z","qwq1kseajvv4cne","notification system","2026-04-10 16:12:55.954Z",{"collectionId":17,"collectionName":18,"created":49,"created_by":13,"id":50,"name":51,"updated":52,"updated_by":13},"2026-03-04 08:45:14.176Z","90clm03jhn4xsnp","Notification","2026-04-10 16:12:56.243Z",{"code":54,"collectionId":55,"collectionName":56,"created":57,"flag":58,"id":59,"is_default":60,"label":61,"updated":62},"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":64,"collectionId":65,"collectionName":66,"created":13,"expand":67,"id":81,"slug":82,"updated":83,"views":84},"wqxt7ag2gn7xcmk","pbc_2105096300","school_blogs",{"category":68},{"blogIds":69,"collectionId":70,"collectionName":71,"created":72,"created_by":13,"id":64,"image":73,"image_alt":13,"image_path":74,"label":75,"name":76,"priority":77,"publish_at":78,"scheduled_at":13,"status":79,"updated":80,"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":76,"th":76},"Golang The Series",1,"2026-03-16 04:39:38.440Z","published","2026-04-25 02:32:15.470Z","8g70iqmnsdxbwpb","websocket-real-time-notification-ep112","2026-05-12 02:24:32.408Z",340,"wbl9d896ederjtt",[20,25,30,35,40,45,50],"2025-12-01 04:20:07.889Z","เรียนรู้วิธีสร้างระบบ Notification แบบเรียลไทม์ด้วย Go และ WebSocket พร้อมรองรับการขยายระบบด้วย Redis Pub\u002FSub เพื่อให้ผู้ใช้ได้รับการแจ้งเตือนทันทีเมื่อเกิด Event สำคัญ","2026-05-08 06:52:06.366Z",{"th":82,"en":82}]