ทำไมต้องมีฟีเจอร์ลบข้อความใน WebSocket Chat?

ฟีเจอร์ Delete Messages ช่วยให้ผู้ใช้สามารถลบข้อความที่ส่งไปแล้ว ทำให้:

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

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

1. WebSocket Server - จัดการการลบข้อความจากฐานข้อมูลและแจ้งให้ลูกค้าทุกคนทราบ
2. Database (PostgreSQL / MongoDB) - เก็บสถานะของข้อความที่ถูกลบ
3. Frontend (Client-Side) - แสดง UI ปุ่มลบข้อความ และอัปเดตผลลัพธ์แบบเรียลไทม์

การเพิ่มฟีเจอร์ Delete Messages ใน WebSocket Server

1. อัปเดตฐานข้อมูลให้รองรับการลบข้อความ

ไฟล์ schema.sql

ALTER TABLE chat_messages ADD COLUMN deleted BOOLEAN DEFAULT FALSE;

2. เพิ่มโค้ดลบข้อความใน WebSocket Server

ไฟล์ websocket_server.go

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-Side)

ไฟล์ client.js

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) {
        document.getElementById(`msg-${data.messageID}`).innerText = "(Message 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 = () => sendDeleteRequest(id);
    
    msgElement.appendChild(deleteButton);
    chatContainer.appendChild(msgElement);
}

การแสดงปุ่มลบข้อความบน UI

ไฟล์ index.html

<div id="chat-container"></div>

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

1. รัน WebSocket Server

go run websocket_server.go

2. เปิดหน้าเว็บและลองพิมพ์ข้อความ
3. คลิกปุ่มลบข้อความและดูผลลัพธ์ที่ UI

ท้าให้ลอง!

ลองเพิ่ม การแจ้งเตือนเมื่อมีการลบข้อความ หรือ ให้แสดงข้อความ “This message was deleted” แทนการลบข้อความออกจาก UI

EP ถัดไป

ใน EP.50, เราจะเพิ่ม ฟีเจอร์แก้ไขข้อความที่ส่งไปแล้วใน WebSocket Chat 🚀