[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-blogs-th-1-1-all-websocket-broadcast-messaging-all--*":3,"academy-blog-translations-qfbq7s08nzkoydb":80},{"data":4,"page":67,"perPage":67,"totalItems":67,"totalPages":67},[5],{"alt":6,"collectionId":7,"collectionName":8,"content":9,"cover_image":10,"cover_image_path":11,"created":12,"created_by":13,"expand":14,"id":75,"keywords":76,"locale":49,"published_at":77,"scheduled_at":13,"school_blog":71,"short_description":78,"status":69,"title":6,"updated":79,"updated_by":13,"slug":72,"views":74},"EP.71 การใช้ WebSocket ในการพัฒนาระบบส่งข้อความแบบกระจาย (Broadcast Messaging)","sclblg987654321","school_blog_translations","\u003Cp>ใน EP.71 นี้เราจะพูดถึงการใช้ WebSocket ในการพัฒนาระบบ Broadcast Messaging ที่ช่วยให้ผู้ใช้สามารถส่งข้อความจาก WebSocket Server ไปยังหลายๆ Client ในเวลาเดียวกันในระบบ WebSocket Chat โดยไม่ต้องทำการเชื่อมต่อกับแต่ละ Client ทีละตัว ระบบนี้จะช่วยให้การสื่อสารในแอปพลิเคชันเป็นไปอย่างราบรื่นและมีประสิทธิภาพ\u003C\u002Fp>\u003Cp>การใช้ Broadcast Messaging สามารถใช้ในการส่งข้อความประกาศ, การอัปเดตสถานะ, หรือแม้กระทั่งการส่งข้อความที่สำคัญให้กับผู้ใช้ทั้งหมดในห้องแชทเดียวกัน\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>ทำไมต้องใช้ Broadcast Messaging ใน WebSocket Chat?\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp data-start=\"1306\" data-end=\"1440\">การส่งข้อความแบบกระจาย (Broadcast Messaging) คือการส่งข้อความจากผู้ใช้หนึ่งคน ไปยังผู้ใช้ทุกคนในห้องแชทแบบเรียลไทม์ ซึ่งมีข้อดีดังนี้:\u003C\u002Fp>\u003Cul data-start=\"1442\" data-end=\"1708\">\u003Cli data-start=\"1442\" data-end=\"1522\">\u003Cp data-start=\"1444\" data-end=\"1522\">ประหยัดทรัพยากร: ไม่จำเป็นต้องวนส่งข้อความทีละคน ทำให้ลดภาระของเซิร์ฟเวอร์\u003C\u002Fp>\u003C\u002Fli>\u003Cli data-start=\"1523\" data-end=\"1636\">\u003Cp data-start=\"1525\" data-end=\"1636\">ตอบสนองเร็ว: WebSocket ทำให้การส่งข้อมูลเป็นแบบสองทาง (bi-directional) และไม่ต้องมีการเชื่อมต่อใหม่ทุกครั้ง\u003C\u002Fp>\u003C\u002Fli>\u003Cli data-start=\"1637\" data-end=\"1708\">\u003Cp data-start=\"1639\" data-end=\"1708\">จัดการง่าย: ผู้ดูแลสามารถประกาศข้อความสำคัญได้ทันทีถึงทุกคนในห้อง\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Cp data-start=\"1639\" data-end=\"1708\"> \u003C\u002Fp>\u003Ch2>การออกแบบระบบส่งข้อความแบบกระจาย (Broadcast Messaging)\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>ในระบบ Broadcast Messaging, ข้อความที่ถูกส่งจาก Server จะถูกกระจายไปยัง Client ทุกตัวที่เชื่อมต่ออยู่ในห้องแชทเดียวกัน โดยการใช้ WebSocket จะทำให้การสื่อสารเป็นไปแบบ สองทาง (bi-directional) ซึ่งทำให้ระบบสามารถส่งข้อความจาก Server ไปยัง Client ได้อย่างรวดเร็ว\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>ขั้นตอนการพัฒนา Broadcast Messaging ใน WebSocket\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Col>\u003Cli>การตั้งค่า WebSocket Server:\u003Cbr>ก่อนที่จะเริ่มพัฒนา Broadcast Messaging, คุณต้องตั้งค่า WebSocket Server ที่สามารถรับการเชื่อมต่อจากหลายๆ Client ได้\u003C\u002Fli>\u003Cli>การเพิ่มฟังก์ชัน Broadcast:\u003Cbr>เมื่อมีการรับข้อความจากผู้ใช้หนึ่งคน ระบบจะต้องกระจายข้อความนี้ไปยัง Client อื่นๆ ที่เชื่อมต่ออยู่\u003C\u002Fli>\u003C\u002Fol>\u003Cp> \u003C\u002Fp>\u003Ch2>ตัวอย่างการสร้าง WebSocket Server ด้วย Go\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext language-go\">package main\n\nimport (\n    \"log\"\n    \"net\u002Fhttp\"\n    \"sync\"\n\n    \"github.com\u002Fgorilla\u002Fwebsocket\"\n)\n\nvar (\n    clients   = make(map[*websocket.Conn]bool)\n    clientsMu sync.Mutex\n    broadcast = make(chan Message)\n)\n\ntype Message struct {\n    User    string `json:\"user\"`\n    Message string `json:\"message\"`\n}\n\nvar upgrader = websocket.Upgrader{\n    CheckOrigin: func(r *http.Request) bool { return true },\n}\n\nfunc handleConnections(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    clientsMu.Lock()\n    clients[conn] = true\n    clientsMu.Unlock()\n\n    for {\n        var msg Message\n        if err := conn.ReadJSON(&msg); err != nil {\n            log.Println(\"Read error:\", err)\n            clientsMu.Lock()\n            delete(clients, conn)\n            clientsMu.Unlock()\n            break\n        }\n        broadcast <- msg\n    }\n}\n\nfunc handleMessages() {\n    for msg := range broadcast {\n        clientsMu.Lock()\n        for client := range clients {\n            if err := client.WriteJSON(msg); err != nil {\n                log.Println(\"Write error:\", err)\n                client.Close()\n                delete(clients, client)\n            }\n        }\n        clientsMu.Unlock()\n    }\n}\n\nfunc main() {\n    http.HandleFunc(\"\u002Fws\", handleConnections)\n    go handleMessages()\n\n    log.Println(\"Server started on :8080\")\n    log.Fatal(http.ListenAndServe(\":8080\", nil))\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>คำอธิบายโค้ด:\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cul data-start=\"3573\" data-end=\"3830\">\u003Cli data-start=\"3573\" data-end=\"3609\">\u003Cp data-start=\"3575\" data-end=\"3609\">\u003Ccode data-start=\"3575\" data-end=\"3584\">clients\u003C\u002Fcode>: เก็บการเชื่อมต่อทั้งหมด\u003C\u002Fp>\u003C\u002Fli>\u003Cli data-start=\"3610\" data-end=\"3663\">\u003Cp data-start=\"3612\" data-end=\"3663\">\u003Ccode data-start=\"3612\" data-end=\"3623\">clientsMu\u003C\u002Fcode>: ใช้สำหรับล็อกป้องกัน concurrent access\u003C\u002Fp>\u003C\u002Fli>\u003Cli data-start=\"3664\" data-end=\"3716\">\u003Cp data-start=\"3666\" data-end=\"3716\">\u003Ccode data-start=\"3666\" data-end=\"3677\">broadcast\u003C\u002Fcode>: ช่องที่ใช้ส่งข้อความระหว่าง goroutine\u003C\u002Fp>\u003C\u002Fli>\u003Cli data-start=\"3717\" data-end=\"3767\">\u003Cp data-start=\"3719\" data-end=\"3767\">\u003Ccode data-start=\"3719\" data-end=\"3738\">handleConnections\u003C\u002Fcode>: รอรับข้อความจากแต่ละ client\u003C\u002Fp>\u003C\u002Fli>\u003Cli data-start=\"3768\" data-end=\"3830\">\u003Cp data-start=\"3770\" data-end=\"3830\">\u003Ccode data-start=\"3770\" data-end=\"3786\">handleMessages\u003C\u002Fcode>: ส่งข้อความไปยังทุก client ที่เชื่อมต่ออยู่\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>ทดสอบระบบ\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp data-start=\"3852\" data-end=\"3972\">ลองเชื่อมต่อ client หลายตัวเข้ามาที่ \u003Ccode data-start=\"3889\" data-end=\"3894\">\u002Fws\u003C\u002Fcode> แล้วลองส่งข้อความจาก client ใดก็ได้ จะเห็นว่า client อื่นๆ ได้รับข้อความทันที\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Chr>\u003Cp> \u003C\u002Fp>\u003Ch3>Challenge: ลองเพิ่มฟีเจอร์ใหม่!\u003C\u002Fh3>\u003Cp data-start=\"4015\" data-end=\"4144\">ลองเพิ่มฟีเจอร์ \"ข้อความประกาศจากแอดมิน\" โดยกำหนดว่าถ้า message จาก \u003Ccode data-start=\"4083\" data-end=\"4100\">User == \"admin\"\u003C\u002Fcode> จะถูกส่งแบบ highlight พิเศษใน client ได้เลย\u003C\u002Fp>\u003Cp data-start=\"4015\" data-end=\"4144\"> \u003C\u002Fp>\u003Ch3>EP ถัดไป:\u003C\u002Fh3>\u003Cp>ใน EP.72 เราจะมาดู การสร้างระบบการบันทึกและจัดเก็บข้อมูลการสนทนา (Message Logging) ใน WebSocket เพื่อให้สามารถจัดเก็บประวัติการสนทนาและข้อมูลต่างๆ ของผู้ใช้ในระบบ WebSocket Chat ได้!\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>","113_11zon_l92oq2q2uk.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002Fivz467e1cl5uf9r\u002F113_11zon_l92oq2q2uk.webp","2026-03-04 08:47:28.588Z","",{"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:47:27.915Z","chadgopbc2ilima","Broadcast messaging","2026-04-10 16:13:28.991Z",{"collectionId":17,"collectionName":18,"created":24,"created_by":13,"id":25,"name":26,"updated":27,"updated_by":13},"2026-03-04 08:44:48.724Z","s6xhnfomy7n5ycp","WebSocket Server","2026-04-10 16:12:50.171Z",{"collectionId":17,"collectionName":18,"created":29,"created_by":13,"id":30,"name":31,"updated":32,"updated_by":13},"2026-03-04 08:47:27.531Z","8i5bikzi4dzlpgq","WebSocket real-time communication","2026-04-10 16:13:28.896Z",{"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",{"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,"created":13,"expand":57,"id":71,"slug":72,"updated":73,"views":74},"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":66,"priority":67,"publish_at":68,"scheduled_at":13,"status":69,"updated":70,"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":66,"th":66},"Golang The Series",1,"2026-03-16 04:39:38.440Z","published","2026-04-25 02:32:15.470Z","qfbq7s08nzkoydb","websocket-broadcast-messaging","2026-05-12 04:53:24.477Z",238,"ivz467e1cl5uf9r",[20,25,30,35,40],"2025-08-04 03:59:14.748Z","เรียนรู้วิธีการใช้ WebSocket เพื่อพัฒนาระบบ ส่งข้อความแบบกระจาย (Broadcast Messaging) ที่สามารถส่งข้อความไปยัง Client หลายๆ ตัวในเวลาเดียวกันอย่างมีประสิทธิภาพ","2026-04-25 02:48:15.507Z",{"th":72,"en":72}]