ทำไมต้องมีฟีเจอร์ปักหมุดข้อความ?

Pinned Messages หรือ การปักหมุดข้อความ เป็นฟีเจอร์ที่ช่วยให้ผู้ใช้สามารถเก็บข้อความสำคัญไว้ดูภายหลังได้ โดยมีประโยชน์ดังนี้:

• ช่วยให้ข้อความสำคัญไม่สูญหาย ในการสนทนาที่มีปริมาณข้อความมาก
• ใช้เป็นช่องทางประกาศสำคัญ สำหรับกลุ่มหรือทีมงาน
• ช่วยให้ผู้ใช้สามารถเข้าถึงข้อมูลสำคัญได้ง่ายขึ้น

โครงสร้างของระบบปักหมุดข้อความใน WebSocket Chat

1. WebSocket Server - รับและส่งสถานะการปักหมุดข้อความ
2. Database - เก็บข้อมูลข้อความที่ถูกปักหมุด
3. Frontend (Client-Side) - แสดงรายการข้อความที่ถูกปักหมุดให้ผู้ใช้

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

1. อัปเกรด WebSocket Server ให้รองรับ Pinned Messages

ไฟล์ websocket_server.go

package main

import (
    "encoding/json"
    "fmt"
    "net/http"
    "sync"

    "github.com/gorilla/websocket"
)

type PinnedMessage struct {
    MessageID int    `json:"messageID"`
    RoomID    int    `json:"roomID"`
    PinnedBy  string `json:"pinnedBy"`
}

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

var (
    clients   = make(map[*websocket.Conn]bool)
    pinned    = make(map[int]PinnedMessage)
    broadcast = make(chan PinnedMessage)
    mu        sync.Mutex
)

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

    for {
        var pinnedMsg PinnedMessage
        err := conn.ReadJSON(&pinnedMsg)
        if err != nil {
            delete(clients, conn)
            break
        }
        broadcast <- pinnedMsg
    }
}

func handleMessages() {
    for {
        pinnedMsg := <-broadcast
        mu.Lock()
        pinned[pinnedMsg.MessageID] = pinnedMsg
        mu.Unlock()
        
        for client := range clients {
            err := client.WriteJSON(pinnedMsg)
            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)
}

2. การเพิ่มฟังก์ชัน Pinned Messages ใน Frontend (Client-Side)

ไฟล์ client.js

const socket = new WebSocket("ws://localhost:8080/ws");
const pinnedContainer = document.getElementById("pinned-messages");

socket.onmessage = (event) => {
    const data = JSON.parse(event.data);
    if (data.messageID) {
        const pinnedElement = document.createElement("p");
        pinnedElement.innerText = `Pinned Message: ${data.messageID} by ${data.pinnedBy}`;
        pinnedContainer.appendChild(pinnedElement);
    }
};

function pinMessage(messageID) {
    socket.send(JSON.stringify({ roomID: 1, messageID, pinnedBy: "JohnDoe" }));
}

การแสดง Pinned Messages บน UI

ไฟล์ index.html

<div id="pinned-messages"></div>
<button onclick="pinMessage(1)">Pin Message 1</button>

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

1. รัน WebSocket Server

go run websocket_server.go

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

ท้าให้ลอง!

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

EP ถัดไป

ใน EP.44, เราจะเพิ่ม ฟีเจอร์แสดงจำนวนผู้ใช้ที่ออนไลน์ใน WebSocket Chat 🚀