การแชทด้วยข้อความผ่าน WebSocket เป็นเพียงจุดเริ่มต้นเท่านั้น ระบบสื่อสารยุคใหม่ต้องรองรับ เสียง (Voice) และ วิดีโอ (Video) แบบเรียลไทม์ด้วย

และเทคโนโลยีที่ใช้กันทั่วโลกในการส่งสื่อเรียลไทม์คือ WebRTC แต่ WebRTC เอง ไม่สามารถเริ่มการเชื่อมต่อ (handshake) ได้ด้วยตัวเอง ต้องใช้ “สัญญาณบอกสถานะ” (Signaling) ซึ่งเราจะใช้ WebSocket Signaling Server มาเป็นตัวกลาง

บทความนี้จะพาคุณเข้าใจทุกเรื่องที่ต้องรู้ ตั้งแต่ Peer Connection → ICE Candidate → Signaling → การส่งเสียง/วิดีโอจริง พร้อมโค้ด Go ใช้งานได้จริงใน production

🔊 WebRTC คืออะไร?

WebRTC คือ framework สำหรับการสื่อสารแบบ P2P Real-time ระหว่าง browser

คุณสมบัติหลัก:

• ส่งเสียง/วิดีโอได้ทันที (latency ต่ำกว่า 100ms)
• เชื่อมต่อ P2P ได้ (ไม่ผ่าน server)
• เข้ารหัส (Secure by default)

แล้ว WebSocket ล่ะ?

WebRTC ถูกออกแบบมาโดยเฉพาะสำหรับงานเสียงและวิดีโอ

🛰 องค์ประกอบของ WebRTC ที่ต้องรู้

1. RTCPeerConnection
   เชื่อมต่อแบบเข้ารหัส ส่ง media ระหว่าง client
2. ICE Candidate
   ระบุช่องทางการเชื่อมต่อ เช่น LAN, Public IP, TURN
3. SDP (Session Description Protocol)
   ใช้แลกเปลี่ยนรายละเอียด เช่น codec ที่รองรับ
4. Signaling Server
   ใช้แลกเปลี่ยนข้อความจำพวก offer, answer, ice-candidate เพื่อเริ่มการเชื่อมต่อ

🚨 WebRTC ไม่มี signaling ในตัว → ต้องทำเพิ่มเอง เช่นผ่าน WebSocket

🔄 ใช้ WebSocket เป็น Signaling Server

กระบวนการเชื่อมต่อ:

1. 👤 Client A: สร้าง offer แล้วส่งผ่าน WebSocket
2. 🔁 Server: ส่งต่อให้ Client B
3. 👤 Client B: ตอบกลับด้วย answer
4. 🔄 ทั้งสองฝั่งแลก ICE candidates
5. ✅ เมื่อเชื่อมต่อสำเร็จ → เริ่ม Streaming!

🧪 โค้ดตัวอย่าง Signaling Server (Go + WebSocket)

type SignalMessage struct {
    Type string `json:"type"` // offer, answer, ice
    From string `json:"from"`
    To   string `json:"to"`
    Data json.RawMessage `json:"data"`
}

var clients = make(map[string]*websocket.Conn)

func signalingHandler(c *fiber.Ctx) error {
    conn, err := upgrader.Upgrade(c.Context(), nil)
    if err != nil { return err }

    clientID := c.Query("id")
    clients[clientID] = conn

    for {
        _, msg, err := conn.ReadMessage()
        if err != nil {
            delete(clients, clientID)
            return nil
        }

        var signal SignalMessage
        json.Unmarshal(msg, &signal)

        if target, ok := clients[signal.To]; ok {
            target.WriteMessage(websocket.TextMessage, msg)
        }
    }
}

🎧 ฝั่ง Client (JavaScript)

1. สร้าง Peer Connection

const pc = new RTCPeerConnection({
  iceServers: [{ urls: "stun:stun.l.google.com:19302" }]
});

pc.onicecandidate = event => {
  if (event.candidate) {
    socket.send(JSON.stringify({
      type: "ice",
      to: remoteUser,
      data: event.candidate
    }));
  }
};

2. สร้าง Offer และเริ่มส่ง

async function startCall() {
  const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
  stream.getTracks().forEach(track => pc.addTrack(track, stream));

  const offer = await pc.createOffer();
  await pc.setLocalDescription(offer);

  socket.send(JSON.stringify({
    type: "offer",
    to: remoteUser,
    data: offer
  }));
}

🔐 การใช้ TURN Server สำหรับกรณีที่ P2P ไม่ได้

ในหลายกรณีเช่น:

• อยู่หลัง NAT
• ถูก Firewall ปิดพอร์ต
• บนเครือข่ายมือถือ

จะไม่สามารถเชื่อมต่อ P2P ได้ จึงต้องมี TURN Server เป็นตัวกลาง เช่น:

• Coturn
• Twilio TURN Service
• Google Cloud Media Server (WebRTC Infra)

⚙️ Best Practices สำหรับ Production System

🚀 ท้าให้ลอง!

ลองสร้าง ระบบวิดีโอคอลล์แบบง่าย ด้วย WebRTC + WebSocket:

• Start Call → ส่ง offer → ได้ answer
• เชื่อมต่อสำเร็จ → Video Streaming
• ลองเล่นกับ 2 คนก่อน → แล้วขยายเป็น Group Call ได้ภายหลัง

🔮 EP ต่อไป: การเชื่อมต่อ IoT Device หลายตัวด้วย WebSocket

ตอนหน้า เราจะเจาะลึกการสร้าง IoT Real-time Network รองรับอุปกรณ์จำนวนมาก เช่น Sensor, Smart Home, Robot พร้อมวิธีจัดการ Device Authentication และ Bandwidth Management

หากคุณทำระบบ WebRTC ได้จนใช้จริงใน Production… แสดงว่าคุณกำลังก้าวเข้าสู่ระดับโปรของระบบ Real-time แล้ว! 🎯