WeChat, QQ IM app how to do this – talk about Websocket

WeChat, QQ IM app how to do this - talk about Websocket


About me and WebSocket’s edge: I have heard from the teacher in the computer network class after the first use of the first job after graduation. It was not until recently that I changed my job, and when I came to a app that contains IM social chat, I think I can talk about my views on WebSocket/Socket. Want to do IM chat app, will have to understand the principle of WebSocket and Socket, allow me to say.


  • 1.WebSocket usage scenarios
  • Origin of 2.WebSocket
  • 3 talk about the principle of WebSocket protocol
  • The difference and relationship between 4.WebSocket and Socket
  • 5.iOS platform which WebSocket and Socket open source framework
  • How to implement WebSocket protocol in 6.iOS platform
A.WebSocket usage scenario

1 social chat
is the most famous WeChat, QQ, this type of social chat app. This type of chat app is characterized by low latency, high real-time. This is the highest demand instant inside, if there is an emergency thing, notify you by IM software, assuming a good network environment, the message will not be able to immediately send to your client, urgent things are over, you will receive the message, then this software is definitely a failure.
2 barrage
here, we must have thought of the A station and B station. Indeed, their barrage has been a feature. And barrage for a video, it is likely to be the essence of barrage. The barrage needs to be displayed in real time, as well as chat.
game player collaborative editing now many open source projects are scattered all over the world for developers to collaborative development, then it will use a version control system, such as Git, SVN to merge conflicts. But if there is a document that supports real-time online collaborative editing of many people, so this time will be used such as WebSocket, it can ensure that all the editors to edit the same document, then do not need to use Git, the SVN version control, because it will see what other editors in the real-time collaborative editing interface, who modify which paragraphs and text.
5 stock fund real time quotes
financial sector is changing rapidly – almost every millisecond is changing. If the network architecture can not meet the real-time, then it will bring huge losses to customers. A few milliseconds money stocks began to fall, after a few seconds to refresh the data, a second time, it is likely that the user has lost huge property.
6 sports live update
fans around the world, especially sports fans, of course, when we care about their love of sports games, real-time scores is the most concerned about. The best experience of this kind of news is to use Websocket to achieve real-time updates!
7 video conference / chat
video conferencing and can not be replaced and meet the real person, but he can make the distribution of people in the remotest corners of the globe gathered in front of the computer to meet. We can save everyone together on the road to spend time, to discuss the tangle of the gathering place, but also anytime, anywhere, as long as the network can meet.
8 location-based applications
more and more developers are using mobile devices to achieve the GPS function of their location-based network applications. If you keep a record of the user’s location, such as running an application to record the trajectory, you can collect more detailed data.
9 online education
online education has also developed rapidly in recent years. A lot of advantages, eliminates the limitation of the site, can let the teacher resources reasonable allocation to the country to learn the knowledge of the students on the hand, Websocket is a good choice, you can video chat, instant messaging and cooperating with others together in the online discussion… A great networking intelligent Home Furnishing
10 smart Home Furnishing
this is my graduation to join the company. Taking into account the state of the home smart devices must be real-time display on the phone app client, there is no doubt that the choice of Websocket.
11 summary
from the above I cited these scenarios, a common point is that high real-time!

Two the birth of.WebSocket

1 the beginning of the poll Polling phase

WeChat, QQ IM app how to do this - talk about Websocket

In this way, it is not suitable for access to real-time information, the client and server will always be connected to each other for a time to ask. The client will poll for new messages. In this way, the number of connections will be a lot, an acceptance, a send. And each time there will be a request to send a Http Header, it will be a lot of traffic, but also consumes the utilization of CPU.

2 improved version of the long poll Long polling phase

WeChat, QQ IM app how to do this - talk about Websocket

