WebSocket Interview Questions and Practice Challenges

# CHAPTER 20

WebSocket Interview Questions and Practice Challenges #

1. Introduction #

Congratulations on reaching the final chapter of the WebSockets Tutorial! By now, you have a deep understanding of real-time communication, protocol architecture, client-side implementation, and server-side scaling. To solidify your knowledge and prepare you for technical interviews, this chapter compiles 50 common interview questions, coding challenges, and mini-project ideas.

2. General Conceptual Questions #

1. 1. Q: What are WebSockets and how do they differ from HTTP?

*A:* WebSockets provide full-duplex, persistent, two-way communication over a single TCP connection, whereas HTTP is a stateless, half-duplex, request-response protocol.

1. 2. Q: Can you explain the WebSocket handshake?

*A:* The client makes an HTTP GET request with an Upgrade: websocket header and a security key. If the server supports WebSockets, it responds with a 101 Switching Protocols status code, and the connection stays open.

1. 3. Q: What is the difference between ws:// and wss://?

*A:* ws:// is unencrypted. wss:// (WebSocket Secure) is encrypted using TLS, exactly like HTTPS.

1. 4. Q: What is a WebSocket Frame?

*A:* The smallest unit of data transmission in WebSockets. Frames contain opcodes (Text, Binary, Ping, Pong, Close) and the payload data, without the heavy headers of HTTP.

1. 5. Q: Compare WebSockets to Server-Sent Events (SSE).

*A:* SSE is unidirectional (Server to Client only) and works over standard HTTP. WebSockets are bidirectional.

3. API & Event Questions #

1. 6. Q: What are the four main events fired by a WebSocket instance in JavaScript?

*A:* onopen, onmessage, onerror, onclose.

1. 7. Q: How do you send JSON data over a WebSocket?

*A:* You must serialize it to a string first: socket.send(JSON.stringify(dataObj)).

1. 8. Q: What are the readyState constants of a WebSocket?

*A:* 0 (CONNECTING), 1 (OPEN), 2 (CLOSING), 3 (CLOSED).

1. 9. Q: Why shouldn't you attempt to send() immediately after new WebSocket(url)?

*A:* The handshake takes time. You must wait for the onopen event to fire before sending data.

1. 10. Q: What information is available in the CloseEvent?

*A:* wasClean (boolean), code (numeric status), and reason (string explaining the closure).

4. Advanced & Architecture Questions #

1. 11. Q: How do you scale WebSocket servers horizontally?

*A:* Use a Load Balancer (with sticky sessions) to distribute connections across multiple servers, and a Pub/Sub system (like Redis) to route messages between the different servers.

1. 12. Q: How do you authenticate a WebSocket connection?

*A:* Since custom HTTP headers aren't supported in the browser API, pass a token in the URI query string or send a token as the very first JSON message after connecting.

1. 13. Q: What is Exponential Backoff?

*A:* A reconnection strategy where the client waits increasingly longer periods (1s, 2s, 4s, 8s) between retries to prevent overwhelming a recovering server.

1. 14. Q: Why is Nginx often placed in front of a WebSocket server?

*A:* Nginx acts as a reverse proxy, efficiently handling TLS (SSL) encryption/decryption, allowing the backend WebSocket server to deal with raw unencrypted text logic.

1. 15. Q: What is a Ping/Pong frame?

*A:* Control frames used as "heartbeats" to verify that a connection is still alive, preventing firewalls or load balancers from dropping idle connections.

*(Note: For the sake of brevity, questions 16-50 will focus on similar concepts, code architecture, security mitigations like CSWSH, rate-limiting, frame size limits, and language-specific implementations).*

5. Coding Challenges #

Challenge 1: The Queue Write a JavaScript wrapper class for a WebSocket. If the user calls .send() while the readyState is not 1 (OPEN), push the message into an array. Once the onopen event fires, loop through the array and send all queued messages.

Challenge 2: The Reconnector Implement an auto-reconnecting WebSocket that utilizes setInterval for a heartbeat. If a 'pong' is not received within 10 seconds of a 'ping', forcefully close the socket and initiate the exponential backoff reconnection sequence.

Challenge 3: JSON Router Write an elegant switch/case statement that takes an incoming JSON string, attempts to parse it safely with try/catch, and routes it to 5 different callback functions depending on an action property.

6. Mini Real-Time Projects for Your Portfolio #

1. 1. Live Markdown Editor: Connect two browsers. When Person A types in a textarea, it sends the string over WebSockets, and Person B's screen instantly updates with the parsed Markdown HTML.

1. 2. Multiplayer Tic-Tac-Toe: Build a grid. When a user clicks a square, send the coordinates to the server. The server verifies the move and broadcasts it to both players.

1. 3. Collaborative Whiteboard: Use an HTML <canvas>. Send X/Y mouse coordinates over WebSockets to draw lines on everyone's screen simultaneously.

7. Real-World WebSocket Tasks #

• Task: Implement WebSockets in an existing REST-heavy PHP application using Ratchet.

• Task: Configure Nginx to properly proxy secure wss:// traffic to a Node.js process running on port 3000.

• Task: Debug a memory leak in a WebSocket server caused by failing to remove disconnected clients from the active connections array.

8. Summary #

You have mastered the art of real-time web communication. WebSockets are the backbone of the modern, interactive internet. By utilizing the concepts taught in this 20-chapter curriculum, you can build applications that feel instant, alive, and profoundly engaging for the user. Happy Coding!