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

ทำไมต้องมีฟีเจอร์การปักหมุดข้อความสำคัญ?

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

ข้อดีของการปักหมุดข้อความ:

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

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

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

ส่วนประกอบหลักของระบบการปักหมุดข้อความ:

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

วิธีการเพิ่มฟีเจอร์การปักหมุดข้อความใน WebSocket Server

ในการเพิ่มฟีเจอร์การปักหมุดข้อความใน WebSocket Server เราจะต้องอัปเดตโค้ดของเซิร์ฟเวอร์เพื่อรองรับการปักหมุดข้อความ รวมถึงการอัปเดตฐานข้อมูลให้สามารถจัดการกับสถานะการปักหมุดข้อความได้

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

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

การสร้าง UI ให้ผู้ใช้สามารถปักหมุดข้อความได้

เพื่อให้ผู้ใช้สามารถปักหมุดข้อความใน UI ได้ง่ายขึ้น เราจะเพิ่มปุ่ม "Pin" ที่สามารถคลิกได้ เพื่อให้ผู้ใช้สามารถปักหมุดหรือยกเลิกการปักหมุดข้อความได้

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

• เพิ่มปุ่ม "Pin" ใน UI: ในแต่ละข้อความจะมีปุ่ม "Pin" ที่สามารถคลิกได้ ซึ่งเมื่อผู้ใช้คลิก จะทำให้ข้อความนั้นถูกปักหมุดหรือยกเลิกการปักหมุด
• แสดงข้อความที่ถูกปักหมุด: ข้อความที่ถูกปักหมุดจะถูกแสดงที่ตำแหน่งเดิมในห้องแชทและอาจถูกไฮไลท์ด้วยสีหรือข้อความเพิ่มเติม เช่น "Pinned" เพื่อให้ผู้ใช้สามารถเห็นข้อความที่สำคัญได้ง่าย

การทดสอบฟีเจอร์การปักหมุดข้อความ

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

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

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

ตัวอย่างโค้ดสำหรับการปักหมุดข้อความใน WebSocket Chat

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

เพิ่มคอลัมน์ is_pinned ในตาราง chat_messages เพื่อใช้ในการติดตามข้อความที่ถูกปักหมุด

ALTER TABLE chat_messages ADD COLUMN is_pinned 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 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)

เพิ่มปุ่ม "Pin" เพื่อให้ผู้ใช้สามารถปักหมุดข้อความได้

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)`;
    }
};

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);
}

ท้าให้ลอง!

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

EP ถัดไป:

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