ทำไมต้องมีฟีเจอร์แสดงจำนวนผู้ใช้งานออนไลน์?

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

• ช่วยให้การสนทนาเป็นแบบเรียลไทม์มากขึ้น เพราะผู้ใช้สามารถเห็นว่าเพื่อนร่วมแชทยังออนไลน์อยู่
• สามารถใช้เพื่อแสดงจำนวนผู้ใช้ที่กำลังใช้งานระบบแบบไดนามิก
• เหมาะสำหรับการสร้าง Community Chat หรือ Support Chat ที่ต้องการการตอบสนองอย่างรวดเร็ว

โครงสร้างของระบบแสดงจำนวนผู้ใช้ออนไลน์ใน WebSocket Chat

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

การเพิ่มฟีเจอร์ Active Users ใน 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"`
    Online   bool   `json:"online"`
}

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

var (
    clients      = make(map[*websocket.Conn]string)
    onlineUsers  = make(map[string]bool)
    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
    onlineUsers[username] = true
    mu.Unlock()
    
    broadcast <- UserStatus{Username: username, Online: true}
    
    for {
        _, _, err := conn.ReadMessage()
        if err != nil {
            mu.Lock()
            delete(clients, conn)
            delete(onlineUsers, username)
            mu.Unlock()
            broadcast <- UserStatus{Username: username, Online: false}
            break
        }
    }
}

func handleMessages() {
    for {
        status := <-broadcast
        fmt.Printf("User %s is now %s\n", status.Username, map[bool]string{true: "online", false: "offline"}[status.Online])
        
        for client := range clients {
            err := client.WriteJSON(status)
            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. การเพิ่มฟังก์ชัน Active Users ใน Frontend (Client-Side)

ไฟล์ client.js

const username = prompt("Enter your username:");
const socket = new WebSocket(`ws://localhost:8080/ws?username=${username}`);
const onlineUsersContainer = document.getElementById("online-users");

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

function updateOnlineUsers(username, online) {
    let userElement = document.getElementById(`user-${username}`);
    if (!userElement) {
        userElement = document.createElement("p");
        userElement.id = `user-${username}`;
        onlineUsersContainer.appendChild(userElement);
    }
    userElement.innerText = `${username} is ${online ? "Online" : "Offline"}`;
}

การแสดง Active Users บน UI

ไฟล์ index.html

<div id="online-users"></div>

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

1. รัน WebSocket Server

go run websocket_server.go

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

ท้าให้ลอง!

ลองเพิ่ม ระบบแสดงเวลาที่ผู้ใช้ใช้งานล่าสุด (Last Seen) เพื่อให้สามารถทราบว่าผู้ใช้ที่ออฟไลน์ไปล่าสุดเมื่อไหร่

EP ถัดไป

ใน EP.45, เราจะเพิ่ม ฟีเจอร์ระบบแจ้งเตือนเมื่อมีผู้ใช้ใหม่เข้ามาใน WebSocket Chat 🚀