WebSocket Protocol Basics

# CHAPTER 4

WebSocket Protocol Basics #

1. Introduction #

2. Learning Objectives #

• Explain the WebSocket Handshake process.

• Differentiate between ws:// and wss:// URI schemes.

• Describe the lifecycle of a WebSocket connection.

• Understand what WebSocket "Frames" are.

3. Beginner-Friendly Explanation #

1. 1. The Handshake: Before doing any business, two people meet, shake hands, and agree on the language they will speak. This is the WebSocket Handshake. It starts as a normal HTTP greeting, but one party asks, "Can we switch to WebSockets?" and the other says, "Yes, let's upgrade."

1. 2. The Meeting (Frames): Once the handshake is done, they start talking. Instead of sending entire books back and forth, they speak in sentences. In WebSockets, these small, fast sentences are called Frames.

1. 3. The Goodbye: When the meeting is over, one person formally says goodbye, and the other acknowledges it before leaving the room.

4. Real-World Examples #

• ws:// vs wss://: This is exactly like http:// vs https://. You use ws:// on your localhost when developing, but when you deploy to the internet, you use wss:// to encrypt the conversation so hackers cannot read the real-time chat messages.

5. Step-by-Step Tutorial #

Step 1: The Client sends an HTTP Upgrade request. Step 2: The Client includes a special security key (Sec-WebSocket-Key). Step 3: The Server receives the request, agrees to the upgrade, and replies with an HTTP 101 Switching Protocols status code. Step 4: The Server returns a hashed version of the security key (Sec-WebSocket-Accept) to prove it is a legitimate WebSocket server.

6. Handshake Example #

7. HTTP/WebSocket Handshake (Client Request) #

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13

8. HTTP/WebSocket Handshake (Server Response) #

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

*Once this 101 Response is sent, HTTP is completely abandoned. The TCP connection stays open, and from now on, only WebSocket Frames are allowed.*

9. What are Frames? #

• FIN bit: Is this the final fragment of a message?

• Opcode: What kind of data is this? (Text=1, Binary=2, Close=8, Ping=9, Pong=10)

• Masking bit: Is the data scrambled for security? (Client-to-server frames are always masked).

• Payload Data: The actual message (e.g., "Hello").

10. Best Practices #

• Always use Ping/Pong frames: Firewalls often close connections that are silent for too long. WebSocket servers routinely send "Ping" frames, and clients automatically respond with "Pong" frames to say, "I'm still here, don't drop the connection!"

• Secure your connections: Never pass sensitive data like passwords over a plaintext ws:// connection. Always use wss://.

11. Common Mistakes #

• Proxy Issues: Sometimes, older corporate proxy servers or firewalls do not understand the Upgrade: websocket header and will block the connection. This is why using wss:// on port 443 is crucial—firewalls usually let encrypted traffic pass through untouched.

12. Mini Exercises #

1. 1. What does the HTTP Status Code 101 mean? *(Answer: Switching Protocols)*.

1. 2. Look at the opcodes in Section 9. If a server wants to check if a client is still alive, what opcode does it use? *(Answer: 9 - Ping)*.

13. Coding Challenges #

14. MCQs with Answers #

15. Interview Questions #

• Q: Walk me through the WebSocket handshake process.

• Q: If your WebSocket connection drops precisely every 60 seconds of inactivity, what is likely happening and how do you fix it? (Hint: Ping/Pong).

16. FAQs #

17. Summary #

18. Next Chapter Recommendation #