ทำไมต้องมีโหมดห้ามรบกวน?

โหมด Do Not Disturb (DND) ช่วยให้ผู้ใช้สามารถ ปิดเสียงแจ้งเตือนและป้องกันการรบกวน ในช่วงเวลาที่ต้องการ เช่น:

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

การมี DND Mode จะช่วยให้แอปพลิเคชันแชทสามารถ เพิ่มความยืดหยุ่นในการใช้งาน และ ทำให้ประสบการณ์การใช้งานดีขึ้น

โครงสร้างของระบบโหมดห้ามรบกวนใน WebSocket Chat

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

การเพิ่มฟีเจอร์ Do Not Disturb Mode ใน WebSocket Server

1. อัปเกรด WebSocket Server ให้รองรับโหมด DND

ไฟล์ websocket_server.go

package main

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

    "github.com/gorilla/websocket"
)

type UserDND struct {
    Username string `json:"username"`
    DND      bool   `json:"dnd"`
}

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

var (
    clients   = make(map[*websocket.Conn]string)
    userDND   = make(map[string]bool)
    broadcast = make(chan UserDND)
    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
    userDND[username] = false
    mu.Unlock()
    
    for {
        var dndStatus UserDND
        err := conn.ReadJSON(&dndStatus)
        if err != nil {
            mu.Lock()
            delete(clients, conn)
            delete(userDND, username)
            mu.Unlock()
            break
        }
        
        mu.Lock()
        userDND[dndStatus.Username] = dndStatus.DND
        mu.Unlock()
        broadcast <- dndStatus
    }
}

func handleMessages() {
    for {
        dndStatus := <-broadcast
        fmt.Printf("User %s changed DND status to: %v\n", dndStatus.Username, dndStatus.DND)
        
        for client := range clients {
            err := client.WriteJSON(dndStatus)
            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. การเพิ่มฟังก์ชัน Do Not Disturb Mode ใน Frontend (Client-Side)

ไฟล์ client.js

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

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

function updateDNDStatus(username, dnd) {
    const statusElement = document.createElement("p");
    statusElement.innerText = `${username} is now ${dnd ? "in DND Mode" : "available"}`;
    dndStatusDisplay.appendChild(statusElement);
}

function toggleDND() {
    const isDND = dndToggle.checked;
    socket.send(JSON.stringify({ username, dnd: isDND }));
}

การแสดง Do Not Disturb Mode บน UI

ไฟล์ index.html

<label>
    <input type="checkbox" id="dnd-toggle" onchange="toggleDND()"> เปิดโหมดห้ามรบกวน (DND)
</label>
<div id="dnd-status-display"></div>

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

1. รัน WebSocket Server

go run websocket_server.go

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

ท้าให้ลอง!

ลองเพิ่ม การกำหนดช่วงเวลาห้ามรบกวน (Scheduled DND Mode) เพื่อให้ผู้ใช้สามารถตั้งเวลาเปิด/ปิดโหมดนี้อัตโนมัติ

EP ถัดไป

ใน EP.48, เราจะเพิ่ม ฟีเจอร์ระบบแสดงประวัติการแชทย้อนหลังใน WebSocket Chat 🚀