Long polling is an improved version of the poll, the client sends the HTTP to the server, there is no new news, if there is no new news, has been waiting for. When a new message is returned to the client. To some extent, the network bandwidth and the utilization ratio of CPU are reduced. But it still has a drawback: for example, assuming the server data update quickly, the server must wait for the client in the transmission of a data packet to the client after the arrival of a Get request, can transfer second update packets to the client, so the client, real time data showing the fastest time is 2 * RTT (round-trip time), and if in the case of network congestion, this time is not acceptable to users, such as the price in the stock market. In addition, due to the head data of HTTP data packet is large (usually more than and 400 bytes), but is actually required by the server data are few (sometimes only 10 bytes or so), so the data packets periodically in the network, it is a waste of network bandwidth.

3.WebSocket birth

The urgent need now is to support two-way communication between the client and the server, and the head of the protocol is not as big as the HTTP Header, so Websocket was born!

WeChat, QQ IM app how to do this - talk about Websocket

The above is the difference between Websocket and Polling, from the figure can be seen inside the Polling client sent a lot of Request, and the following figure, only one Upgrade, very simple and efficient. As for the comparison of consumption depends on the following figure

WeChat, QQ IM app how to do this - talk about Websocket

above, we first look at the histogram of the blue, Polling polling is the flow of consumption, the test, HTTP request and response header information costs a total of 871 bytes. Of course, each time a different request is tested, the overhead is different. The test was tested with 871 bytes of request.
Use case A: clients polling every second: Network throughput 1000 is (871 x 1000) = 871000 bytes = 6968000 bits per second (6.6 Mbps)
Use case B: clients polling every second: Network throughput 10000 is (871 x 10000) = 8710000 bytes = 69680000 bits per second (66 Mbps)
Use case C: 100000 clients polling every 1 second: Network throughput is (871 x 100000) = 87100000 bytes = 696800000 bits per second (665 Mbps) and
Websocket Frame just two bytes of overhead is instead of 871, with only 2 bytes instead of the polling of 871 bytes!
Use case A: 1000 clients receive 1 message per second: Network throughput is (2 x 1000) = 2000 bytes = 16000 bits per second (0.015 Mbps)
Use case B: 10000 clients receive 1 message per second: Network throughput is (2 x 10000) = 20000 bytes = 160000 bits per second (0.153 Mbps)
Use case C: 100000 clients receive 1 message per second: Network throughput is (2 x 100000) = 200000 bytes = 1600000 bits per second (1.526 Mbps)

The same number of times per second client polling, when the number of times as high as 10W/s times, Polling polling need to consume 665Mbps, while Websocket only took 1.526Mbps, nearly 435 times!!

Three. Talk about the principle of WebSocket protocol

Websocket is an application layer on the seventh layer of the application layer protocol, it must rely on the HTTP protocol for a handshake, the handshake is successful, the data is transmitted directly from the TCP channel, and HTTP has nothing to do with.

Websocket data transmission is the form of frame transmission, such as a message will be divided into several frame, in accordance with the order of transmission. There are several benefits to doing so:

1 data transmission can be divided into slices, without considering the size of the data caused by the length of the flag is not enough.
2 and HTTP chunk, you can generate the edge of the data transfer message, that is, to improve the transmission efficiency.

01230123 45678901 23456789 01234567 8901 +-+-+-+-+-------+-+-------------+-------------------------------+ |F|R|R|R| opcode|M| Payload len Extended payload length | | |I|S|S|S| (4) |A| (7) | (16/64) | |N|V|V|V| | | S| (if payload len==126/127) | | |1|2|3| |K| | | +-+-+-+-+-------+-+-------------+ - | Extended payload length + continued, if + payload len = = 127 | - +-------------------------------+ | | Masking-key if MASK, set to 1 | +----------------- --------------+-------------------------------+ | Masking-key (Continued) Payload Data | | +-----------------------------------------------: Payload Data + continued + + - |...: in Payload Data continued... FIN 1bit | +---------------------------------------------------------------+ said information of the last frame, flag, RSV 1-3 1bit is the marker each after the backup by default 0 Opcode 4bit frame type, later under Mask 1bit mask, whether the encrypted data, the default must be set to 1 (very egg pain here) Payload the length of the 7bit data Masking-key 1 or 4 bit mask Payload (x + y) bytes data Extension data bytes extended data Application data y bytes program data in

