EP.93 Adding Voice or Video Communication Features in WebSocket Chat

In the modern era of online communication, voice and video chat are essential features for real-time applications. If you’ve already built a WebSocket-based chat system in Go, the next step to enrich user experience is to enable real-time audio and video communication using WebRTC for peer-to-peer streaming and WebSocket for signaling.

This episode will guide you through the architecture, setup, and best practices for integrating WebRTC with WebSocket in your chat application.

🎯 Why Use WebRTC with WebSocket?

• WebRTC (Web Real-Time Communication) provides peer-to-peer, encrypted real-time audio and video streaming between browsers.
• WebSocket is used as the signaling channel to exchange the necessary metadata (SDP, ICE candidates) to establish the peer-to-peer connection.

Together, they enable:

• ✅ Low-latency voice and video communication
• ✅ Bandwidth-efficient direct client-to-client streaming
• ✅ Better scalability for multi-user chat rooms

🧩 System Architecture Overview

1. Client connects to the server via WebSocket for signaling.
2. Clients exchange SDP and ICE candidates through the signaling channel.
3. WebRTC establishes a direct peer-to-peer media stream between clients.
4. WebSocket server handles user presence, signaling coordination, and fallback.

🔄 Signaling Flow:

User A ---- WebSocket ----> Server ---- WebSocket ----> User B
(SDP Offer / ICE Candidate)         (SDP Answer / ICE Candidate)

🛠️ Sample Go Code – 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 {
            // Forward signaling message to the target user
            forwardToUser(signal.TargetID, msg)
        }
    }
}

SignalMessage struct example:

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 or ICE data
}

🎥 Media Streaming with WebRTC (Client-side Overview)

const peer = new RTCPeerConnection(config);

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

// Send SDP offer via WebSocket
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 Optimization Tips

• 🎧 Use Opus codec for voice, and VP8/VP9 or H.264 for video
• 📐 Adjust bitrate and resolution dynamically based on network conditions
• 📡 Use simulcast or adaptive bitrate (ABR) in multi-user rooms
• 📉 Minimize signaling overhead by compressing messages and using short-lived sessions

✅ Best Practices

🔒 Use HTTPS/WSS to protect all signaling and WebSocket communication
🧱 Implement TURN servers for NAT traversal and fallback
🎮 Add UI controls for mute/unmute, camera on/off, and track user events in real time
🧪 Test with varied devices, browsers, and network conditions
📦 Use a mesh or SFU architecture (e.g., mediasoup, Janus) for large-scale video rooms

🚀 Final Thoughts

By integrating WebRTC for media and WebSocket for signaling, your Go-powered WebSocket Chat system can support low-latency, secure, and scalable voice and video calls — a game-changer for collaborative apps, virtual meetings, and online learning platforms.

🔥 Challenge Before the Next Episode

🎯 Try building a simple WebSocket + WebRTC voice call feature:

• Build a WebSocket signaling server in Go
• Let users create a video room and join by link
• Exchange SDP offers/answers and ICE candidates
• Test NAT traversal with STUN/TURN
• Add controls for mic/cam toggle

Then share your demo with your dev team and optimize based on feedback!

🔜 Next EP.94:

"Building a WebSocket Server That Works with Microservices"
Learn how to scale your WebSocket system by integrating with service meshes, message brokers, and microservice architectures.

Read more

• Golang The Series

• JS2GO

• 10 Eps That Will Make You a Pro Tailwind CSS Overnight

🔵 Facebook: Superdev Academy

🔴 YouTube: Superdev Academy

📸 Instagram: Superdev Academy

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

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