[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-blogs-th-1-1-all-websocket-mobile-optimization-all--*":3,"academy-blog-translations-ctvrep1frbjn8eq":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.109 การปรับปรุง Performance สำหรับ WebSocket บนมือถือ","sclblg987654321","school_blog_translations","\u003Cp>การใช้ WebSocket บนอุปกรณ์พกพา (Mobile Devices) มีข้อจำกัดเฉพาะที่แตกต่างจาก Desktop อย่างชัดเจน ไม่ว่าจะเป็น...\u003C\u002Fp>\u003Cul>\u003Cli>⚡ ข้อจำกัดด้านพลังงาน (Battery)\u003C\u002Fli>\u003Cli>🌐 ความไม่เสถียรของเครือข่าย (Mobile Network)\u003C\u002Fli>\u003Cli>🔁 การเปลี่ยนแปลงเครือข่ายแบบฉับพลัน (เช่น จาก Wi-Fi ไป 5G)\u003C\u002Fli>\u003Cli>😴 การทำงานในโหมด Background หรือ Sleep Mode\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Cp>เป้าหมายของ EP นี้: เราจะมาเรียนรู้เทคนิคและตัวอย่างโค้ดจริงสำหรับปรับปรุง WebSocket Server ให้สามารถทำงานได้ “เร็ว เสถียร และประหยัดพลังงาน” บนอุปกรณ์พกพาได้อย่างมีประสิทธิภาพในระดับ Production\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>🔋 1. ปัญหาหลักของ WebSocket บนมือถือ\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cfigure class=\"table\">\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>ปัญหา\u003C\u002Fth>\u003Cth>ผลกระทบ\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>การเชื่อมต่อหลุดบ่อย (frequent disconnect)\u003C\u002Ftd>\u003Ctd>ข้อมูลสูญหาย \u002F Latency เพิ่มขึ้น\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>ใช้พลังงานมาก\u003C\u002Ftd>\u003Ctd>แบตหมดเร็ว ผู้ใช้ปิดแอป\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Timeout ไม่เหมาะสม\u003C\u002Ftd>\u003Ctd>Reconnect บ่อยโดยไม่จำเป็น\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Background mode ถูกจำกัด\u003C\u002Ftd>\u003Ctd>Sync ข้อมูลไม่ได้แบบ real-time\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003C\u002Ffigure>\u003Cp> \u003C\u002Fp>\u003Cp>การออกแบบ WebSocket ที่ดีบนมือถือต้อง รองรับสภาวะไม่แน่นอนของเครือข่าย และ ลดภาระที่ไม่จำเป็นต่อแบตเตอรี่ อย่างมีประสิทธิภาพ\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>🔧 2. เทคนิคการปรับปรุงประสิทธิภาพสำหรับ Mobile\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Ch3>🕐 2.1 ปรับ Timeout ให้เหมาะสมกับ Mobile Network\u003C\u002Fh3>\u003Cblockquote>\u003Cp>Mobile network มี latency และ jitter สูงกว่า desktop\u003C\u002Fp>\u003C\u002Fblockquote>\u003Cp> \u003C\u002Fp>\u003Cp>เพิ่มเวลารอ \u003Ccode inline=\"\">pongWait\u003C\u002Fcode> และลด \u003Ccode inline=\"\">pingPeriod\u003C\u002Fcode> ให้น้อยลง เช่น:\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext language-go\">const (\n\tpongWait   = 30 * time.Second   \u002F\u002F ขยาย timeout จาก 10 → 30 วินาที\n\tpingPeriod = (pongWait * 9) \u002F 10\n)\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Cul>\u003Cli>อย่าตั้งค่า timeout ต่ำเกินไป เพราะ network drop บนมือถือพบได้บ่อย\u003C\u002Fli>\u003Cli>กรณีผู้ใช้สลับแอป อาจไม่ตอบ ping ได้ทันเวลา\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch3>🔄 2.2 ระบบ Reconnect อัตโนมัติบน Client\u003C\u002Fh3>\u003Cblockquote>\u003Cp>เมื่อการเชื่อมต่อหลุด Client ควรมี logic เชื่อมใหม่อัตโนมัติ\u003C\u002Fp>\u003C\u002Fblockquote>\u003Cp> \u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-javascript\">function connectWS() {\n  const ws = new WebSocket(\"wss:\u002F\u002Fyourserver\u002Fws\");\n\n  ws.onopen = () => console.log(\"✅ Connected\");\n  ws.onclose = () => {\n    console.log(\"🔁 Disconnected. Reconnecting...\");\n    setTimeout(connectWS, 3000); \u002F\u002F Reconnect หลัง 3 วิ\n  };\n  ws.onerror = () => ws.close();\n}\nconnectWS();\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Cp>🧠 แนะนำ: ใช้ Exponential Backoff (เพิ่มเวลารอในการ reconnect) เพื่อลดการ reconnect ถี่เกินไปบน server\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch3>🪫 2.3 ลดการใช้พลังงานของอุปกรณ์\u003C\u002Fh3>\u003Cblockquote>\u003Cp>WebSocket ที่ส่งถี่เกินไปจะกินแบตโดยไม่จำเป็น\u003C\u002Fp>\u003C\u002Fblockquote>\u003Cp> \u003C\u002Fp>\u003Cp>เทคนิคที่ช่วยลดพลังงาน:\u003C\u002Fp>\u003Cul>\u003Cli>✅ ส่งข้อมูลแบบ Batch (รวมหลาย message ก่อนส่ง)\u003C\u002Fli>\u003Cli>✅ ใช้ Delta Update (ส่งเฉพาะข้อมูลที่เปลี่ยน)\u003C\u002Fli>\u003Cli>✅ ลดจำนวน Ping\u002FPong\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Cp>ตัวอย่างใน Go:\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext language-go\">if time.Since(lastMessageSent) > 5*time.Second {\n\tconn.WriteMessage(websocket.TextMessage, []byte(\"heartbeat\"))\n\tlastMessageSent = time.Now()\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch3>📶 2.4 รองรับ Network Switching (Wi-Fi ↔ 4G\u002F5G)\u003C\u002Fh3>\u003Cblockquote>\u003Cp>เมื่อ IP เปลี่ยน, WebSocket เดิมจะใช้งานไม่ได้\u003C\u002Fp>\u003C\u002Fblockquote>\u003Cp> \u003C\u002Fp>\u003Cp>ให้ client ส่ง Reconnect Token (หรือ Session ID) มาใหม่ แล้วเชื่อม session เดิมกลับได้\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Cp>ตัวอย่างฝั่ง Server (Go):\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext language-go\">func handleReconnect(token string, conn *websocket.Conn) {\n\tuser, ok := sessionStore[token]\n\tif ok {\n\t\tuser.Connection = conn\n\t\tuser.LastActive = time.Now()\n\t\tlog.Printf(\"User %s reconnected successfully\\n\", user.ID)\n\t}\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Cp>📌 อย่าลืมเก็บ Session Token ฝั่ง client แบบ secure เช่น ใน Secure Storage\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>🧠 3. Best Practices สำหรับ WebSocket บนมือถือ\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cfigure class=\"table\">\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>หัวข้อ\u003C\u002Fth>\u003Cth>แนวทาง\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>🔋 ประสิทธิภาพ\u003C\u002Ftd>\u003Ctd>Batch message, ลด ping, ใช้ heartbeat\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>🔄 ความเสถียร\u003C\u002Ftd>\u003Ctd>เพิ่ม logic reconnect ฝั่ง client\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>🕐 Timeout\u003C\u002Ftd>\u003Ctd>ยืดหยุ่นกว่า desktop\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>🌐 เครือข่าย\u003C\u002Ftd>\u003Ctd>Reconnect Token รองรับ IP เปลี่ยน\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>🧯 Resource\u003C\u002Ftd>\u003Ctd>Cleanup connection zombie เสมอ\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003C\u002Ffigure>\u003Cp> \u003C\u002Fp>\u003Ch2>🚀 ท้าให้ลอง!\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>ลองทำตามขั้นตอนนี้เพื่อทดสอบความเสถียรของ WebSocket บนมือถือ:\u003C\u002Fp>\u003Col>\u003Cli>เปิด WebSocket บนมือถือ\u003C\u002Fli>\u003Cli>ออกจากแอป (background)\u003C\u002Fli>\u003Cli>เปลี่ยนจาก Wi-Fi → 5G\u003C\u002Fli>\u003Cli>ดูว่าเชื่อมต่อใหม่อัตโนมัติไหม\u003C\u002Fli>\u003Cli>ดูว่า server มีการ cleanup หรือ resource leak หรือไม่\u003C\u002Fli>\u003C\u002Fol>\u003Cp> \u003C\u002Fp>\u003Cp>✅ หากทำครบ Server จะทำงานได้ เบา, เร็ว, ทนทาน, และ ไม่กินแบต แม้ใช้งานบนมือถือ!\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Chr>\u003Cp> \u003C\u002Fp>\u003Ch2>🌟 EP ถัดไป:\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>📘 EP.110: Auto-Scaling และ Load Balancing สำหรับ WebSocket Server\u003C\u002Fp>\u003Cp>เตรียมพบกับแนวทางการออกแบบ WebSocket Server ที่สามารถ ปรับขนาดตามโหลด ได้แบบอัตโนมัติด้วย Kubernetes, Load Balancer, Sticky Session, และ Redis Pub\u002FSub เพื่อรองรับผู้ใช้หลักหมื่นคนพร้อมกัน! ☁️⚙️\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.academy.th\">\u003Cstrong>https:\u002F\u002Fwww.facebook.com\u002Fsuperdev.academy.th\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cp>\u003Cstrong>🔴 YouTube : \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUC2eI2RxcA2zbTqZyHyWIfRg\">\u003Cstrong>Superdev Academy\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>Superdev Academy\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cp>\u003Cstrong>🎬 TikTok: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.tiktok.com\u002F@superdevacademy?lang=th-TH\">\u003Cstrong>https:\u002F\u002Fwww.tiktok.com\u002F@superdevacademy?lang=th-TH\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cp>\u003Cstrong>🌐 Website: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdevacademy.com\u002F\">\u003Cstrong>https:\u002F\u002Fwww.superdevacademy.com\u002F\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>","189_11zon_cvsstgpwm1.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002Fketdslo0vzzv5b6\u002F189_11zon_cvsstgpwm1.webp","2026-03-04 08:45:34.928Z","",{"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:45:34.193Z","6ogs62iwr48p5xn","WebSocket บนมือถือ","2026-04-10 16:12:59.951Z",{"collectionId":17,"collectionName":18,"created":24,"created_by":13,"id":25,"name":26,"updated":27,"updated_by":13},"2026-03-04 08:20:14.253Z","ah6lvy4x8qe08l5","Golang","2026-04-10 16:07:26.172Z",{"collectionId":17,"collectionName":18,"created":29,"created_by":13,"id":30,"name":31,"updated":32,"updated_by":13},"2026-03-04 08:20:11.547Z","ey3puyme01a9bsw","Go","2026-04-10 16:07:25.893Z",{"collectionId":17,"collectionName":18,"created":34,"created_by":13,"id":35,"name":36,"updated":37,"updated_by":13},"2026-03-04 08:44:48.724Z","s6xhnfomy7n5ycp","WebSocket Server","2026-04-10 16:12:50.171Z",{"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","ctvrep1frbjn8eq","websocket-mobile-optimization",241,"ketdslo0vzzv5b6",[20,25,30,35,40],"2025-11-10 09:14:57.443Z","เรียนรู้เทคนิคปรับปรุง WebSocket Server ให้ทำงานได้อย่างเสถียรและประหยัดพลังงานบนอุปกรณ์พกพา พร้อมโค้ดตัวอย่างระดับ Production เช่น การตั้ง Timeout, การ reconnect อัตโนมัติ และการจัดการ network switching","2026-04-25 02:47:54.660Z",{"th":72,"en":72}]