[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-blogs-th-1-1-all-group-chat-websocket-all--*":3,"academy-blog-translations-9f3tyn59u5noidm":84},{"data":4,"page":72,"perPage":72,"totalItems":72,"totalPages":72},[5],{"alt":6,"collectionId":7,"collectionName":8,"content":9,"cover_image":10,"cover_image_path":11,"created":12,"created_by":13,"expand":14,"id":78,"keywords":79,"locale":54,"published_at":80,"scheduled_at":13,"school_blog":76,"short_description":81,"slug":82,"status":74,"title":6,"updated":83,"updated_by":13,"views":77},"EP.60 การเพิ่มฟีเจอร์การแชทแบบกลุ่ม (Group Chat) ใน WebSocket","sclblg987654321","school_blog_translations","\u003Cp>ฟีเจอร์การแชทแบบกลุ่มใน WebSocket ช่วยให้ผู้ใช้สามารถสร้างและเข้าร่วมแชทกลุ่ม โดยสามารถส่งข้อความในกลุ่มได้แบบเรียลไทม์ ฟีเจอร์นี้ทำให้การสื่อสารในกลุ่มมีความสะดวกและเป็นระเบียบมากขึ้น โดยไม่จำเป็นต้องใช้หลายห้องแชท\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>ทำไมต้องมีฟีเจอร์การแชทแบบกลุ่ม (Group Chat)?\u003C\u002Fh2>\u003Cp>การแชทแบบกลุ่มเป็นฟีเจอร์ที่สำคัญในการเพิ่มประสบการณ์การสนทนาของผู้ใช้ในแอปพลิเคชันที่มีการสื่อสารในกลุ่มหลายคน โดยเฉพาะในแอปพลิเคชันที่ต้องการรองรับการสนทนาแบบหลายผู้ใช้ ตัวอย่างเช่น:\u003C\u002Fp>\u003Cul>\u003Cli>การสนทนาในห้องแชทกลุ่ม: สามารถทำให้ผู้ใช้หลายคนพูดคุยและแชร์ข้อมูลในกลุ่มเดียว\u003C\u002Fli>\u003Cli>การจัดการสมาชิกในกลุ่ม: ผู้ใช้สามารถเข้าร่วมและออกจากห้องแชทได้ตามต้องการ\u003C\u002Fli>\u003Cli>การส่งข้อความในกลุ่ม: ส่งข้อความไปยังผู้ใช้ทุกคนในห้องแชทพร้อมกัน\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>ข้อดีของการแชทแบบกลุ่ม:\u003C\u002Fh3>\u003Cul>\u003Cli>การสนทนาแบบเรียลไทม์ในกลุ่ม: ส่งข้อความไปยังสมาชิกทุกคนในกลุ่มทันที\u003C\u002Fli>\u003Cli>การจัดการสมาชิกในกลุ่ม: สามารถเพิ่มและลบสมาชิกได้\u003C\u002Fli>\u003Cli>การเพิ่มประสิทธิภาพในการสื่อสาร: ทำให้ผู้ใช้สามารถสื่อสารและแชร์ข้อมูลได้ง่าย\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>โครงสร้างของระบบการแชทแบบกลุ่ม (Group Chat)\u003C\u002Fh2>\u003Cp>ระบบการแชทแบบกลุ่มจะประกอบไปด้วยหลายส่วนที่ทำงานร่วมกัน เพื่อให้ผู้ใช้สามารถเข้าร่วมแชทกลุ่มและส่งข้อความได้แบบเรียลไทม์ โดยมีการใช้ WebSocket เพื่อการส่งข้อความในแบบเรียลไทม์\u003C\u002Fp>\u003Ch3>ส่วนประกอบของระบบการแชทแบบกลุ่ม:\u003C\u002Fh3>\u003Cul>\u003Cli>การจัดการห้องแชท: ระบบสามารถสร้างห้องแชทกลุ่มและให้ผู้ใช้เข้าร่วมได้\u003C\u002Fli>\u003Cli>การส่งข้อความในกลุ่ม: ผู้ใช้สามารถส่งข้อความไปยังกลุ่มทั้งหมดได้แบบเรียลไทม์\u003C\u002Fli>\u003Cli>การจัดการสมาชิกในกลุ่ม: ระบบจะจัดการสมาชิกในกลุ่ม เช่น การเพิ่มและลบผู้ใช้\u003C\u002Fli>\u003Cli>การแสดงผลข้อความในกลุ่ม: ข้อความที่ถูกส่งในกลุ่มจะแสดงให้สมาชิกในกลุ่มทุกคนเห็น\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>วิธีการเพิ่มฟีเจอร์การแชทแบบกลุ่ม (Group Chat) ใน WebSocket\u003C\u002Fh2>\u003Cp>การเพิ่มฟีเจอร์แชทกลุ่มใน WebSocket Server มีขั้นตอนดังนี้:\u003C\u002Fp>\u003Ch3>ขั้นตอนที่ต้องทำ:\u003C\u002Fh3>\u003Col>\u003Cli>การสร้างห้องแชทกลุ่ม (Group Chat Room):\u003Cbr>ผู้ใช้สามารถสร้างห้องแชทกลุ่มได้โดยการกำหนดชื่อห้องและเชิญผู้ใช้เข้าร่วม\u003C\u002Fli>\u003Cli>การเข้าร่วมและออกจากห้องแชทกลุ่ม (Joining and Leaving Chat Rooms):\u003Cbr>ผู้ใช้สามารถเข้าร่วมและออกจากห้องแชทได้ โดยระบบจะต้องจัดการการเชื่อมต่อกับห้องแชทที่ผู้ใช้ต้องการเข้าร่วม\u003C\u002Fli>\u003Cli>การส่งข้อความในห้องแชทกลุ่ม (Sending Messages in Group Chat):\u003Cbr>เมื่อผู้ใช้ส่งข้อความ ข้อความนั้นจะถูกส่งไปยังสมาชิกทุกคนในห้องแชทแบบเรียลไทม์\u003C\u002Fli>\u003C\u002Fol>\u003Cp> \u003C\u002Fp>\u003Ch2>การสร้าง UI สำหรับแชทแบบกลุ่ม (Group Chat UI)\u003C\u002Fh2>\u003Cp>การแสดงผล UI จะช่วยให้ผู้ใช้สามารถเห็นข้อความในห้องแชทกลุ่มและสถานะของสมาชิกในกลุ่ม\u003C\u002Fp>\u003Ch3>ส่วนประกอบของ UI:\u003C\u002Fh3>\u003Cul>\u003Cli>แสดงรายชื่อสมาชิกในห้องแชท: UI จะแสดงรายชื่อสมาชิกที่อยู่ในห้องแชท\u003C\u002Fli>\u003Cli>แสดงข้อความในกลุ่ม: ข้อความที่ผู้ใช้ส่งในกลุ่มจะถูกแสดงใน UI ให้ทุกคนเห็น\u003C\u002Fli>\u003Cli>ปุ่มเข้าร่วมและออกจากห้องแชท: ผู้ใช้สามารถเข้าร่วมหรือออกจากห้องแชทกลุ่มได้จาก UI\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>การทดสอบฟีเจอร์การแชทแบบกลุ่ม\u003C\u002Fh2>\u003Cp>หลังจากการพัฒนาและเพิ่มฟีเจอร์การแชทกลุ่มแล้ว การทดสอบจะช่วยให้มั่นใจว่าฟีเจอร์ทำงานได้อย่างถูกต้อง\u003C\u002Fp>\u003Ch3>การทดสอบที่ควรทำ:\u003C\u002Fh3>\u003Cul>\u003Cli>ทดสอบการสร้างห้องแชทกลุ่ม: ทดสอบว่าเมื่อผู้ใช้สร้างห้องแชทแล้วสามารถเชิญผู้ใช้อื่นเข้าร่วมได้\u003C\u002Fli>\u003Cli>ทดสอบการส่งข้อความในกลุ่ม: ทดสอบว่าเมื่อผู้ใช้ส่งข้อความ ข้อความจะถูกส่งไปยังสมาชิกทุกคนในห้องแชท\u003C\u002Fli>\u003Cli>ทดสอบการเข้าร่วมและออกจากห้องแชท: ทดสอบว่าเมื่อผู้ใช้เข้าร่วมและออกจากห้องแชท ระบบสามารถจัดการการเชื่อมต่อได้อย่างถูกต้อง\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>ตัวอย่างโค้ดสำหรับการแชทแบบกลุ่ม (Group Chat)\u003C\u002Fh2>\u003Cp>การเชื่อมต่อกับ WebSocket และการจัดการห้องแชทกลุ่ม\u003C\u002Fp>\u003Ch3>1. โค้ดใน WebSocket Server (Backend)\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-plaintext language-go\">package main\n\nimport (\n    \"github.com\u002Fgorilla\u002Fwebsocket\"\n    \"fmt\"\n    \"net\u002Fhttp\"\n    \"sync\"\n)\n\nvar (\n    clients   = make(map[*websocket.Conn]string)  \u002F\u002F map of WebSocket connection to room\n    broadcast = make(chan string)\n    mu        sync.Mutex\n)\n\nfunc handleGroupChat(w http.ResponseWriter, r *http.Request) {\n    conn, _ := upgrader.Upgrade(w, r, nil)\n    defer conn.Close()\n\n    room := r.URL.Query().Get(\"room\")  \u002F\u002F Get the room parameter from URL\n    clients[conn] = room\n\n    for {\n        var message string\n        err := conn.ReadMessage(&message)\n        if err != nil {\n            delete(clients, conn)\n            break\n        }\n\n        \u002F\u002F Send message to all clients in the same room\n        mu.Lock()\n        for client, cRoom := range clients {\n            if cRoom == room {\n                client.WriteMessage(message)\n            }\n        }\n        mu.Unlock()\n    }\n}\n\nfunc main() {\n    http.HandleFunc(\"\u002Fws\", handleGroupChat)\n    fmt.Println(\"WebSocket Server Running on Port 8080\")\n    http.ListenAndServe(\":8080\", nil)\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>2. โค้ดใน Frontend (Client)\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-javascript\">const socket = new WebSocket(\"ws:\u002F\u002Flocalhost:8080\u002Fws?room=group1\");\nconst chatContainer = document.getElementById(\"chat-container\");\n\nsocket.onmessage = (event) => {\n    const messageElement = document.createElement(\"p\");\n    messageElement.innerText = event.data;\n    chatContainer.appendChild(messageElement);\n};\n\nfunction sendMessage(message) {\n    socket.send(message);\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Chr>\u003Cp> \u003C\u002Fp>\u003Ch3>\u003Cstrong>ท้าให้ลอง!\u003C\u002Fstrong>\u003C\u002Fh3>\u003Cp>ลองเพิ่ม \u003Cstrong>ฟีเจอร์การแสดงสมาชิกในห้องแชทกลุ่ม\u003C\u002Fstrong> เพื่อให้ผู้ใช้สามารถเห็นผู้เข้าร่วมในห้องแชทได้อย่างชัดเจน!\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Cp>\u003Cstrong>EP ถัดไป:\u003C\u002Fstrong>\u003Cbr>ใน EP ถัดไป เราจะมาดู \u003Cstrong>การสร้างระบบการจัดการห้องแชท (Chat Room Management)\u003C\u002Fstrong> ใน WebSocket เพื่อให้ผู้ใช้สามารถสร้างและจัดการห้องแชทได้เอง!\u003C\u002Fp>","91_11zon_81s7dvjfs5.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002Fk7kes7hshgxn4fp\u002F91_11zon_81s7dvjfs5.webp","2026-03-04 08:48:28.973Z","",{"keywords":15,"locale":48,"school_blog":58},[16,23,28,33,38,43],{"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:20:11.547Z","ey3puyme01a9bsw","Go","2026-04-10 16:07:25.893Z",{"collectionId":17,"collectionName":18,"created":24,"created_by":13,"id":25,"name":26,"updated":27,"updated_by":13},"2026-03-04 08:48:28.330Z","kr1413m4fzwuc0h","Multi-user chat WebSocket","2026-04-10 16:13:48.361Z",{"collectionId":17,"collectionName":18,"created":29,"created_by":13,"id":30,"name":31,"updated":32,"updated_by":13},"2026-03-04 08:48:26.531Z","fkyqvsheo2jrtgp","Real-time group messaging","2026-04-10 16:13:47.753Z",{"collectionId":17,"collectionName":18,"created":34,"created_by":13,"id":35,"name":36,"updated":37,"updated_by":13},"2026-03-04 08:48:27.456Z","6apcqgw22qzbwor","WebSocket chat rooms","2026-04-10 16:13:48.045Z",{"collectionId":17,"collectionName":18,"created":39,"created_by":13,"id":40,"name":41,"updated":42,"updated_by":13},"2026-03-04 08:48:28.118Z","mke46zb9cmeoi7c","Group chat WebSocket","2026-04-10 16:13:48.300Z",{"collectionId":17,"collectionName":18,"created":44,"created_by":13,"id":45,"name":46,"updated":47,"updated_by":13},"2026-03-04 08:48:27.886Z","ymx9t9j2b8g259k","WebSocket group chat","2026-04-10 16:13:48.137Z",{"code":49,"collectionId":50,"collectionName":51,"created":52,"flag":53,"id":54,"is_default":55,"label":56,"updated":57},"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":59,"collectionId":60,"collectionName":61,"expand":62,"id":76,"views":77},"wqxt7ag2gn7xcmk","pbc_2105096300","school_blogs",{"category":63},{"blogIds":64,"collectionId":65,"collectionName":66,"created":67,"created_by":13,"id":59,"image":68,"image_alt":13,"image_path":69,"label":70,"name":71,"priority":72,"publish_at":73,"scheduled_at":13,"status":74,"updated":75,"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":71,"th":71},"Golang The Series",1,"2026-03-16 04:39:38.440Z","published","2026-04-25 02:32:15.470Z","9f3tyn59u5noidm",254,"k7kes7hshgxn4fp",[20,25,30,35,40,45],"2025-07-02 02:20:18.502Z","เรียนรู้วิธีเพิ่มฟีเจอร์การแชทแบบกลุ่ม (Group Chat) ใน WebSocket เพื่อให้ผู้ใช้สามารถเข้าร่วมแชทกลุ่มและส่งข้อความในกลุ่มผ่าน WebSocket","group-chat-websocket","2026-04-22 07:10:11.556Z",{"th":82}]