[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-blogs-th-1-1-all-websocket-multilingual-support-all--*":3,"academy-blog-translations-0fq0xx5x6dd7v81":79},{"data":4,"page":67,"perPage":67,"totalItems":67,"totalPages":67},[5],{"alt":6,"collectionId":7,"collectionName":8,"content":9,"cover_image":10,"cover_image_path":11,"created":12,"created_by":13,"expand":14,"id":74,"keywords":75,"locale":49,"published_at":76,"scheduled_at":13,"school_blog":71,"short_description":77,"status":69,"title":6,"updated":78,"updated_by":13,"slug":72,"views":73},"EP.74 การปรับแต่ง WebSocket Server เพื่อรองรับหลายภาษา (Multilingual Support)","sclblg987654321","school_blog_translations","\u003Cp>ในตอนนี้ เราจะพูดถึงวิธีการปรับแต่ง WebSocket Server ให้สามารถรองรับการใช้งานในหลายภาษา (Multilingual Support) โดยมีเป้าหมายเพื่อให้ผู้ใช้สามารถสื่อสารในภาษาที่ตนถนัด ผ่านระบบ WebSocket Chat ได้อย่างราบรื่น โดยไม่จำเป็นต้องพัฒนาแอปพลิเคชันแยกต่างหากสำหรับแต่ละภาษา\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Cp>Multilingual Support เป็นฟีเจอร์สำคัญสำหรับแอปพลิเคชันที่ต้องการขยายการใช้งานสู่ตลาดต่างประเทศ และเพิ่มประสบการณ์ที่ดีให้กับผู้ใช้จากหลากหลายวัฒนธรรม\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>🔸 ทำไมต้องรองรับหลายภาษาใน WebSocket Chat?\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>1. รองรับผู้ใช้จากหลายประเทศ:\u003Cbr>ช่วยให้ผู้ใช้สามารถเลือกภาษาที่ตนถนัด เพิ่มความสะดวกในการใช้งาน\u003C\u002Fp>\u003Cp>2. เพิ่มความสะดวกในการสื่อสาร:\u003Cbr>ไม่จำเป็นต้องพึ่งเครื่องมือแปลภายนอก ผู้ใช้สามารถสื่อสารได้ทันทีในภาษาของตน\u003C\u002Fp>\u003Cp>3. ขยายตลาดและฐานผู้ใช้:\u003Cbr>เข้าถึงผู้ใช้จากประเทศใหม่ ๆ ได้ง่ายขึ้น\u003C\u002Fp>\u003Cp>4. ยกระดับประสบการณ์ผู้ใช้ (UX):\u003Cbr>ผู้ใช้รู้สึกคุ้นเคยและเป็นมิตรกับแอปมากขึ้นเมื่อสามารถใช้งานเป็นภาษาของตนเอง\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>🔸 วิธีการเพิ่ม Multilingual Support ใน WebSocket Server\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Ch3>1. การจัดการภาษาผ่าน WebSocket Server\u003C\u002Fh3>\u003Cul>\u003Cli>1.1 เก็บข้อมูลภาษาของผู้ใช้:\u003Cbr>เก็บค่าภาษาไว้ในฐานข้อมูลหรือ session เพื่อใช้ในการกำหนดภาษาของข้อความ\u003C\u002Fli>\u003C\u002Ful>\u003Cpre>\u003Ccode class=\"language-plaintext language-sql\">ALTER TABLE users ADD COLUMN language VARCHAR(10) DEFAULT 'en';\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Cul>\u003Cli>1.2 ใช้ภาษาที่ผู้ใช้เลือกในการส่งข้อความ:\u003Cbr>ตัวอย่าง Go Code (ใช้ Gorilla WebSocket และ PostgreSQL):\u003C\u002Fli>\u003C\u002Ful>\u003Cpre>\u003Ccode class=\"language-plaintext language-go\">var clients = make(map[*websocket.Conn]string) \u002F\u002F เก็บภาษาที่ผู้ใช้เลือก\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch3>✅ ตัวอย่างโค้ด Go สำหรับ WebSocket Server ที่รองรับหลายภาษา:\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-plaintext language-go\">package main\n\nimport (\n    \"log\"\n    \"net\u002Fhttp\"\n    \"github.com\u002Fgorilla\u002Fwebsocket\"\n    \"database\u002Fsql\"\n    _ \"github.com\u002Flib\u002Fpq\"\n)\n\nvar clients = make(map[*websocket.Conn]string)\nvar db *sql.DB\n\ntype Message struct {\n    User    string `json:\"user\"`\n    Message string `json:\"message\"`\n}\n\nvar upgrader = websocket.Upgrader{\n    CheckOrigin: func(r *http.Request) bool {\n        return true\n    },\n}\n\nfunc init() {\n    var err error\n    db, err = sql.Open(\"postgres\", \"user=username dbname=chatapp sslmode=disable\")\n    if err != nil {\n        log.Fatal(err)\n    }\n}\n\nfunc handleConnections(w http.ResponseWriter, r *http.Request) {\n    conn, err := upgrader.Upgrade(w, r, nil)\n    if err != nil {\n        log.Println(err)\n        return\n    }\n    defer conn.Close()\n\n    lang := r.URL.Query().Get(\"lang\")\n    if lang == \"\" {\n        lang = \"en\"\n    }\n    clients[conn] = lang\n\n    for {\n        var msg Message\n        err := conn.ReadJSON(&msg)\n        if err != nil {\n            log.Println(err)\n            delete(clients, conn)\n            break\n        }\n        translateAndBroadcast(msg, lang)\n    }\n}\n\nfunc translateAndBroadcast(msg Message, lang string) {\n    translatedMessage := msg.Message\n    if lang == \"es\" {\n        translatedMessage = \"¡Hola, \" + msg.User + \"!\"\n    }\n\n    for client := range clients {\n        err := client.WriteJSON(Message{\n            User:    msg.User,\n            Message: translatedMessage,\n        })\n        if err != nil {\n            log.Println(err)\n            client.Close()\n            delete(clients, client)\n        }\n    }\n}\n\nfunc main() {\n    http.HandleFunc(\"\u002F\", handleConnections)\n    log.Println(\"Server started on :8080\")\n    log.Fatal(http.ListenAndServe(\":8080\", nil))\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch3>2. การแปลข้อความอัตโนมัติ\u003C\u002Fh3>\u003Cp>สามารถใช้ API ภายนอก เช่น Google Translate API หรือระบบแปลภาษาภายใน (เช่น JSON\u002FYAML ที่เก็บข้อความแปลไว้ล่วงหน้า)\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch3>3. การปรับ UI สำหรับการเลือกภาษา\u003C\u002Fh3>\u003Cp>ฝั่ง Client ควรมีตัวเลือกให้ผู้ใช้สามารถเลือกภาษาที่ต้องการได้ เช่น:\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><select id=\"languageSelector\" onchange=\"changeLanguage()\">\n    <option value=\"en\">English<\u002Foption>\n    <option value=\"es\">Español<\u002Foption>\n    <option value=\"fr\">Français<\u002Foption>\n<\u002Fselect>\n\n<script>\nfunction changeLanguage() {\n    var selectedLanguage = document.getElementById(\"languageSelector\").value;\n    \u002F\u002F ส่งค่าภาษาไปยัง Server\n    socket.send(JSON.stringify({ language: selectedLanguage }));\n}\n<\u002Fscript>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch3>🔸 การทดสอบระบบ Multilingual Support\u003C\u002Fh3>\u003Cul>\u003Cli>✅ เลือกภาษาได้: ทดสอบว่าผู้ใช้สามารถเลือกภาษาได้จริง\u003C\u002Fli>\u003Cli>✅ ข้อความถูกแปล: ตรวจสอบว่าข้อความที่ส่งมีการแปลก่อนถูกส่งถึง Client\u003C\u002Fli>\u003Cli>✅ ระบบยังคงเสถียร: รองรับผู้ใช้หลายคน หลายภาษา โดยไม่มีปัญหาด้านประสิทธิภาพ\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Chr>\u003Cp> \u003C\u002Fp>\u003Ch2>💡 ท้าให้ลอง!\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>เพิ่มระบบแปลข้อความอัตโนมัติแบบเรียลไทม์ เพื่อให้ผู้ใช้แต่ละคนสามารถสนทนาในภาษาของตนได้ โดยไม่ต้องแปลเอง!\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>🔜 EP ถัดไป:\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>EP.75 - การใช้ Redis สำหรับการจัดการสถานะผู้ใช้ (User State Management)\u003Cbr>เรียนรู้การใช้ Redis เพื่อจัดการสถานะของผู้ใช้ใน WebSocket เช่น การออนไลน์\u002Fออฟไลน์, การเข้าร่วมห้องแชท และอื่น ๆ!\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Cp>\u003Cstrong>อ่านบทความ Series อื่นๆ\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002Fblogs\u002Fcategories\u002FGolang\">\u003Cstrong>Golang The Series\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002Fblogs\u002Fcategories\u002FJS2GO\">\u003Cstrong>JS2GO\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002Fblogs\u002Fcategories\u002FTailwind%20CSS\">\u003Cstrong>10 Ep ที่จะให้คุณเป็นมือโปร Tailwind CSS ในชั่วข้ามคืน\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cstrong>🔵 Facebook: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.facebook.com\u002Fsuperdev.school.th\">\u003Cstrong>Superdev School  (Superdev)\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cp>\u003Cstrong>📸 Instagram: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.instagram.com\u002Fsuperdevschool\u002F\">\u003Cstrong>superdevschool\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cp>\u003Cstrong>🎬 TikTok: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.tiktok.com\u002F@superdevschool\">\u003Cstrong>superdevschool\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cp class=\"\" data-start=\"5978\" data-end=\"6095\">\u003Cstrong>🌐 Website: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002F\">\u003Cstrong>www.superdev.school\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>","119_11zon_moohvku1tt.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002F55r8e7egchg4g39\u002F119_11zon_moohvku1tt.webp","2026-03-04 08:47:15.005Z","",{"keywords":15,"locale":43,"school_blog":53},[16,23,28,33,38],{"collectionId":17,"collectionName":18,"created":19,"created_by":13,"id":20,"name":21,"updated":22,"updated_by":13},"sclkey987654321","school_keywords","2026-03-04 08:46:14.782Z","v0mhensk18fofru","WebSocket Chat","2026-04-10 16:13:10.563Z",{"collectionId":17,"collectionName":18,"created":24,"created_by":13,"id":25,"name":26,"updated":27,"updated_by":13},"2026-03-04 08:47:14.191Z","7u338iztio7kpzz","Multilingual Support","2026-04-10 16:13:25.674Z",{"collectionId":17,"collectionName":18,"created":29,"created_by":13,"id":30,"name":31,"updated":32,"updated_by":13},"2026-03-04 08:33:59.518Z","7pqn3y8ffwzzde5","ภาษา Go","2026-04-10 16:08:04.777Z",{"collectionId":17,"collectionName":18,"created":34,"created_by":13,"id":35,"name":36,"updated":37,"updated_by":13},"2026-03-04 08:20:11.547Z","ey3puyme01a9bsw","Go","2026-04-10 16:07:25.893Z",{"collectionId":17,"collectionName":18,"created":39,"created_by":13,"id":40,"name":41,"updated":42,"updated_by":13},"2026-03-04 08:34:00.920Z","ecac9y661or1xka","WebSocket","2026-04-10 16:08:05.227Z",{"code":44,"collectionId":45,"collectionName":46,"created":47,"flag":48,"id":49,"is_default":50,"label":51,"updated":52},"th","pbc_1989393366","locales","2026-01-22 10:59:55.832Z","twemoji:flag-thailand","s8wri3bt4vgg2ji",true,"Thai","2026-04-10 15:42:46.614Z",{"category":54,"collectionId":55,"collectionName":56,"created":13,"expand":57,"id":71,"slug":72,"updated":13,"views":73},"wqxt7ag2gn7xcmk","pbc_2105096300","school_blogs",{"category":58},{"blogIds":59,"collectionId":60,"collectionName":61,"created":62,"created_by":13,"id":54,"image":63,"image_alt":13,"image_path":64,"label":65,"name":66,"priority":67,"publish_at":68,"scheduled_at":13,"status":69,"updated":70,"updated_by":13},[],"sclcatblg987654321","school_category_blogs","2026-03-04 08:33:53.210Z","59ty92ns80w_15oc1implw.png","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclcatblg987654321\u002Fwqxt7ag2gn7xcmk\u002F59ty92ns80w_15oc1implw.png",{"en":66,"th":66},"Golang The Series",1,"2026-03-16 04:39:38.440Z","published","2026-04-25 02:32:15.470Z","0fq0xx5x6dd7v81","websocket-multilingual-support",231,"55r8e7egchg4g39",[20,25,30,35,40],"2025-08-08 01:58:23.556Z","เรียนรู้วิธีการเพิ่ม Multilingual Support ใน WebSocket Chat ด้วยเทคนิคการเก็บภาษาผู้ใช้ แปลข้อความอัตโนมัติ และปรับ UI ให้รองรับหลายภาษา เพื่อยกระดับประสบการณ์การใช้งานของผู้ใช้จากทั่วโลก","2026-04-25 02:48:13.748Z",{"th":72,"en":72}]