ทำไมต้องมีระบบแสดงประวัติการแชทย้อนหลัง?

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

• ช่วยให้การสนทนาไม่ขาดตอน เมื่อผู้ใช้กลับมาใช้งานอีกครั้ง
• สามารถเก็บหลักฐานหรือข้อมูลสำคัญในการสนทนา
• ทำให้ WebSocket Chat มีความสมบูรณ์มากขึ้น

โครงสร้างของระบบแสดงประวัติการแชทใน WebSocket Chat

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

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

1. สร้างฐานข้อมูลสำหรับเก็บข้อความ

ไฟล์ schema.sql

CREATE TABLE chat_messages (
    id SERIAL PRIMARY KEY,
    sender TEXT NOT NULL,
    content TEXT NOT NULL,
    timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

2. เพิ่มโค้ดสำหรับบันทึกข้อความลงฐานข้อมูล

ไฟล์ websocket_server.go

package main

import (
    "database/sql"
    "encoding/json"
    "fmt"
    "net/http"
    "sync"
    "time"

    "github.com/gorilla/websocket"
    _ "github.com/lib/pq"
)

type Message struct {
    ID        int       `json:"id"`
    Sender    string    `json:"sender"`
    Content   string    `json:"content"`
    Timestamp time.Time `json:"timestamp"`
}

var upgrader = websocket.Upgrader{
    CheckOrigin: func(r *http.Request) bool { return true },
}

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

func init() {
    var err error
    db, err = sql.Open("postgres", "user=your_user password=your_password dbname=chat_db sslmode=disable")
    if err != nil {
        panic(err)
    }
}

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

    rows, _ := db.Query("SELECT id, sender, content, timestamp FROM chat_messages ORDER BY timestamp ASC")
    defer rows.Close()
    
    for rows.Next() {
        var msg Message
        rows.Scan(&msg.ID, &msg.Sender, &msg.Content, &msg.Timestamp)
        conn.WriteJSON(msg)
    }

    for {
        var msg Message
        err := conn.ReadJSON(&msg)
        if err != nil {
            delete(clients, conn)
            break
        }
        
        db.Exec("INSERT INTO chat_messages (sender, content) VALUES ($1, $2)", msg.Sender, msg.Content)
        broadcast <- msg
    }
}

func handleMessages() {
    for {
        msg := <-broadcast
        for client := range clients {
            err := client.WriteJSON(msg)
            if err != nil {
                client.Close()
                delete(clients, client)
            }
        }
    }
}

func main() {
    http.HandleFunc("/ws", handleConnections)
    go handleMessages()
    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);
    displayMessage(data.sender, data.content, data.timestamp);
};

function displayMessage(sender, content, timestamp) {
    const msgElement = document.createElement("p");
    msgElement.innerText = `${sender}: ${content} (${new Date(timestamp).toLocaleTimeString()})`;
    chatContainer.appendChild(msgElement);
}

การแสดงผล Chat History บน UI

ไฟล์ index.html

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

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

1. รัน WebSocket Server

go run websocket_server.go

2. เปิดหน้าเว็บและลองพิมพ์ข้อความ
3. รีเฟรชหน้าเว็บแล้วดูว่าข้อความเก่ายังอยู่หรือไม่

ท้าให้ลอง!

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

EP ถัดไป

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