EP.96 การปรับแต่ง WebSocket Chat ให้รองรับการใช้งานกับ Mobile Devices

ในโลกของการสื่อสารแบบเรียลไทม์ แอปพลิเคชันบนมือถือ (Mobile Devices) กลายเป็นช่องทางหลักของผู้ใช้งาน WebSocket Chat แต่ก็มีความท้าทายเฉพาะ เช่น การเชื่อมต่อที่ไม่เสถียร, การประหยัดพลังงาน, และการรองรับการทำงานแบบ background ซึ่งต้องมีการปรับแต่งเพิ่มเติมจากเวอร์ชัน Desktop หรือ Web

1. การจัดการการเชื่อมต่อและ Reconnect

มือถือมีแนวโน้มหลุดการเชื่อมต่อบ่อยจากปัจจัยเช่นเปลี่ยนเครือข่าย (WiFi → 4G), เข้าสู่โหมด sleep, หรือโดน OS ปิดการทำงานเบื้องหลัง

แนวทางที่แนะนำ:

ใช้ Exponential Backoff ในการ reconnect เพื่อไม่ให้ระบบ overload
ตรวจสอบสถานะ Network / Visibility API
จำกัดจำนวนรอบการ reconnect ต่อเวลา

ตัวอย่าง (JavaScript Frontend):

let retries = 0;

function connect() {
  const socket = new WebSocket("wss://yourserver.com/ws");

  socket.onopen = () => {
    console.log("✅ Connected");
    retries = 0; // reset retry
  };

  socket.onclose = () => {
    const timeout = Math.min(30000, 1000 * Math.pow(2, retries));
    console.log(`❌ Disconnected. Reconnecting in ${timeout}ms...`);
    setTimeout(connect, timeout);
    retries++;
  };

  socket.onmessage = (event) => {
    console.log("📩", event.data);
  };
}

connect();

2. การประหยัดพลังงาน (Battery Optimization)

บนอุปกรณ์พกพา พลังงานคือทรัพยากรจำกัด

แนวทางที่แนะนำ:

ลดความถี่ของ heartbeat/ping เช่น ทุก 60 วินาทีแทน 10 วินาที
ปิด WebSocket เมื่อแอปอยู่ background และเปิดใหม่เมื่อกลับมา active
ใช้ delta updates แทน full state เพื่อประหยัด data

โค้ด (Go backend):

ticker := time.NewTicker(60 * time.Second)
defer ticker.Stop()

for {
	select {
	case <-ticker.C:
		conn.WriteMessage(websocket.PingMessage, nil)
	case <-ctx.Done():
		return
	}
}

3. การแจ้งเตือนแบบ Push Notification

WebSocket ไม่สามารถทำงานได้เมื่อแอปอยู่ background (โดยเฉพาะบน iOS) ดังนั้นควรใช้ระบบแจ้งเตือนร่วมด้วย

แนวทาง:

ใช้ Firebase Cloud Messaging (FCM) หรือ Apple Push Notification (APN)
ให้ WebSocket แจ้ง Backend → ส่ง Push Notification แทน
หรือใช้ Service Worker (สำหรับ PWA)

แนวคิด (JS):

socket.onmessage = (event) => {
  const data = JSON.parse(event.data);
  if (document.hidden) {
    showPushNotification(data.message);
  }
};

4. UX ที่เหมาะกับมือถือ

สิ่งที่ต้องคำนึง:

UI ต้อง responsive และเหมาะกับหน้าจอเล็ก
แสดงสถานะ "Connecting", "Reconnecting", "Disconnected"
จัดการ keyboard และ input ไม่ให้บังข้อความ
รองรับ Offline Mode เช่น เก็บข้อความชั่วคราวก่อนส่ง

5. Best Practices

✅ ตรวจสอบ navigator.connection เพื่อปรับ reconnect strategy
✅ ใช้ compression (เช่น permessage-deflate) เพื่อลด bandwidth
✅ ทำ stress test บนอุปกรณ์มือถือจริงหลาย OS
✅ Logging & Analytics เพื่อเข้าใจ pattern การหลุด connection

🎯 Challenge

ทดลองปรับ WebSocket Chat ของคุณให้:

✅ Reconnect ได้อัตโนมัติ
✅ ประหยัดพลังงานระหว่าง sleep mode
✅ แสดง push notification เมื่อแอปปิดอยู่
✅ ทำงานลื่นไหลแม้บน 3G/4G

จากนั้นลองทดสอบบนมือถือ 3 รุ่นขึ้นไป แล้วดูผลลัพธ์!

🚀 สรุป

การพัฒนา WebSocket Chat สำหรับมือถือจำเป็นต้อง “เข้าใจธรรมชาติของอุปกรณ์พกพา” และปรับระบบให้รองรับการ:

✅ Reconnect อัตโนมัติแบบมีประสิทธิภาพ
✅ ประหยัดพลังงาน
✅ แสดงข้อความและแจ้งเตือนแบบ real-time
✅ มอบ UX ที่ลื่นไหลแม้ในเครือข่ายที่ไม่เสถียร

🔜 Next EP (EP.97):

การใช้ WebSocket ในการพัฒนา IoT Application แบบเรียลไทม์
เรียนรู้การเชื่อมต่ออุปกรณ์ IoT หลายตัวกับ WebSocket Server เพื่อสื่อสารข้อมูลเรียลไทม์ พร้อมการจัดการ Bandwidth, Security และ Device Authentication

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

🔵 Facebook: https://www.facebook.com/superdev.academy.th

🔴 YouTube : Superdev Academy

📸 Instagram: Superdev Academy

🎬 TikTok: https://www.tiktok.com/@superdevacademy?lang=th-TH

🌐 Website: https://www.superdevacademy.com/