EP.58 การเพิ่มฟีเจอร์การแจ้งเตือนแบบพุช (Push Notification) ใน WebSocket Chat

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

ทำไมต้องมีฟีเจอร์การแจ้งเตือนแบบพุช?

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

ข้อดีของการแจ้งเตือนแบบพุช:

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

โครงสร้างของระบบการแจ้งเตือนแบบพุชใน WebSocket Chat

การแจ้งเตือนแบบพุชจะทำงานร่วมกับ WebSocket Server โดยการส่งข้อมูลการแจ้งเตือนจากเซิร์ฟเวอร์ไปยังผู้ใช้ที่เชื่อมต่ออยู่ในห้องแชท โดยอาศัยการตั้งค่าผ่าน Push Notification API เพื่อส่งข้อความแจ้งเตือนไปยังอุปกรณ์ของผู้ใช้

ส่วนประกอบหลักของระบบการแจ้งเตือนแบบพุช:

การตั้งค่าการแจ้งเตือนใน WebSocket Server: เซิร์ฟเวอร์จะรับและส่งข้อมูลการแจ้งเตือนเมื่อมีข้อความใหม่หรือการอัปเดตในห้องแชท
การใช้ Push Notification API: ใช้บริการ Push Notification API ที่ให้บริการส่งการแจ้งเตือนไปยังอุปกรณ์ผู้ใช้
การแสดงผลการแจ้งเตือนใน UI: ผู้ใช้สามารถเห็นการแจ้งเตือนผ่านการแสดงผลใน UI ของแอปพลิเคชัน

วิธีการเพิ่มฟีเจอร์การแจ้งเตือนแบบพุชใน WebSocket Server

การอัปเดต WebSocket Server เพื่อรองรับการส่งการแจ้งเตือนแบบพุชและการจัดการการแจ้งเตือนที่เกี่ยวข้องกับห้องแชท

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

การเชื่อมต่อ WebSocket Server กับ Push Notification API: เซิร์ฟเวอร์จะต้องเชื่อมต่อกับ Push Notification API ที่ให้บริการการส่งการแจ้งเตือน
การส่งข้อมูลการแจ้งเตือน: เมื่อมีข้อความใหม่หรือการอัปเดตในห้องแชท เซิร์ฟเวอร์จะส่งการแจ้งเตือนไปยังผู้ใช้ที่เชื่อมต่อ
การจัดการการแจ้งเตือน: เมื่อการแจ้งเตือนถูกส่งออกไปแล้ว ผู้ใช้จะได้รับการแจ้งเตือนทันที

การสร้าง UI สำหรับการแสดงการแจ้งเตือนใน WebSocket Chat

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

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

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

การทดสอบฟีเจอร์การแจ้งเตือนแบบพุช

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

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

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

ตัวอย่างโค้ดสำหรับการแจ้งเตือนแบบพุชใน WebSocket Chat

การอัปเดต WebSocket Server (Backend)

การเชื่อมต่อกับ Push Notification API และการส่งการแจ้งเตือน

package main

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

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

type PushNotificationRequest struct {
    Message string `json:"message"`
    UserID  string `json:"user_id"`
}

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

func sendPushNotification(message string, userID string) {
    // Call your Push Notification API to send notifications
    fmt.Printf("Sending push notification to %s: %s\n", userID, message)
}

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

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

        // Send push notification
        sendPushNotification(message.Message, message.UserID)

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

โค้ดใน 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.message}`;
    chatContainer.appendChild(messageElement);

    // Display notification
    new Notification("New message", { body: data.message });
};

function sendMessage(message) {
    socket.send(JSON.stringify({ message }));
}

ท้าให้ลอง!

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

EP ถัดไป:
ใน EP ถัดไป เราจะมาดู การทำให้ WebSocket Server รองรับการสเกล (Scalability) ด้วย Redis เพื่อให้สามารถรองรับการขยายขนาดของแอปพลิเคชันได้ดีขึ้น!