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

ทำไมต้องมีฟีเจอร์การติดตามข้อความที่ถูกตอบกลับ?

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

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

การเพิ่มฟีเจอร์การติดตามข้อความที่ถูกตอบกลับใน WebSocket Server

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

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

การสร้าง UI ให้ผู้ใช้สามารถติดตามคำตอบของข้อความที่ตอบกลับ

เพื่อให้การติดตามคำตอบของข้อความที่ตอบกลับมีความสะดวกมากขึ้น เราจะเพิ่มปุ่ม "Follow-up" ใน UI ของแอปพลิเคชัน โดยเมื่อผู้ใช้คลิกที่ปุ่มนี้ ระบบจะให้ผู้ใช้สามารถเห็นข้อความต้นฉบับที่ถูกตอบกลับ และแสดงคำตอบในที่เดียวกัน ซึ่งจะช่วยให้การติดตามการตอบกลับทำได้ง่ายขึ้น

นอกจากนี้ การแสดงผลข้อความตอบกลับใน UI จะทำให้ผู้ใช้เห็นความเชื่อมโยงระหว่างข้อความที่ตอบกลับกับข้อความต้นฉบับ เช่น แสดงข้อความที่ตอบกลับไว้ใต้ข้อความต้นฉบับ พร้อมด้วยป้ายชื่อว่า "Replied to" หรือ "Follow-up" เพื่อให้ผู้ใช้เข้าใจว่าเป็นการตอบกลับจากข้อความไหน

การทดสอบฟีเจอร์การติดตามข้อความที่ถูกตอบกลับ

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

1. ทดสอบการส่งข้อความและการตอบกลับภายในห้องแชท

2. ตรวจสอบว่าเมื่อผู้ใช้ตอบกลับข้อความ ระบบจะแสดงข้อความตอบกลับในลำดับที่ถูกต้อง

3. ทดสอบการอัปเดต UI ให้แสดงข้อความตอบกลับแบบถูกต้องและเชื่อมโยงกับข้อความต้นฉบับ

การทดสอบเหล่านี้จะช่วยให้แน่ใจว่าฟีเจอร์ Follow-up on Replies ทำงานได้ถูกต้อง และผู้ใช้สามารถติดตามคำตอบได้อย่างสะดวกโดยไม่พลาดข้อความสำคัญในแอปพลิเคชัน

ตัวอย่างโค้ดสำหรับการติดตามข้อความที่ถูกตอบกลับใน WebSocket Chat

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

อัปเดตฐานข้อมูลเพื่อรองรับการติดตามข้อความที่ตอบกลับ โดยเพิ่มคอลัมน์ follow_up_message_id เพื่อเชื่อมโยงข้อความที่ตอบกลับกับข้อความต้นฉบับ

ALTER TABLE chat_messages ADD COLUMN follow_up_message_id INT REFERENCES chat_messages(id);

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 FollowUpRequest struct {
    MessageID   int    `json:"messageID"`
    Sender      string `json:"sender"`
    NewContent  string `json:"newContent"`
    FollowUpID  int    `json:"followUpID"`
}

type FollowUpResponse struct {
    MessageID   int    `json:"messageID"`
    NewContent  string `json:"newContent"`
    Sender      string `json:"sender"`
    FollowUpID  int    `json:"followUpID"`
}

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

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

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

        // Save the follow-up message into the database
        _, err = db.Exec("INSERT INTO chat_messages (content, sender, follow_up_message_id) VALUES ($1, $2, $3)", request.NewContent, request.Sender, request.FollowUpID)
        if err == nil {
            broadcast <- FollowUpResponse{MessageID: request.MessageID, NewContent: request.NewContent, Sender: request.Sender, FollowUpID: request.FollowUpID}
        }
    }
}

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", handleFollowUpMessage)
    go notifyClients()
    fmt.Println("WebSocket Server Running on Port 8080")
    http.ListenAndServe(":8080", nil)
}

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

เพิ่มปุ่ม "Follow-up" เพื่อให้ผู้ใช้สามารถติดตามคำตอบของข้อความที่ตอบกลับได้

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.followUpID) {
        messageElement.innerHTML = `${data.sender} replied: ${data.newContent}`;
    }
};

function sendFollowUpRequest(messageID, newContent, followUpID) {
    socket.send(JSON.stringify({ messageID, sender: "JohnDoe", newContent, followUpID }));
}

function displayMessage(id, sender, content) {
    const msgElement = document.createElement("p");
    msgElement.id = `msg-${id}`;
    msgElement.innerText = `${sender}: ${content}`;
    
    const followUpButton = document.createElement("button");
    followUpButton.innerText = "Follow-up";
    followUpButton.onclick = () => {
        const newContent = prompt("Follow up on this message:", content);
        if (newContent) sendFollowUpRequest(id, newContent, id);
    };
    
    msgElement.appendChild(followUpButton);
    chatContainer.appendChild(msgElement);
}

ท้าให้ลอง!

ลองเพิ่มฟีเจอร์ การแสดงข้อความที่ถูกตอบกลับ (Show Replied Message) เพื่อให้ผู้ใช้สามารถเห็นข้อความต้นฉบับที่ถูกตอบกลับเมื่อแสดงผลลัพธ์การตอบกลับใน UI!

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