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

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

ขั้นตอนการเพิ่มฟีเจอร์ลบข้อความใน WebSocket Chat:

1. การอัปเดตฐานข้อมูลเพื่อรองรับการลบข้อความ
2. เพิ่มโค้ดใน WebSocket Server เพื่อจัดการการลบข้อความ
3. การสร้าง UI ปุ่มลบข้อความใน Frontend
4. การทดสอบระบบ

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

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

อัปเดตฐานข้อมูลเพื่อรองรับการลบข้อความ โดยจะเพิ่มคอลัมน์ deleted เพื่อติดตามสถานะการลบของข้อความ

ALTER TABLE chat_messages ADD COLUMN deleted 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 DeleteRequest struct {
    MessageID int    `json:"messageID"`
    Sender    string `json:"sender"`
}

type DeleteResponse struct {
    MessageID int  `json:"messageID"`
    Deleted   bool `json:"deleted"`
}

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

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

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

        // ลบข้อความจากฐานข้อมูล
        _, err = db.Exec("UPDATE chat_messages SET deleted = TRUE WHERE id = $1 AND sender = $2", request.MessageID, request.Sender)
        if err == nil {
            broadcast <- DeleteResponse{MessageID: request.MessageID, Deleted: true}
        }
    }
}

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

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

เพิ่มปุ่มลบข้อความใน UI และส่งคำขอลบไปยัง WebSocket Server

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

socket.onmessage = (event) => {
    const data = JSON.parse(event.data);
    if (data.deleted) {
        const messageElement = document.getElementById(`msg-${data.messageID}`);
        messageElement.innerText = `${messageElement.innerText} (Deleted)`;
    }
};

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

function displayMessage(id, sender, content) {
    const msgElement = document.createElement("p");
    msgElement.id = `msg-${id}`;
    msgElement.innerText = `${sender}: ${content}`;
    
    const deleteButton = document.createElement("button");
    deleteButton.innerText = "Delete";
    deleteButton.onclick = () => {
        if (confirm("Are you sure you want to delete this message?")) {
            sendDeleteRequest(id);
        }
    };
    
    msgElement.appendChild(deleteButton);
    chatContainer.appendChild(msgElement);
}

ท้าให้ลอง!

ลองเพิ่มฟีเจอร์ การยืนยันการลบข้อความ (Delete Confirmation) ให้กับผู้ใช้ เพื่อให้การลบข้อความต้องผ่านการยืนยันก่อนจะทำการลบจริง!

ใน EP ถัดไป เราจะมาดู การเพิ่มฟีเจอร์ตอบกลับข้อความ (Reply to Message) ใน WebSocket Chat ที่ช่วยให้ผู้ใช้สามารถตอบกลับข้อความได้โดยตรง!