ทำไมต้องมีฟีเจอร์กำหนดสถานะผู้ใช้?

ฟีเจอร์ Custom User Status หรือ การกำหนดสถานะผู้ใช้ ช่วยให้ผู้ใช้สามารถระบุสถานะของตนเองในระบบแชทได้ เช่น:

• "ออนไลน์" (Online) - พร้อมสนทนา
• "ไม่ว่าง" (Busy) - อยู่ในโหมดห้ามรบกวน
• "ออฟไลน์" (Offline) - ไม่พร้อมสนทนา

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

โครงสร้างของระบบกำหนดสถานะผู้ใช้ใน WebSocket Chat

1. WebSocket Server - คอยติดตามและอัปเดตสถานะของผู้ใช้แบบเรียลไทม์
2. Frontend (Client-Side) - ให้ผู้ใช้เลือกและอัปเดตสถานะของตนเอง
3. Database (Optional) - หากต้องการบันทึกสถานะของผู้ใช้ระยะยาว

การเพิ่มฟีเจอร์ Custom User Status ใน WebSocket Server

1. อัปเกรด WebSocket Server ให้รองรับการกำหนดสถานะ

ไฟล์ websocket_server.go

package main

import (
    "encoding/json"
    "fmt"
    "net/http"
    "sync"

    "github.com/gorilla/websocket"
)

type UserStatus struct {
    Username string `json:"username"`
    Status   string `json:"status"`
}

var upgrader = websocket.Upgrader{
    CheckOrigin: func(r *http.Request) bool { return true },
}

var (
    clients      = make(map[*websocket.Conn]string)
    userStatuses = make(map[string]string)
    broadcast    = make(chan UserStatus)
    mu           sync.Mutex
)

func handleConnections(w http.ResponseWriter, r *http.Request) {
    conn, _ := upgrader.Upgrade(w, r, nil)
    defer conn.Close()
    
    var username string = r.URL.Query().Get("username")
    
    mu.Lock()
    clients[conn] = username
    userStatuses[username] = "ออนไลน์"
    mu.Unlock()
    
    broadcast <- UserStatus{Username: username, Status: "ออนไลน์"}
    
    for {
        var statusUpdate UserStatus
        err := conn.ReadJSON(&statusUpdate)
        if err != nil {
            mu.Lock()
            delete(clients, conn)
            delete(userStatuses, username)
            mu.Unlock()
            broadcast <- UserStatus{Username: username, Status: "ออฟไลน์"}
            break
        }
        
        mu.Lock()
        userStatuses[statusUpdate.Username] = statusUpdate.Status
        mu.Unlock()
        broadcast <- statusUpdate
    }
}

func handleMessages() {
    for {
        statusUpdate := <-broadcast
        fmt.Printf("User %s updated status: %s\n", statusUpdate.Username, statusUpdate.Status)
        
        for client := range clients {
            err := client.WriteJSON(statusUpdate)
            if err != nil {
                client.Close()
                mu.Lock()
                delete(clients, client)
                mu.Unlock()
            }
        }
    }
}

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

2. การเพิ่มฟังก์ชัน Custom User Status ใน Frontend (Client-Side)

ไฟล์ client.js

const username = prompt("Enter your username:");
const socket = new WebSocket(`ws://localhost:8080/ws?username=${username}`);
const statusSelect = document.getElementById("status-select");
const statusDisplay = document.getElementById("status-display");

socket.onmessage = (event) => {
    const data = JSON.parse(event.data);
    updateUserStatus(data.username, data.status);
};

function updateUserStatus(username, status) {
    const statusElement = document.createElement("p");
    statusElement.innerText = `${username} is now ${status}`;
    statusDisplay.appendChild(statusElement);
}

function changeStatus() {
    const newStatus = statusSelect.value;
    socket.send(JSON.stringify({ username, status: newStatus }));
}

การแสดง Custom User Status บน UI

ไฟล์ index.html

<select id="status-select" onchange="changeStatus()">
    <option value="ออนไลน์">ออนไลน์</option>
    <option value="ไม่ว่าง">ไม่ว่าง</option>
    <option value="ออฟไลน์">ออฟไลน์</option>
</select>
<div id="status-display"></div>

3. การทดสอบระบบ

1. รัน WebSocket Server

go run websocket_server.go

2. เปิดหน้าเว็บหลายแท็บและตั้งค่าชื่อผู้ใช้
3. เปลี่ยนสถานะแล้วดูผลลัพธ์ที่ UI และ WebSocket Server

ท้าให้ลอง!

ลองเพิ่ม สถานะเพิ่มเติม เช่น "กำลังพิมพ์..." หรือ "กำลังประชุม" เพื่อให้การสื่อสารสมจริงยิ่งขึ้น

EP ถัดไป

ใน EP.47, เราจะเพิ่ม ฟีเจอร์โหมดห้ามรบกวน (Do Not Disturb Mode) ใน WebSocket Chat 🚀