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

ฟีเจอร์ Edit Messages ช่วยให้ผู้ใช้สามารถแก้ไขข้อความที่ส่งไปแล้ว ซึ่งมีประโยชน์ดังนี้:

• แก้ไขข้อความที่พิมพ์ผิดพลาด (Typo Correction)
• ปรับปรุงความหมายของข้อความที่ส่งไปแล้ว
• ช่วยให้การสนทนามีประสิทธิภาพมากขึ้น

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

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

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

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

ไฟล์ schema.sql

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

type EditResponse struct {
    MessageID  int    `json:"messageID"`
    NewContent string `json:"newContent"`
    Edited     bool   `json:"edited"`
}

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

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

    for {
        var request EditRequest
        err := conn.ReadJSON(&request)
        if err != nil {
            delete(clients, conn)
            break
        }
        
        _, err = db.Exec("UPDATE chat_messages SET content = $1, edited = TRUE WHERE id = $2 AND sender = $3", request.NewContent, request.MessageID, request.Sender)
        if err == nil {
            broadcast <- EditResponse{MessageID: request.MessageID, NewContent: request.NewContent, Edited: 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", handleEditMessage)
    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.edited) {
        document.getElementById(`msg-${data.messageID}`).innerText = `${data.newContent} (Edited)`;
    }
};

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

function displayMessage(id, sender, content) {
    const msgElement = document.createElement("p");
    msgElement.id = `msg-${id}`;
    msgElement.innerText = `${sender}: ${content}`;
    
    const editButton = document.createElement("button");
    editButton.innerText = "Edit";
    editButton.onclick = () => {
        const newContent = prompt("Edit your message:", content);
        if (newContent) sendEditRequest(id, newContent);
    };
    
    msgElement.appendChild(editButton);
    chatContainer.appendChild(msgElement);
}

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

ไฟล์ index.html

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

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

1. รัน WebSocket Server

go run websocket_server.go

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

ท้าให้ลอง!

ลองเพิ่ม ฟีเจอร์กำหนดเวลาสำหรับการแก้ไขข้อความ (Edit Timeout) เพื่อให้ผู้ใช้สามารถแก้ไขข้อความได้ภายในเวลาที่กำหนดเท่านั้น

นี่คือจุดเริ่มต้นของ WebSocket Chat ที่สมบูรณ์แบบ! 🚀