ฟีเจอร์การแชทแบบกลุ่มใน WebSocket ช่วยให้ผู้ใช้สามารถสร้างและเข้าร่วมแชทกลุ่ม โดยสามารถส่งข้อความในกลุ่มได้แบบเรียลไทม์ ฟีเจอร์นี้ทำให้การสื่อสารในกลุ่มมีความสะดวกและเป็นระเบียบมากขึ้น โดยไม่จำเป็นต้องใช้หลายห้องแชท

ทำไมต้องมีฟีเจอร์การแชทแบบกลุ่ม (Group Chat)?

การแชทแบบกลุ่มเป็นฟีเจอร์ที่สำคัญในการเพิ่มประสบการณ์การสนทนาของผู้ใช้ในแอปพลิเคชันที่มีการสื่อสารในกลุ่มหลายคน โดยเฉพาะในแอปพลิเคชันที่ต้องการรองรับการสนทนาแบบหลายผู้ใช้ ตัวอย่างเช่น:

• การสนทนาในห้องแชทกลุ่ม: สามารถทำให้ผู้ใช้หลายคนพูดคุยและแชร์ข้อมูลในกลุ่มเดียว
• การจัดการสมาชิกในกลุ่ม: ผู้ใช้สามารถเข้าร่วมและออกจากห้องแชทได้ตามต้องการ
• การส่งข้อความในกลุ่ม: ส่งข้อความไปยังผู้ใช้ทุกคนในห้องแชทพร้อมกัน

ข้อดีของการแชทแบบกลุ่ม:

• การสนทนาแบบเรียลไทม์ในกลุ่ม: ส่งข้อความไปยังสมาชิกทุกคนในกลุ่มทันที
• การจัดการสมาชิกในกลุ่ม: สามารถเพิ่มและลบสมาชิกได้
• การเพิ่มประสิทธิภาพในการสื่อสาร: ทำให้ผู้ใช้สามารถสื่อสารและแชร์ข้อมูลได้ง่าย

โครงสร้างของระบบการแชทแบบกลุ่ม (Group Chat)

ระบบการแชทแบบกลุ่มจะประกอบไปด้วยหลายส่วนที่ทำงานร่วมกัน เพื่อให้ผู้ใช้สามารถเข้าร่วมแชทกลุ่มและส่งข้อความได้แบบเรียลไทม์ โดยมีการใช้ WebSocket เพื่อการส่งข้อความในแบบเรียลไทม์

ส่วนประกอบของระบบการแชทแบบกลุ่ม:

• การจัดการห้องแชท: ระบบสามารถสร้างห้องแชทกลุ่มและให้ผู้ใช้เข้าร่วมได้
• การส่งข้อความในกลุ่ม: ผู้ใช้สามารถส่งข้อความไปยังกลุ่มทั้งหมดได้แบบเรียลไทม์
• การจัดการสมาชิกในกลุ่ม: ระบบจะจัดการสมาชิกในกลุ่ม เช่น การเพิ่มและลบผู้ใช้
• การแสดงผลข้อความในกลุ่ม: ข้อความที่ถูกส่งในกลุ่มจะแสดงให้สมาชิกในกลุ่มทุกคนเห็น

วิธีการเพิ่มฟีเจอร์การแชทแบบกลุ่ม (Group Chat) ใน WebSocket

การเพิ่มฟีเจอร์แชทกลุ่มใน WebSocket Server มีขั้นตอนดังนี้:

ขั้นตอนที่ต้องทำ:

1. การสร้างห้องแชทกลุ่ม (Group Chat Room):
   ผู้ใช้สามารถสร้างห้องแชทกลุ่มได้โดยการกำหนดชื่อห้องและเชิญผู้ใช้เข้าร่วม
2. การเข้าร่วมและออกจากห้องแชทกลุ่ม (Joining and Leaving Chat Rooms):
   ผู้ใช้สามารถเข้าร่วมและออกจากห้องแชทได้ โดยระบบจะต้องจัดการการเชื่อมต่อกับห้องแชทที่ผู้ใช้ต้องการเข้าร่วม
3. การส่งข้อความในห้องแชทกลุ่ม (Sending Messages in Group Chat):
   เมื่อผู้ใช้ส่งข้อความ ข้อความนั้นจะถูกส่งไปยังสมาชิกทุกคนในห้องแชทแบบเรียลไทม์

