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

ทำไมต้องมีฟีเจอร์การบันทึกประวัติการสนทนา?

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

ข้อดีของการบันทึกประวัติการสนทนา:

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

โครงสร้างของฟีเจอร์การบันทึกประวัติการสนทนาใน WebSocket Chat

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

ส่วนประกอบหลักของระบบการบันทึกประวัติการสนทนา:

• การเก็บข้อมูลในฐานข้อมูล: ข้อความที่ถูกส่งในห้องแชทจะถูกเก็บในฐานข้อมูลเพื่อให้สามารถเรียกดูได้ในภายหลัง
• การจัดการข้อมูลด้วยการดึงข้อมูล (Querying): เราจะต้องสามารถดึงข้อมูลการสนทนาจากฐานข้อมูลโดยการใช้งาน SQL Queries หรือ ORM (Object-Relational Mapping)
• การแสดงข้อมูลใน UI: ข้อมูลการสนทนาจะถูกแสดงใน UI ของแอปพลิเคชันเพื่อให้ผู้ใช้สามารถดูประวัติการสนทนาได้

วิธีการเพิ่มฟีเจอร์การบันทึกประวัติการสนทนาใน WebSocket Server

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

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

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

การสร้าง UI ให้ผู้ใช้สามารถดูประวัติการสนทนา

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

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

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

การทดสอบฟีเจอร์การบันทึกประวัติการสนทนา

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

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

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

ตัวอย่างโค้ดสำหรับการบันทึกประวัติการสนทนาใน WebSocket Chat

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

เพิ่มตาราง chat_history ในฐานข้อมูลเพื่อเก็บประวัติการสนทนา

CREATE TABLE chat_history (
    id SERIAL PRIMARY KEY,
    sender VARCHAR(255),
    content TEXT,
    timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

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 ChatMessage struct {
    Sender  string `json:"sender"`
    Content string `json:"content"`
}

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

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

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

        // บันทึกข้อความลงในฐานข้อมูล
        _, err = db.Exec("INSERT INTO chat_history (sender, content) VALUES ($1, $2)", message.Sender, message.Content)
        if err == nil {
            broadcast <- message
        }
    }
}

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

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

เพิ่มฟีเจอร์ในการแสดงประวัติการสนทนาใน UI

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.createElement("p");
    messageElement.innerText = `${data.sender}: ${data.content}`;
    chatContainer.appendChild(messageElement);
};

function displayHistory() {
    fetch('/history')
        .then(response => response.json())
        .then(messages => {
            messages.forEach(msg => {
                const messageElement = document.createElement("p");
                messageElement.innerText = `${msg.sender}: ${msg.content}`;
                chatContainer.appendChild(messageElement);
            });
        });
}

ท้าให้ลอง!

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

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