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

ทำไมต้องมีฟีเจอร์การแจ้งเตือนเมื่อมีข้อความปักหมุดใหม่?

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

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

โครงสร้างการแจ้งเตือนการปักหมุดใน WebSocket Chat

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

ส่วนประกอบของระบบการแจ้งเตือนการปักหมุด:

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

วิธีการเพิ่มฟีเจอร์การแจ้งเตือนใน WebSocket Server

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

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

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

การสร้าง UI สำหรับแสดงการแจ้งเตือน

เพื่อให้การแจ้งเตือนการปักหมุดมีความสะดวกและเด่นชัด เราจะเพิ่มการแสดงการแจ้งเตือนใน UI ของแอปพลิเคชัน โดยอาจใช้การแสดงป๊อปอัพหรือการแสดงข้อความแจ้งเตือนในมุมหน้าจอ

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

• การแสดงป๊อปอัพการแจ้งเตือน: เมื่อมีข้อความปักหมุดใหม่, UI จะสามารถแสดงป๊อปอัพการแจ้งเตือนที่มุมหน้าจอ
• การแสดงข้อความแจ้งเตือนในแชท: ในห้องแชท, การแจ้งเตือนสามารถแสดงเป็นข้อความใต้ข้อความปักหมุดที่บอกว่า "New pinned message" หรือ "ข้อความใหม่ปักหมุด"

การทดสอบฟีเจอร์การแจ้งเตือนเมื่อมีข้อความปักหมุดใหม่

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

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

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

ตัวอย่างโค้ดสำหรับการแจ้งเตือนเมื่อมีข้อความปักหมุดใหม่

1. การอัปเดตฐานข้อมูล (Database)

เพิ่มคอลัมน์ notification_sent เพื่อเก็บข้อมูลสถานะการส่งการแจ้งเตือน

ALTER TABLE chat_messages ADD COLUMN notification_sent BOOLEAN DEFAULT FALSE;

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

เราจะอัปเดตโค้ดใน WebSocket Server เพื่อรองรับการส่งการแจ้งเตือนเมื่อมีข้อความปักหมุด

package main

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

    "github.com/gorilla/websocket"
    _ "github.com/lib/pq"
)

type PinMessageRequest struct {
    MessageID int  `json:"messageID"`
    IsPinned  bool `json:"isPinned"`
}

type PinMessageResponse struct {
    MessageID int  `json:"messageID"`
    IsPinned  bool `json:"isPinned"`
}

var (
    clients   = make(map[*websocket.Conn]bool)
    broadcast = make(chan PinMessageResponse)
    mu        sync.Mutex
    db        *sql.DB
)

func handlePinMessage(w http.ResponseWriter, r *http.Request) {
    conn, _ := upgrader.Upgrade(w, r, nil)
    defer conn.Close()
    clients[conn] = true

    for {
        var request PinMessageRequest
        err := conn.ReadJSON(&request)
        if err != nil {
            delete(clients, conn)
            break
        }

        // อัปเดตสถานะการปักหมุดในฐานข้อมูลและส่งการแจ้งเตือน
        _, err = db.Exec("UPDATE chat_messages SET is_pinned = $1, notification_sent = TRUE WHERE id = $2", request.IsPinned, request.MessageID)
        if err == nil {
            broadcast <- PinMessageResponse{MessageID: request.MessageID, IsPinned: request.IsPinned}
        }
    }
}

func notifyClients() {
    for {
        msg := <-broadcast
        for client := range clients {
            err := client.WriteJSON(msg)
            if err != nil {
                client.Close()
                delete(clients, client)
            }
        }
    }
}

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

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

เพิ่มการแสดงป๊อปอัพหรือการแจ้งเตือนใน UI เมื่อข้อความถูกปักหมุด

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

socket.onmessage = (event) => {
    const data = JSON.parse(event.data);
    const messageElement = document.getElementById(`msg-${data.messageID}`);
    if (data.isPinned) {
        messageElement.innerHTML = `${data.sender}: ${data.newContent} (Pinned)`;
        alert("New pinned message!");
    }
};

function sendPinMessageRequest(messageID, isPinned) {
    socket.send(JSON.stringify({ messageID, isPinned }));
}

function displayMessage(id, sender, content, isPinned) {
    const msgElement = document.createElement("p");
    msgElement.id = `msg-${id}`;
    msgElement.innerText = `${sender}: ${content}`;
    
    const pinButton = document.createElement("button");
    pinButton.innerText = isPinned ? "Unpin" : "Pin";
    pinButton.onclick = () => {
        sendPinMessageRequest(id, !isPinned);
    };
    
    msgElement.appendChild(pinButton);
    chatContainer.appendChild(msgElement);
}

ท้าให้ลอง!

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

EP ถัดไป:
ใน EP ถัดไป เราจะมาดู การเพิ่มฟีเจอร์การบันทึกประวัติการสนทนาใน WebSocket Chat เพื่อให้ผู้ใช้สามารถเข้าถึงประวัติการสนทนาในภายหลังได้