การสร้าง UI สำหรับแชทแบบกลุ่ม (Group Chat UI)

การแสดงผล UI จะช่วยให้ผู้ใช้สามารถเห็นข้อความในห้องแชทกลุ่มและสถานะของสมาชิกในกลุ่ม

ส่วนประกอบของ UI:

• แสดงรายชื่อสมาชิกในห้องแชท: UI จะแสดงรายชื่อสมาชิกที่อยู่ในห้องแชท
• แสดงข้อความในกลุ่ม: ข้อความที่ผู้ใช้ส่งในกลุ่มจะถูกแสดงใน UI ให้ทุกคนเห็น
• ปุ่มเข้าร่วมและออกจากห้องแชท: ผู้ใช้สามารถเข้าร่วมหรือออกจากห้องแชทกลุ่มได้จาก UI

การทดสอบฟีเจอร์การแชทแบบกลุ่ม

หลังจากการพัฒนาและเพิ่มฟีเจอร์การแชทกลุ่มแล้ว การทดสอบจะช่วยให้มั่นใจว่าฟีเจอร์ทำงานได้อย่างถูกต้อง

การทดสอบที่ควรทำ:

• ทดสอบการสร้างห้องแชทกลุ่ม: ทดสอบว่าเมื่อผู้ใช้สร้างห้องแชทแล้วสามารถเชิญผู้ใช้อื่นเข้าร่วมได้
• ทดสอบการส่งข้อความในกลุ่ม: ทดสอบว่าเมื่อผู้ใช้ส่งข้อความ ข้อความจะถูกส่งไปยังสมาชิกทุกคนในห้องแชท
• ทดสอบการเข้าร่วมและออกจากห้องแชท: ทดสอบว่าเมื่อผู้ใช้เข้าร่วมและออกจากห้องแชท ระบบสามารถจัดการการเชื่อมต่อได้อย่างถูกต้อง

ตัวอย่างโค้ดสำหรับการแชทแบบกลุ่ม (Group Chat)

การเชื่อมต่อกับ WebSocket และการจัดการห้องแชทกลุ่ม

1. โค้ดใน WebSocket Server (Backend)

package main

import (
    "github.com/gorilla/websocket"
    "fmt"
    "net/http"
    "sync"
)

var (
    clients   = make(map[*websocket.Conn]string)  // map of WebSocket connection to room
    broadcast = make(chan string)
    mu        sync.Mutex
)

func handleGroupChat(w http.ResponseWriter, r *http.Request) {
    conn, _ := upgrader.Upgrade(w, r, nil)
    defer conn.Close()

    room := r.URL.Query().Get("room")  // Get the room parameter from URL
    clients[conn] = room

    for {
        var message string
        err := conn.ReadMessage(&message)
        if err != nil {
            delete(clients, conn)
            break
        }

        // Send message to all clients in the same room
        mu.Lock()
        for client, cRoom := range clients {
            if cRoom == room {
                client.WriteMessage(message)
            }
        }
        mu.Unlock()
    }
}

func main() {
    http.HandleFunc("/ws", handleGroupChat)
    fmt.Println("WebSocket Server Running on Port 8080")
    http.ListenAndServe(":8080", nil)
}

2. โค้ดใน Frontend (Client)

const socket = new WebSocket("ws://localhost:8080/ws?room=group1");
const chatContainer = document.getElementById("chat-container");

socket.onmessage = (event) => {
    const messageElement = document.createElement("p");
    messageElement.innerText = event.data;
    chatContainer.appendChild(messageElement);
};

function sendMessage(message) {
    socket.send(message);
}

ท้าให้ลอง!

ลองเพิ่ม ฟีเจอร์การแสดงสมาชิกในห้องแชทกลุ่ม เพื่อให้ผู้ใช้สามารถเห็นผู้เข้าร่วมในห้องแชทได้อย่างชัดเจน!

EP ถัดไป:
ใน EP ถัดไป เราจะมาดู การสร้างระบบการจัดการห้องแชท (Chat Room Management) ใน WebSocket เพื่อให้ผู้ใช้สามารถสร้างและจัดการห้องแชทได้เอง!