ในยุคของการสื่อสารแบบเรียลไทม์ ฟีเจอร์ Voice และ Video Chat กลายเป็นสิ่งจำเป็นสำหรับแอปพลิเคชันยุคใหม่ หากคุณพัฒนา WebSocket Chat ด้วยภาษา Go แล้วต้องการอัปเกรดให้ผู้ใช้งานสามารถสื่อสารแบบเห็นหน้าหรือพูดคุยแบบสดได้ บทความนี้จะพาไปเรียนรู้การรวม WebRTC กับ WebSocket เพื่อให้ระบบของคุณสามารถรองรับฟีเจอร์เหล่านี้ได้อย่างมีประสิทธิภาพ

🎯 ทำไมต้องใช้ WebRTC ร่วมกับ WebSocket

• WebRTC (Web Real-Time Communication) คือเทคโนโลยีสำหรับส่งเสียงและวิดีโอแบบ peer-to-peer โดยไม่ต้องผ่านเซิร์ฟเวอร์ media
• WebSocket ใช้เป็นช่องทาง signaling เพื่อแลกเปลี่ยนข้อมูลสำคัญ (เช่น SDP และ ICE candidate) สำหรับจับคู่การเชื่อมต่อ

ข้อดีของการรวมกัน:

✅ ส่งเสียงและวิดีโอแบบ real-time โดยตรงระหว่าง client
✅ ลด latency และประหยัด bandwidth
✅ รองรับการสื่อสารหลายคนในห้องเดียวได้ง่ายขึ้น

🧩 โครงสร้างระบบ (Architecture Overview)

1. ผู้ใช้เชื่อมต่อ WebSocket เพื่อทำ signaling
2. ผู้ใช้แลกเปลี่ยน SDP และ ICE ผ่าน WebSocket
3. WebRTC สร้าง media stream แบบ peer-to-peer
4. WebSocket Server คอยดูแลห้อง, การเข้าร่วม, และ fallback กรณีการเชื่อมต่อไม่สำเร็จ

🔄 ลำดับการสื่อสาร (Signaling Flow):

ผู้ใช้ A ---- WebSocket ----> Server ---- WebSocket ----> ผู้ใช้ B
(SDP Offer / ICE Candidate)       (SDP Answer / ICE Candidate)

🛠️ ตัวอย่างโค้ด Go – WebSocket Signaling Handler

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

    for {
        _, msg, err := conn.ReadMessage()
        if err != nil {
            log.Println("Read error:", err)
            break
        }

        var signal SignalMessage
        if err := json.Unmarshal(msg, &signal); err == nil {
            forwardToUser(signal.TargetID, msg)
        }
    }
}

โครงสร้าง SignalMessage:

type SignalMessage struct {
    Type     string `json:"type"`      // offer, answer, candidate
    SenderID string `json:"sender_id"`
    TargetID string `json:"target_id"`
    Payload  string `json:"payload"`   // ข้อมูล SDP หรือ ICE
}

🎥 ตัวอย่างฝั่ง Client – การส่งสัญญาณด้วย WebSocket

const peer = new RTCPeerConnection(config);

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    localVideo.srcObject = stream;
    stream.getTracks().forEach(track => peer.addTrack(track, stream));
  });

peer.createOffer().then(offer => {
  peer.setLocalDescription(offer);
  socket.send(JSON.stringify({
    type: "offer",
    target_id: "user_b",
    sender_id: "user_a",
    payload: JSON.stringify(offer)
  }));
});

📶 เทคนิคจัดการ Bandwidth ให้มีประสิทธิภาพ

• 🎧 ใช้ Opus codec สำหรับเสียง และ VP8/VP9 หรือ H.264 สำหรับวิดีโอ
• 🔄 ปรับ bitrate และความละเอียด (resolution) ตามความเร็วเน็ตเวิร์ก
• 🔀 ใช้ simulcast และ adaptive bitrate เมื่อมีผู้ใช้หลายคนในห้องเดียว
• 🗜️ ใช้ compression และส่งเฉพาะข้อมูลที่เปลี่ยนแปลงเพื่อประหยัด bandwidth

✅ แนวทางปฏิบัติที่แนะนำ (Best Practices)

🔒 ใช้ HTTPS/WSS ทุกครั้งเพื่อความปลอดภัยของข้อมูล
🌐 เตรียม TURN server สำหรับ fallback กรณี NAT หรือ firewall บล็อกการเชื่อมต่อ
🎛️ มี UI สำหรับ mute/unmute, เปิด/ปิดกล้อง และจัดการ event แบบเรียลไทม์
🧪 ทดสอบกับหลายเบราว์เซอร์ อุปกรณ์ และสภาพเครือข่าย
📦 วางโครงระบบให้รองรับ SFU หรือ mesh สำหรับห้อง video ขนาดใหญ่

🚀 สรุปส่งท้าย

การรวม WebRTC เข้ากับ WebSocket จะช่วยให้ระบบแชทของคุณมีฟีเจอร์ Voice & Video Call แบบ real-time ซึ่งสามารถรองรับทั้งการสนทนารายบุคคลและแบบกลุ่มได้อย่างมีประสิทธิภาพ พร้อมขยายระบบต่อไปในอนาคตได้ง่าย

🔥 ชาเลนจ์ก่อนขึ้น EP.94

🎯 ลองสร้างระบบ Video Call ง่าย ๆ ด้วย WebSocket + WebRTC:

• สร้าง signaling server ด้วย Go
• ให้ผู้ใช้สร้างห้องและแชร์ลิงก์ให้ผู้อื่นเข้าร่วม
• แลกเปลี่ยน SDP/ICE ผ่าน WebSocket
• ใช้ STUN/TURN สำหรับ NAT traversal
• เพิ่มปุ่มเปิด-ปิดไมค์/กล้อง

จากนั้นลองวิเคราะห์จุดที่สามารถปรับปรุง และนำไปแชร์กับทีมของคุณเพื่อเรียนรู้ร่วมกัน!

🔜 Next EP.94:

การสร้าง WebSocket Server ที่รองรับการทำงานร่วมกับ Microservices
เรียนรู้การออกแบบระบบให้สามารถทำงานร่วมกับบริการย่อยได้อย่างมีประสิทธิภาพ ด้วยแนวคิด Microservices, Message Broker, และ Horizontal Scaling

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

• Golang The Series
• JS2GO
• 10 Ep ที่จะให้คุณเป็นมือโปร Tailwind CSS ในชั่วข้ามคืน

🔵 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/