Specific specifications, but also look at the official website of the RFC 6455 document gives a detailed definition. There is also a translation version

Four.WebSocket and Socket difference and connection

First of all,
Socket is not actually an agreement. It works in the OSI model session layer (fifth layers), is to facilitate the use of a lower level protocol (usually TCP or UDP) and the existence of an abstract layer. Socket is the encapsulation of the TCP/IP protocol, Socket itself is not an agreement, but a call interface (API).

WeChat, QQ IM app how to do this - talk about Websocket

Socket is also commonly referred to as “socket”, used to describe the IP address and port, is a communication chain handle. The two programs on the network exchange data through a two-way communication connection, one end of the bidirectional link is called a Socket, a Socket is determined by an IP address and a port number. An application typically sends a request to a network or a network request via a socket.

Socket in the process of communication, the server listens to a port if there is a connection request, the client connection request to the server, the server receives a connection request message to the receiving client, such a connection is established. The client and server can also send messages to each other to communicate with each other until the connection is disconnected.

So based on WebSocket and Socket can be developed based on IM social chat class app

Five.IOS platform which WebSocket and Socket open source framework

Socket open source framework: CocoaAsyncSocket, socketio/socket.io-client-swift
WebSocket open source framework: facebook/SocketRocket, tidwall/SwiftWebSocket

Six.IOS platform how to achieve WebSocket protocol

Talk is cheap. Show me code the – Linus Torvalds

Let’s take a look at the implementation of facebook/SocketRocket today
first of all, this is the SRWebSocket definition of some member variables

@property (nonatomic, weak) ID < SRWebSocketDelegate> delegate; A dispatch queue for scheduling / * * the delegate calls. The queue doesn't need be a serial queue. If `nil` and `delegateOperationQueue` is `nil`, the socket uses main queue for performing all delegate method calls. / @property (nonatomic, strong) dispatch_queue_t delegateDispatchQueue An operation queue for scheduling; / * * the delegate calls. If `nil` and `delegateOperationQueue` is `nil`, the socket uses main queue for performing all delegate method calls. / @property (nonatomic, strong) NSOperationQueue *delegateOperationQueue @property (nonatomic, readonly); SRReadyState readyState; @property (nonatomic, readonly, retain) NSURL *url @property (nonatomic, rea; Donly CFHTTPMessageRef receivedHTTPHeaders array); / / Optional of cookies (NSHTTPCookie objects) to apply to the connections @property (nonatomic, copy) NSArray< NSHTTPCookie *> *requestCookies returns the; / / This / / It negotiated protocol. will be nil until after the handshake completes. @property (nonatomic, readonly, copy) NSString *protocol;

Here are some of the SRWebSocket methods

Protocols should be an array of / strings that turn into Sec-WebSocket-Protocol. (instancetype) initWithURLRequest: (NSURLRequest * request); - (instancetype) initWithURLRequest: (NSURLRequest * request) protocols: (NSArray< * NSString; > PROTOCOLS; *) - (instancetype) initWithURLRequest: (NSURLRequest *) request protocols: (NSArray< NSString; *> *) protocols allowsUntrustedSSLCertificates: allowsUntrustedSSLCertificates (BOOL); / / Some helper constructors. (instancetype) initWithURL: (NSURL * URL); - (instancetype) initWithURL: (NSURL *) URL protocols: (NSArray< NSString; *> PROTOCOLS; *) - (instancetype) initWithURL: (NSURL *) URL protocols: (NSArray< NSString *> allowsUntrustedSSLCertificates: * protocols) (BOOL) allowsUntrustedSSLCertificates; It will / / By default, schedule itself on +[NSRunLoop SR_networkRunLoop] using defaultModes. (void) scheduleInRunLoop: (NSRunLoop * aRunLoop) forMode: (NSString * mode); - (void) unscheduleFromRunLoop: (NSRunLoop * aRunLoop) forMode: (NSString * mode); / / SRWebSockets are intended for one-time-use only. Open should be called once and only once. - (open; void) - (void) - (void) close; closeWithCode: (NSInteger) code reason: (NSString * reason); / / / Send / / mark #pragma -------------------------------------- ///-------------------------------------- here are 4 ways to send Send a UTF-8 string or / * * binary data to the server. @param message UTF-8 String or Data to send. @deprecated Please use, sendString:` or `sendData` instead. * / - (void) s End: (ID) message (__attribute__ (deprecated ("Please use `sendString:` or `sendData` instead."))); (void) - sendString: (NSString * string); - (void) sendData: (NSData * data); - (void) sendPing: (NSData * data); @ end

