Exploring WebSocket

Home PDF 中文

This blog post was organized with the assistance of ChatGPT-4o.


Hello, I’m Li Zhiwei. As the founder and CTO of CodeReview platform and a former engineer at LeanCloud, I have extensive experience with WebSocket, especially through the development of the IM SDK.

The Relevance of WebSocket

WebSocket is a protocol providing full-duplex communication channels over a single TCP connection. It’s widely used in modern applications requiring real-time interaction such as instant messaging, real-time comments, multiplayer games, collaborative editing, and live stock prices.

Modern Applications of WebSocket

WebSocket is extensively applied in:

Evolution of WebSocket

Polling: The client frequently requests updates from the server. Long Polling: The server holds the request open until new information is available. HTTP Bi-directional Connections: Requires multiple connections for sending and receiving, and HTTP headers with each request. Single TCP Connection (WebSocket): Overcomes limitations of HTTP bi-directional connections, offering higher real-time capabilities and lower latency.

Implementing WebSocket on iOS

Popular iOS WebSocket Libraries:

Using SRWebSocket

  1. Initialization and Connection:
    SRWebSocket *webSocket = [[SRWebSocket alloc] initWithURLRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"ws://echo.websocket.org"]]];
    webSocket.delegate = self;
    [webSocket open];
    
  2. Sending Messages:
    [webSocket send:@"Hello, World!"];
    
  3. Receiving Messages: Implement the SRWebSocketDelegate methods to handle incoming messages and events.

  4. Error Handling and Event Notifications: Properly handle errors and notify users of connection issues.

Detailed WebSocket Protocol Explanation

WebSocket operates on top of TCP and introduces several enhancements:

WebSocket Protocol Core

1. Handshake: The WebSocket handshake uses the HTTP Upgrade mechanism:

2. Data Transmission: WebSocket frames can contain UTF-8 text, binary data, and control frames like close, ping, and pong.

3. Security: Browsers automatically add the Origin header, which cannot be forged by other clients.

WebSocket URIs

WebSocket Frame Protocol

Frame Structure:

Masking Key: Used to prevent man-in-the-middle attacks by masking frames from the client.

Closing Handshake

Close Frame:

Examples

Example 1: Single-frame Unmasked Text Message

0x81 0x05 0x48 0x65 0x6c 0x6c 0x6f

Contains “Hello”

Example 2: Single-frame Masked Text Message

0x81 0x85 0x37 0xfa 0x21 0x3d 0x7f 0x9f 0x4d 0x51 0x58

Contains “Hello” with a masking key

Example 3: Fragmented Unmasked Text Message

0x01 0x03 0x48 0x65 0x6c
0x80 0x02 0x6c 0x6f

Contains “Hel” and “lo” in two frames

Advanced Topics

Masking and Unmasking:

Fragmentation:

Control Frames:

Augmented Backus-Naur Form

Implementing WebSocket in Different Scenarios

1. Real-time Chat Applications:

2. Live Updates:

3. Multiplayer Games:

Conclusion

WebSocket significantly enhances real-time communication capabilities for web and mobile applications by providing a robust and efficient protocol built on top of TCP. By understanding and implementing WebSocket, developers can create more responsive and interactive applications. Whether you are developing for IM, real-time commenting, or multiplayer gaming, WebSocket is a powerful tool in your development arsenal.

For further details, refer to the WebSocket RFC and explore libraries like SocketRocket on GitHub.

Acknowledgements

Thank you for following along. Feel free to reach out on GitHub or Weibo for more insights and discussions.


Back 2016.05.29 Donate