What is a WebSocket Connection?

A WebSocket connection is a communication protocol that provides a persistent, two-way connection between a client and a server. Unlike traditional HTTP, which is stateless and follows a request-response model, WebSocket allows both the client and server to send data to each other independently, making it an ideal solution for real-time applications like chat, live notifications, and collaborative tools.

How WebSocket Works

WebSocket connections begin with an HTTP handshake, during which the client requests an upgrade from HTTP to WebSocket. Once accepted by the server, the protocol switches from HTTP to WebSocket, and a persistent, full-duplex communication channel is established. This connection remains open until explicitly closed by the client or server, enabling continuous data flow with minimal latency.

Key Differences Between HTTP and WebSocket

Feature	HTTP	WebSocket
Communication Model	Request-response, unidirectional	Full-duplex, bidirectional
Connection Persistence	Stateless, new connection each time	Persistent, single connection
Latency	Higher, due to repeated connections	Low, due to a single open channel
Ideal Use Cases	Single interactions (e.g., loading a webpage)	Real-time, continuous data exchange

Advantages of WebSocket

1. Low Latency: With a persistent connection, data can be sent and received almost instantly.
2. Efficiency: Reduces the overhead of repeated HTTP connections.
3. Bidirectional Communication: Allows the server to push data to the client without waiting for requests.

WebSocket Lifecycle

1. Handshake: The connection starts with an HTTP request, including the Upgrade: websocket header.
2. Connection Opened: Once the server acknowledges, the protocol switches to WebSocket.
3. Data Transmission: Both client and server can send messages independently over the open connection.
4. Close Connection: Either side can close the connection, ending the communication session.

Example WebSocket Code in JavaScript

Here’s a basic example of establishing a WebSocket connection and handling messages between the client and server.

// Open a new WebSocket connection
const socket = new WebSocket('ws://example.com/socket');

// Event handler for when the connection opens
socket.addEventListener('open', () => {
    console.log("WebSocket connection opened.");
    socket.send('Hello Server!');
});

// Listen for messages from the server
socket.addEventListener('message', (event) => {
    console.log('Message from server:', event.data);
});

// Handle connection errors
socket.addEventListener('error', (event) => {
    console.error('WebSocket error:', event);
});

// Handle connection closure
socket.addEventListener('close', (event) => {
    console.log("WebSocket connection closed:", event);
});

Sending and Receiving JSON Data

WebSocket is frequently used to exchange JSON-formatted data, which allows structured information to be sent across the connection.

// Sending JSON data
const message = { type: 'greeting', content: 'Hello, Server!' };
socket.send(JSON.stringify(message));

// Receiving JSON data
socket.addEventListener('message', (event) => {
    const data = JSON.parse(event.data);
    console.log('Received JSON data:', data);
});

Use Cases for WebSocket

WebSocket’s low latency and real-time capabilities make it suitable for various applications:

1. Chat Applications: WebSocket is ideal for sending and receiving instant messages without delay.
2. Online Games: Allows high-frequency data exchange between players and the server, enabling real-time game updates.
3. Stock Price Updates: Continuously pushes new price data to clients without refreshing.
4. Real-Time Notifications: Delivers alerts to users as soon as they occur.
5. WebRTC Communication (Peer-to-Peer): Used as a signaling mechanism in setting up peer-to-peer connections in WebRTC, which is discussed below.

Using WebSocket in WebRTC Communication

WebRTC (Web Real-Time Communication) enables peer-to-peer audio, video, and data sharing directly between browsers. However, before peers can communicate directly, they must exchange information for setting up the connection, known as signaling. WebSocket serves as an effective channel for this signaling process by helping peers exchange data needed to establish the WebRTC connection.

Role of WebSocket in WebRTC Signaling

In the context of WebRTC, WebSocket is often used to:

1. Exchange SDP (Session Description Protocol): Each peer generates an SDP offer or answer that includes details like codecs, media types, and other connection parameters.
2. Share ICE (Interactive Connectivity Establishment) Candidates: Network information such as IP addresses and ports that help the peers connect directly.

These signaling messages are exchanged via WebSocket to set up the WebRTC peer connection, after which the peers can communicate directly without the signaling server.

Step-by-Step Example of WebSocket for WebRTC Signaling

Below is a typical flow illustrating how WebSocket is used in setting up a WebRTC connection:

1. Initialize WebSocket and Create PeerConnection

Each peer (client) connects to a signaling server via WebSocket and initializes a WebRTC RTCPeerConnection.

const signalingSocket = new WebSocket('ws://signaling-server.com');
const peerConnection = new RTCPeerConnection();

// Handle WebSocket open event
signalingSocket.addEventListener('open', () => {
    console.log('Connected to signaling server.');
});

2. Create an SDP Offer and Send via WebSocket

One peer (Peer A) initiates the connection by creating an SDP offer and sending it to the other peer via the WebSocket.

peerConnection.createOffer().then((offer) => {
    return peerConnection.setLocalDescription(offer);
}).then(() => {
    // Send the SDP offer to the other peer through WebSocket
    signalingSocket.send(JSON.stringify({ type: 'offer', sdp: peerConnection.localDescription }));
});

3. Listen for WebSocket Messages and Handle SDP/ICE

When Peer B receives the offer, it creates an answer and sends it back through WebSocket. Both peers also send ICE candidates as they become available.

signalingSocket.addEventListener('message', (event) => {
    const message = JSON.parse(event.data);

    if (message.type === 'offer') {
        // Set the remote SDP from the offer and create an answer
        peerConnection.setRemoteDescription(new RTCSessionDescription(message.sdp))
            .then(() => peerConnection.createAnswer())
            .then((answer) => peerConnection.setLocalDescription(answer))
            .then(() => {
                // Send the answer SDP back to Peer A
                signalingSocket.send(JSON.stringify({ type: 'answer', sdp: peerConnection.localDescription }));
            });
    } else if (message.type === 'answer') {
        // Set the remote SDP from the answer
        peerConnection.setRemoteDescription(new RTCSessionDescription(message.sdp));
    } else if (message.type === 'ice-candidate') {
        // Add ICE candidate from the other peer
        const candidate = new RTCIceCandidate(message.candidate);
        peerConnection.addIceCandidate(candidate);
    }
});

4. Send and Receive ICE Candidates

Each peer will gather ICE candidates as it tries to establish a peer-to-peer connection. These candidates are shared through WebSocket.

peerConnection.onicecandidate = (event) => {
    if (event.candidate) {
        signalingSocket.send(JSON.stringify({
            type: 'ice-candidate',
            candidate: event.candidate
        }));
    }
};

WebRTC with WebSocket: Summary

• WebSocket is used as a signaling channel in WebRTC to exchange control messages (SDP and ICE candidates).
• SDP Offers and Answers are sent to describe session and connection parameters.
• ICE Candidates are shared through WebSocket to help the peers discover paths to connect directly.

Conclusion

WebSocket and WebRTC are powerful technologies that complement each other well. WebSocket handles the signaling phase in WebRTC, establishing the initial connection parameters and network information necessary for peer-to-peer communication. Once signaling is complete, WebRTC manages the direct media and data exchange. This combination allows for real-time, efficient, and low-latency communication in web applications, enabling features like video calls, online games, and collaborative tools.