Proxy method corresponding to 5 states

///-------------------------------------- #pragma mark - SRWebSocketDelegate ///-------------------------------------- @protocol SRWebSocketDelegate < NSObject> - (void) webSocket: (SRWebSocket *) webSocket didReceiveMessage: (ID) message; @optional (void) webSocketDidOpen: (SRWebSocket * webSocket); - (void) webSocket: (SRWebSocket * webSocket) didFailWithError: (NSError * error); - (void) webSocket: (SRWebSocket *) webSocket didCloseWithCode: (NSInteger) code reason: (NSString *) reason wasClean: (BOOL) wasClean; (void) - webSocket: (SRWebSocket * webSocket) didReceivePong: (NSData * pongPayload); / / Return YES to convert messages sent as Text to an NSString. Return NO to skip NSData -> NSString conversion for Text messages.; Defaults to YES. - (BOOL) w EbSocketShouldConvertTextFrameToString: (SRWebSocket *) webSocket; @end

The didReceiveMessage method must be implemented to receive messages.
the following 4 did methods correspond to Open, Fail, Close, ReceivePong different state of the proxy method

Method on the above, we actually look at how to write code

The first is to initialize the Websocket connection, pay attention to the ws:// or wss:// connection and there is only one, this is the Websocket agreement

Self.ws = [[SRWebSocket alloc] initWithURLRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:[NSString stringWithFormat:@ "% @: //%@:%zd/ws, serverProto, serverIP, serverPort]]]]; self.ws.delegate = delegate; [self.ws open];

send message

[self.ws send:message];

Receive messages and 3 other proxy methods

This is / / receive message agent method, here to accept the data returned from the server, which should write data processing method, the method for storing data. - (void) webSocket: (SRWebSocket *) webSocket didReceiveMessage: (ID) message *data decodeData:message] {NSDictionary = [NetworkUtils; if (data! Return);} / / here is Websocket just after the Open proxy method. Just like WeChat just connected, will display the connection, when connected, is connected in the display shows the connection, cancel method should be written on the inside - (void) webSocketDidOpen: (SRWebSocket * webSocket) {/ / Open = silent Ping [self.ws receivedPing];} / / this is closed Websocket proxy method (void) webSocket: (SRWebSocket *) webSocket didCloseWithCode: (NSInteger) code reason: (NSString *) reason wasClean: (BOOL) wasClean [self failedConnection:NSLS (Disconnected)] {}; / / this is connected with the failure of Websocket method, which will generally write method of reconnection - (void) webSocket: (SRWebSocket * webSocket) didFailWithError: (NSError *) error failedConnection:NSLS (Disconnected) {[self}];


The above is what I want to share some of the experience on the Websocket, if there are errors in the article, we welcome the guidance! Generally do not have such a large amount of QQ WeChat app, with Websocket should be able to complete the task of social chat IM. When the user reached the level of billions, there should be a lot of need to optimize, optimize the performance of a variety of bar.

Finally, the realization method of WeChat and QQ may not be the only Websocket and Socket so simple, perhaps a can support such a large user of their own development, big data, various aspects are all optimal optimization method. If you have the development and WeChat and QQ great God to see this article, you can leave a message to talk about what you use to achieve, you can also share with us, we learn together! I would like to thank the great God pointing!