[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-blogs-th-1-1-all-custom-user-status-websocket-chat-all--*":3,"academy-blog-translations-a1tuyqqcw8tjoap":99},{"data":4,"page":87,"perPage":87,"totalItems":87,"totalPages":87},[5],{"alt":6,"collectionId":7,"collectionName":8,"content":9,"cover_image":10,"cover_image_path":11,"created":12,"created_by":13,"expand":14,"id":93,"keywords":94,"locale":69,"published_at":95,"scheduled_at":13,"school_blog":91,"short_description":96,"slug":97,"status":89,"title":6,"updated":98,"updated_by":13,"views":92},"EP.46 การเพิ่มฟีเจอร์กำหนดสถานะผู้ใช้ (Custom User Status) ใน WebSocket Chat","sclblg987654321","school_blog_translations","\u003Ch3 data-pm-slice=\"1 1 []\">\u003Cspan>\u003Cstrong>ทำไมต้องมีฟีเจอร์กำหนดสถานะผู้ใช้?\u003C\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fh3>\u003Cp>\u003Cspan>ฟีเจอร์ \u003Cstrong>Custom User Status\u003C\u002Fstrong> หรือ \u003Cstrong>การกำหนดสถานะผู้ใช้\u003C\u002Fstrong> ช่วยให้ผู้ใช้สามารถระบุสถานะของตนเองในระบบแชทได้ เช่น:\u003C\u002Fspan>\u003C\u002Fp>\u003Cul data-spread=\"false\">\u003Cli>\u003Cspan>\u003Cstrong>\"ออนไลน์\" (Online)\u003C\u002Fstrong> - พร้อมสนทนา\u003C\u002Fspan>\u003C\u002Fli>\u003Cli>\u003Cspan>\u003Cstrong>\"ไม่ว่าง\" (Busy)\u003C\u002Fstrong> - อยู่ในโหมดห้ามรบกวน\u003C\u002Fspan>\u003C\u002Fli>\u003Cli>\u003Cspan>\u003Cstrong>\"ออฟไลน์\" (Offline)\u003C\u002Fstrong> - ไม่พร้อมสนทนา\u003C\u002Fspan>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cspan>การแสดงสถานะของผู้ใช้ช่วยให้การสนทนามีประสิทธิภาพมากขึ้น และช่วยลดปัญหาการส่งข้อความไปหาเพื่อนที่อาจไม่พร้อมตอบกลับ\u003C\u002Fspan>\u003C\u002Fp>\u003Ch3>\u003Cspan>\u003Cstrong>โครงสร้างของระบบกำหนดสถานะผู้ใช้ใน WebSocket Chat\u003C\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fh3>\u003Col data-spread=\"false\">\u003Cli>\u003Cspan>\u003Cstrong>WebSocket Server\u003C\u002Fstrong> - คอยติดตามและอัปเดตสถานะของผู้ใช้แบบเรียลไทม์\u003C\u002Fspan>\u003C\u002Fli>\u003Cli>\u003Cspan>\u003Cstrong>Frontend (Client-Side)\u003C\u002Fstrong> - ให้ผู้ใช้เลือกและอัปเดตสถานะของตนเอง\u003C\u002Fspan>\u003C\u002Fli>\u003Cli>\u003Cspan>\u003Cstrong>Database (Optional)\u003C\u002Fstrong> - หากต้องการบันทึกสถานะของผู้ใช้ระยะยาว\u003C\u002Fspan>\u003C\u002Fli>\u003C\u002Fol>\u003Ch3>\u003Cspan>\u003Cstrong>การเพิ่มฟีเจอร์ Custom User Status ใน WebSocket Server\u003C\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fh3>\u003Ch4>\u003Cspan>\u003Cstrong>1. อัปเกรด WebSocket Server ให้รองรับการกำหนดสถานะ\u003C\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fh4>\u003Cp>\u003Cspan>ไฟล์ \u003C\u002Fspan>\u003Ccode>\u003Cspan>websocket_server.go\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext\">package main\n\nimport (\n    \"encoding\u002Fjson\"\n    \"fmt\"\n    \"net\u002Fhttp\"\n    \"sync\"\n\n    \"github.com\u002Fgorilla\u002Fwebsocket\"\n)\n\ntype UserStatus struct {\n    Username string `json:\"username\"`\n    Status   string `json:\"status\"`\n}\n\nvar upgrader = websocket.Upgrader{\n    CheckOrigin: func(r *http.Request) bool { return true },\n}\n\nvar (\n    clients      = make(map[*websocket.Conn]string)\n    userStatuses = make(map[string]string)\n    broadcast    = make(chan UserStatus)\n    mu           sync.Mutex\n)\n\nfunc handleConnections(w http.ResponseWriter, r *http.Request) {\n    conn, _ := upgrader.Upgrade(w, r, nil)\n    defer conn.Close()\n    \n    var username string = r.URL.Query().Get(\"username\")\n    \n    mu.Lock()\n    clients[conn] = username\n    userStatuses[username] = \"ออนไลน์\"\n    mu.Unlock()\n    \n    broadcast <- UserStatus{Username: username, Status: \"ออนไลน์\"}\n    \n    for {\n        var statusUpdate UserStatus\n        err := conn.ReadJSON(&statusUpdate)\n        if err != nil {\n            mu.Lock()\n            delete(clients, conn)\n            delete(userStatuses, username)\n            mu.Unlock()\n            broadcast <- UserStatus{Username: username, Status: \"ออฟไลน์\"}\n            break\n        }\n        \n        mu.Lock()\n        userStatuses[statusUpdate.Username] = statusUpdate.Status\n        mu.Unlock()\n        broadcast <- statusUpdate\n    }\n}\n\nfunc handleMessages() {\n    for {\n        statusUpdate := <-broadcast\n        fmt.Printf(\"User %s updated status: %s\\n\", statusUpdate.Username, statusUpdate.Status)\n        \n        for client := range clients {\n            err := client.WriteJSON(statusUpdate)\n            if err != nil {\n                client.Close()\n                mu.Lock()\n                delete(clients, client)\n                mu.Unlock()\n            }\n        }\n    }\n}\n\nfunc main() {\n    http.HandleFunc(\"\u002Fws\", handleConnections)\n    go handleMessages()\n    fmt.Println(\"WebSocket Server Running on Port 8080\")\n    http.ListenAndServe(\":8080\", nil)\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>\u003Cspan>\u003Cstrong>2. การเพิ่มฟังก์ชัน Custom User Status ใน Frontend (Client-Side)\u003C\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fh3>\u003Cp>\u003Cspan>ไฟล์ \u003C\u002Fspan>\u003Ccode>\u003Cspan>client.js\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext\">const username = prompt(\"Enter your username:\");\nconst socket = new WebSocket(`ws:\u002F\u002Flocalhost:8080\u002Fws?username=${username}`);\nconst statusSelect = document.getElementById(\"status-select\");\nconst statusDisplay = document.getElementById(\"status-display\");\n\nsocket.onmessage = (event) => {\n    const data = JSON.parse(event.data);\n    updateUserStatus(data.username, data.status);\n};\n\nfunction updateUserStatus(username, status) {\n    const statusElement = document.createElement(\"p\");\n    statusElement.innerText = `${username} is now ${status}`;\n    statusDisplay.appendChild(statusElement);\n}\n\nfunction changeStatus() {\n    const newStatus = statusSelect.value;\n    socket.send(JSON.stringify({ username, status: newStatus }));\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>\u003Cspan>\u003Cstrong>การแสดง Custom User Status บน UI\u003C\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fh3>\u003Cp>\u003Cspan>ไฟล์ \u003C\u002Fspan>\u003Ccode>\u003Cspan>index.html\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext\"><select id=\"status-select\" onchange=\"changeStatus()\">\n    <option value=\"ออนไลน์\">ออนไลน์<\u002Foption>\n    <option value=\"ไม่ว่าง\">ไม่ว่าง<\u002Foption>\n    <option value=\"ออฟไลน์\">ออฟไลน์<\u002Foption>\n<\u002Fselect>\n<div id=\"status-display\"><\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>\u003Cspan>\u003Cstrong>3. การทดสอบระบบ\u003C\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fh3>\u003Col data-spread=\"false\">\u003Cli>\u003Cspan>\u003Cstrong>รัน WebSocket Server\u003C\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fli>\u003C\u002Fol>\u003Cpre>\u003Ccode class=\"language-plaintext\">go run websocket_server.go\u003C\u002Fcode>\u003C\u002Fpre>\u003Col data-spread=\"false\" start=\"2\">\u003Cli>\u003Cspan>\u003Cstrong>เปิดหน้าเว็บหลายแท็บและตั้งค่าชื่อผู้ใช้\u003C\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fli>\u003Cli>\u003Cspan>\u003Cstrong>เปลี่ยนสถานะแล้วดูผลลัพธ์ที่ UI และ WebSocket Server\u003C\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fli>\u003C\u002Fol>\u003Ch3>\u003Cspan>\u003Cstrong>ท้าให้ลอง!\u003C\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fh3>\u003Cp>\u003Cspan>ลองเพิ่ม \u003Cstrong>สถานะเพิ่มเติม เช่น \"กำลังพิมพ์...\" หรือ \"กำลังประชุม\"\u003C\u002Fstrong> เพื่อให้การสื่อสารสมจริงยิ่งขึ้น\u003C\u002Fspan>\u003C\u002Fp>\u003Chr>\u003Ch3>\u003Cspan>\u003Cstrong>EP ถัดไป\u003C\u002Fstrong>\u003C\u002Fspan>\u003C\u002Fh3>\u003Cp>\u003Cspan>ใน \u003Cstrong>EP.47\u003C\u002Fstrong>, เราจะเพิ่ม \u003Cstrong>ฟีเจอร์โหมดห้ามรบกวน (Do Not Disturb Mode) ใน WebSocket Chat\u003C\u002Fstrong> 🚀\u003C\u002Fspan>\u003C\u002Fp>","63k8w812lcsy_mrde1k2rf5.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002Fbgphqemqer6k6g1\u002F63k8w812lcsy_mrde1k2rf5.webp","2026-03-04 08:50:56.209Z","",{"keywords":15,"locale":63,"school_blog":73},[16,23,28,33,38,43,48,53,58],{"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:50:54.677Z","jgu82elfpwczlgf","Chat Presence","2026-04-10 16:14:29.896Z",{"collectionId":17,"collectionName":18,"created":24,"created_by":13,"id":25,"name":26,"updated":27,"updated_by":13},"2026-03-04 08:50:49.558Z","8lxakhujb04wz6u","Chat UX","2026-04-10 16:14:28.724Z",{"collectionId":17,"collectionName":18,"created":29,"created_by":13,"id":30,"name":31,"updated":32,"updated_by":13},"2026-03-04 08:50:54.934Z","95t6zz8cpdp1zpf","Custom Status","2026-04-10 16:14:29.984Z",{"collectionId":17,"collectionName":18,"created":34,"created_by":13,"id":35,"name":36,"updated":37,"updated_by":13},"2026-03-04 08:48:07.088Z","brfbypclggbbkcx","WebSocket API","2026-04-10 16:13:40.594Z",{"collectionId":17,"collectionName":18,"created":39,"created_by":13,"id":40,"name":41,"updated":42,"updated_by":13},"2026-03-04 08:47:05.949Z","caufix9o52uw4bh","Real-Time Chat","2026-04-10 16:13:23.517Z",{"collectionId":17,"collectionName":18,"created":44,"created_by":13,"id":45,"name":46,"updated":47,"updated_by":13},"2026-03-04 08:20:14.253Z","ah6lvy4x8qe08l5","Golang","2026-04-10 16:07:26.172Z",{"collectionId":17,"collectionName":18,"created":49,"created_by":13,"id":50,"name":51,"updated":52,"updated_by":13},"2026-03-04 08:20:11.547Z","ey3puyme01a9bsw","Go","2026-04-10 16:07:25.893Z",{"collectionId":17,"collectionName":18,"created":54,"created_by":13,"id":55,"name":56,"updated":57,"updated_by":13},"2026-03-04 08:34:00.920Z","ecac9y661or1xka","WebSocket","2026-04-10 16:08:05.227Z",{"collectionId":17,"collectionName":18,"created":59,"created_by":13,"id":60,"name":61,"updated":62,"updated_by":13},"2026-03-04 08:50:55.241Z","eftlak6vln9c1dc","User Status","2026-04-10 16:14:30.156Z",{"code":64,"collectionId":65,"collectionName":66,"created":67,"flag":68,"id":69,"is_default":70,"label":71,"updated":72},"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":74,"collectionId":75,"collectionName":76,"expand":77,"id":91,"views":92},"wqxt7ag2gn7xcmk","pbc_2105096300","school_blogs",{"category":78},{"blogIds":79,"collectionId":80,"collectionName":81,"created":82,"created_by":13,"id":74,"image":83,"image_alt":13,"image_path":84,"label":85,"name":86,"priority":87,"publish_at":88,"scheduled_at":13,"status":89,"updated":90,"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":86,"th":86},"Golang The Series",1,"2026-03-16 04:39:38.440Z","published","2026-04-25 02:32:15.470Z","a1tuyqqcw8tjoap",228,"bgphqemqer6k6g1",[20,25,30,35,40,45,50,55,60],"2025-03-24 01:51:58.539Z","เรียนรู้วิธีเพิ่ม ระบบกำหนดสถานะผู้ใช้ (Custom User Status) ใน WebSocket Chat เพื่อให้ผู้ใช้สามารถตั้งสถานะ เช่น \"ออนไลน์\", \"ไม่ว่าง\", หรือ \"ออฟไลน์\" และอัปเดตสถานะแบบเรียลไทม์","custom-user-status-websocket-chat","2026-04-22 07:11:41.647Z",{"th":97}]