preface
About my relationship with WebSocket: AFTER I heard the teacher talk about it in the computer network class in sophomore year, I used it for the first time and got my first job after graduation. Until recently, when I switched jobs and moved to an app that included IM social chat, I felt I could now share some of my thoughts on Websockets/sockets. If you want to do IM chat app, you have to understand WebSocket and Socket principle, listen to me one by one.
directory
- 1.WebSocket usage scenario
- 2.WebSocket was born
- 3. Talk about the principle of the WebSocket protocol
- 4. Differences and connections between WebSocket and Socket
- 5. What websockets and open source frameworks of sockets are available on iOS platform
- 6. How to implement WebSocket protocol on iOS platform
I. Usage scenarios of WebSocket
1. Social chat The most famous social chat apps are wechat and QQ. This kind of chat app is characterized by low latency and high immediacy. Even if there is the highest requirement, if there is an urgent matter, through IM software to inform you, assuming that the network environment is good, the message can not be immediately sent to your client, the urgent matter is over, you receive the message, then the software is certainly failed. Speaking of bullet screen, we must have thought of A station and B station. Indeed, their barrage has always been a feature. And for a video, bullet screen is probably the essence. The barrage needs to be real-time, and just like chat, it needs to be real-time. 3. Multi-player games 4. Collaborative editing Many open source projects are co-developed by developers scattered around the world, where version control systems such as Git and SVN are used to merge conflicts. But if there is a document to support real-time online collaborative editing, so at this time will be used for example WebSocket, it can ensure that every editor in edit the same document, at this time do not need to use Git, SVN version control these, because it would be to see each other in real time in the collaborative editing interface editor, who is in change which passages and words. The world of finance changes in a blink of an eye — almost every millisecond. If the network architecture can not meet the real-time requirements, it will bring huge losses to customers. A few milliseconds after the stock starts to crash, a few seconds later to refresh the data, within a second, it is likely that the user has lost a huge amount of money. There are many sports fans all over the world. Of course, when people are concerned about their favorite sports activities, the real-time match is the most important thing they care about. The best experience of this kind of news is to use Websocket for real-time updates! Videoconferencing is no substitute for meeting in person, but it does enable people from all over the world to gather around a computer for a meeting. It saves people time on the road and debating where to meet, and it allows meetings to be held anytime, anywhere, as long as the Internet is available. More and more developers are leveraging the GPS capabilities of mobile devices to implement their location-based web applications. If you keep track of a user’s location (such as running an app to track movement), you can collect more detailed data. Online education has also grown rapidly in recent years. There are many advantages, the site is removed from the limit, so that the resources of the famous teacher can be reasonably allocated to students all over the country who want to learn knowledge. Websocket is a good choice, you can video chat, instant chat and cooperate with others to discuss problems online. This is also a great Internet of things smart home company I joined upon graduation. Considering that the status of smart devices at home must be displayed on the mobile app client in real time, there is no doubt that Websocket is chosen. 11. Conclusion From the above scenes I listed, one thing in common is high real-time!
2. The birth of WebSocket
1. The initial Polling stage
In this way, it is not suitable to obtain real-time information, the client and the server will always be connected, every once in a while to ask. The client will poll for new messages. This way the number of connections will be large, one to accept, one to send. In addition, Http headers are sent each time a request is sent, which can consume traffic and CPU utilization.
2. The improved version of the Long polling stage
Long polling is an improved version of polling, in which the client sends HTTP to the server and waits for any new messages. When a new message is received, it is returned to the client. To some extent, the network bandwidth and CPU utilization problems are reduced. But there is a downside to this approach: Assumes that the server data update quickly, for example, the server after sends a packet to the client have to wait for the client under a Get request, to deliver a second update packet to the client, so in this case, the client display real-time data of the fastest time of 2 x RTT (round trip time), and if in the case of network congestion, This time is not acceptable to users, such as in the quotation of the stock market. In addition, due to the large amount of header data of HTTP packets (usually more than 400 bytes), but the data really needed by the server is very little (sometimes only about 10 bytes), such packets are periodically transmitted on the network, which inevitably wastes network bandwidth.
3. The WebSocket was born
There was an urgent need to support two-way communication between the client and the server, and the protocol Header was not as big as HTTP Header, so Websocket was born!
The figure above is the difference between Websocket and Polling. It can be seen from the figure that the client of Polling sends a lot of requests, while in the figure below, there is only one Upgrade, which is very simple and efficient. For a comparison in terms of consumption, see the chart below
The blue bar chart above shows the traffic consumed by Polling. In this test, the HTTP request and response headers cost a total of 871 bytes. Of course, the overhead of the header is different each time you test different requests. This test was conducted with 871-byte requests. **Use case A: ** 1000 clients polling every second: Network throughput is (871 x 1,000) = 871,000 bytes = 6,968,000 bits per second (6.6 Mbps) **Use case B: **10,000 clients polling every second: Network throughput is (871 x 10,000) = 8710,000 bytes = 69,680,000 bits per second (66 Mbps) **Use case C: **100,000 clients polling every 1 second: Network throughput is (871 x 100,000) = 87,100,000 bytes = 696,800,000 bits per second (665 Mbps) and the Frame of the Websocket is just Two bytes of overhead instead of 871 bytes! **Use case A: ** 1000 clients receive 1 message per second: Network throughput is (2 x 1,000) = 2,000 bytes = 16,000 bits per second (0.015 Mbps) **Use case B: **10,000 Clients receive 1 message per second: Network throughput is (2 x 10,000) = 20,000 bytes = 160,000 bits per second (0.153 Mbps) **Use case C: **100,000 clients receive 1 message per second: Network throughput is (2 x 100,000) = 200,000 bytes = 1,600,000 bits per second (1.526 Mbps)
The same number of client Polling times per second, when the number of high frequency up to 10W/s, Polling needs 665Mbps, while Websocket only costs 1.526Mbps, nearly 435 times!!
Talk about the principle of WebSocket protocol
Websocket is an application layer protocol at the seventh layer of the application layer. It must use HTTP to hold a handshake. After the handshake is successful, data is directly transmitted through the TCP channel, regardless of HTTP.
Websocket transmits data in the form of frames. For example, a message is divided into several frames and transmitted in sequence. This has several benefits:
1 Big data can be transmitted in fragments without considering the insufficient length marker bits caused by data size. 2 Like HTTP chunk, data can be generated and messages can be transmitted at the same time, which improves transmission efficiency.
0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 +-+-+-+-+-------+-+-------------+-------------------------------+ |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 ... : + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + | Payload Data continued ... | + -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- + 1 bit FIN said information at the end of the frame, flag, RSV 1-3 1bit each after the default backup is 0 Opcode 4bit frame type, later more details Mask 1bit Mask, whether to encrypt data, Payload 7bit length of data Masking-key 1 or 4 bit mask Payload data (x + y) bytes data Extension data x bytes extended data Application Data Y Bytes Indicates program dataCopy the codeFor details, please refer to the RFC 6455 documentation on the official website for detailed definitions. There is also a translation here
The difference and connection between WebSocket and Socket
First, sockets are not actually a protocol. It works at the OSI model session layer (Layer 5) and is an abstraction layer that exists to make it easier for people to use lower-level protocols (typically TCP or UDP) directly. A Socket is the encapsulation of TCP/IP. The Socket itself is not a protocol but an API.
A Socket, also called a Socket, describes an IP address and port and is a handle to a communication chain. Two programs on the network through a two-way communication connection to achieve data exchange, one end of the two-way link is called a Socket, a Socket by an IP address and a port number uniquely determined. Applications typically make or respond to network requests through “sockets”.
Socket in the communication process, the server monitors whether there is a connection request for a port, the client sends a connection request to the server, the server receives the connection request sends a message to the client, so that 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.
Therefore, IM social chat apps can be developed based on WebSocket and Socket
5. IOS platform WebSocket and Socket open source framework
Socket open source frameworks include: CocoaAsyncSocket, Socketio /socket. io-client-Swift WebSocket open source frameworks include: Facebook /SocketRocket, Tidwall /SwiftWebSocket
How to implement WebSocket protocol on iOS platform
Talk is being. Show me the Code — Linus Torvalds
Today we’re going to look at the implementation of Facebook /SocketRocket first of all these are some member variables defined by SRWebSocket
@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, readonly) CFHTTPMessageRef receivedHTTPHeaders;
// Optional array of cookies (NSHTTPCookie objects) to apply to the connections
@property (nonatomic, copy) NSArray<NSHTTPCookie *> *requestCookies;
// This returns the negotiated protocol.
// It will be nil until after the handshake completes.
@property (nonatomic, readonly, copy) NSString *protocol;
Copy the codeHere are some methods of SRWebSocket
// 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:(BOOL)allowsUntrustedSSLCertificates; // Some helper constructors. - (instancetype)initWithURL:(NSURL *)url; - (instancetype)initWithURL:(NSURL *)url protocols:(NSArray<NSString *> *)protocols; - (instancetype)initWithURL:(NSURL *)url protocols:(NSArray<NSString *> *)protocols allowsUntrustedSSLCertificates:(BOOL)allowsUntrustedSSLCertificates; // By default, it will 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. - (void)open; - (void)close; - (void)closeWithCode:(NSInteger)code reason:(NSString *)reason; / / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- # pragma mark the Send / / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- / / below is sent four methods / * * 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)send:(id)message __attribute__((deprecated("Please use `sendString:` or `sendData` instead."))); - (void)sendString:(NSString *)string; - (void)sendData:(NSData *)data; - (void)sendPing:(NSData *)data; @endCopy the codeProxy methods for five 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)webSocketShouldConvertTextFrameToString:(SRWebSocket *)webSocket;
@end
Copy the codeThe didReceiveMessage method must be implemented to receive messages. The following four DID methods correspond to the agent methods of Open, Fail, Close, and ReceivePong states respectively
So that’s all there is to it, so let’s actually look at the code, okay
The Websocket connection is initialized. Note that there is at most one WS :// or WSS :// connection, which is specified by the Websocket protocol
self.ws = [[SRWebSocket alloc] initWithURLRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:[NSString stringWithFormat:@"%@://%@:%zd/ws", serverProto, serverIP, serverPort]]]];
self.ws.delegate = delegate;
[self.ws open];
Copy the codeSend a message
[self.ws send:message];
Copy the codeReceive messages and three other proxy methods
// This is the proxy method that receives the message, which receives the data returned by the server. - (void)webSocket:(SRWebSocket *)webSocket didReceiveMessage:(id)message { NSDictionary *data = [NetworkUtils decodeData:message]; if (! data) return; } // Here is the proxy method just after Websocket is opened. Just like wechat just connected, it will show the connection, when the connection is connected, it will not show the connection. - (void)webSocketDidOpen:(SRWebSocket *)webSocket {// Open = silent ping [self.ws receivedPing]; } // this is the proxy method to close Websocket - (void) Websocket :(SRWebSocket *) Websocket didCloseWithCode:(NSInteger)code reason:(NSString) *)reason wasClean:(BOOL)wasClean { [self failedConnection:NSLS(Disconnected)]; } // this is the method that failed to connect to Websocket, - (void)webSocket:(SRWebSocket *)webSocket didFailWithError:(NSError *)error {[self failedConnection:NSLS(Disconnected)]; }Copy the codeThe last
The above is I want to share some of the Websocket experience, if there is a mistake in the article, welcome to give advice! Generally, apps with less users than wechat QQ can complete IM social chat tasks with Websocket. When users reach hundreds of millions of levels, there should be a lot of need to optimize, optimize performance of all kinds of bar.
Finally, the implementation method of wechat and QQ may not be so simple as Websocket and Socket, but may be their own development of a set of methods that can support such a large number of users, big data, and all aspects are optimized and optimal. If you have the development and wechat and QQ god to see this article, you can leave a message about what you use to achieve, you can also share with us, we learn together! I thank the gods for their advice!