EP.74 การปรับแต่ง WebSocket Server เพื่อรองรับหลายภาษา (Multilingual Support)

ในตอนนี้ เราจะพูดถึงวิธีการปรับแต่ง WebSocket Server ให้สามารถรองรับการใช้งานในหลายภาษา (Multilingual Support) โดยมีเป้าหมายเพื่อให้ผู้ใช้สามารถสื่อสารในภาษาที่ตนถนัด ผ่านระบบ WebSocket Chat ได้อย่างราบรื่น โดยไม่จำเป็นต้องพัฒนาแอปพลิเคชันแยกต่างหากสำหรับแต่ละภาษา

Multilingual Support เป็นฟีเจอร์สำคัญสำหรับแอปพลิเคชันที่ต้องการขยายการใช้งานสู่ตลาดต่างประเทศ และเพิ่มประสบการณ์ที่ดีให้กับผู้ใช้จากหลากหลายวัฒนธรรม

🔸 ทำไมต้องรองรับหลายภาษาใน WebSocket Chat?

1. รองรับผู้ใช้จากหลายประเทศ:
ช่วยให้ผู้ใช้สามารถเลือกภาษาที่ตนถนัด เพิ่มความสะดวกในการใช้งาน

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

3. ขยายตลาดและฐานผู้ใช้:
เข้าถึงผู้ใช้จากประเทศใหม่ ๆ ได้ง่ายขึ้น

4. ยกระดับประสบการณ์ผู้ใช้ (UX):
ผู้ใช้รู้สึกคุ้นเคยและเป็นมิตรกับแอปมากขึ้นเมื่อสามารถใช้งานเป็นภาษาของตนเอง

🔸 วิธีการเพิ่ม Multilingual Support ใน WebSocket Server

1. การจัดการภาษาผ่าน WebSocket Server

1.1 เก็บข้อมูลภาษาของผู้ใช้:
เก็บค่าภาษาไว้ในฐานข้อมูลหรือ session เพื่อใช้ในการกำหนดภาษาของข้อความ

ALTER TABLE users ADD COLUMN language VARCHAR(10) DEFAULT 'en';

1.2 ใช้ภาษาที่ผู้ใช้เลือกในการส่งข้อความ:
ตัวอย่าง Go Code (ใช้ Gorilla WebSocket และ PostgreSQL):

var clients = make(map[*websocket.Conn]string) // เก็บภาษาที่ผู้ใช้เลือก

✅ ตัวอย่างโค้ด Go สำหรับ WebSocket Server ที่รองรับหลายภาษา:

package main

import (
    "log"
    "net/http"
    "github.com/gorilla/websocket"
    "database/sql"
    _ "github.com/lib/pq"
)

var clients = make(map[*websocket.Conn]string)
var db *sql.DB

type Message struct {
    User    string `json:"user"`
    Message string `json:"message"`
}

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

func init() {
    var err error
    db, err = sql.Open("postgres", "user=username dbname=chatapp sslmode=disable")
    if err != nil {
        log.Fatal(err)
    }
}

func handleConnections(w http.ResponseWriter, r *http.Request) {
    conn, err := upgrader.Upgrade(w, r, nil)
    if err != nil {
        log.Println(err)
        return
    }
    defer conn.Close()

    lang := r.URL.Query().Get("lang")
    if lang == "" {
        lang = "en"
    }
    clients[conn] = lang

    for {
        var msg Message
        err := conn.ReadJSON(&msg)
        if err != nil {
            log.Println(err)
            delete(clients, conn)
            break
        }
        translateAndBroadcast(msg, lang)
    }
}

func translateAndBroadcast(msg Message, lang string) {
    translatedMessage := msg.Message
    if lang == "es" {
        translatedMessage = "¡Hola, " + msg.User + "!"
    }

    for client := range clients {
        err := client.WriteJSON(Message{
            User:    msg.User,
            Message: translatedMessage,
        })
        if err != nil {
            log.Println(err)
            client.Close()
            delete(clients, client)
        }
    }
}

func main() {
    http.HandleFunc("/", handleConnections)
    log.Println("Server started on :8080")
    log.Fatal(http.ListenAndServe(":8080", nil))
}

2. การแปลข้อความอัตโนมัติ

สามารถใช้ API ภายนอก เช่น Google Translate API หรือระบบแปลภาษาภายใน (เช่น JSON/YAML ที่เก็บข้อความแปลไว้ล่วงหน้า)

3. การปรับ UI สำหรับการเลือกภาษา

ฝั่ง Client ควรมีตัวเลือกให้ผู้ใช้สามารถเลือกภาษาที่ต้องการได้ เช่น:

<select id="languageSelector" onchange="changeLanguage()">
    <option value="en">English</option>
    <option value="es">Español</option>
    <option value="fr">Français</option>
</select>

<script>
function changeLanguage() {
    var selectedLanguage = document.getElementById("languageSelector").value;
    // ส่งค่าภาษาไปยัง Server
    socket.send(JSON.stringify({ language: selectedLanguage }));
}
</script>

🔸 การทดสอบระบบ Multilingual Support

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

💡 ท้าให้ลอง!

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

🔜 EP ถัดไป:

EP.75 - การใช้ Redis สำหรับการจัดการสถานะผู้ใช้ (User State Management)
เรียนรู้การใช้ Redis เพื่อจัดการสถานะของผู้ใช้ใน WebSocket เช่น การออนไลน์/ออฟไลน์, การเข้าร่วมห้องแชท และอื่น ๆ!

อ่านบทความ Series อื่นๆ

🔵 Facebook: Superdev School (Superdev)

📸 Instagram: superdevschool

🎬 TikTok: superdevschool

🌐 Website: www.superdev.school