微信,QQ這類IM app怎么做——談談Websocket

前言

關(guān)于我和WebSocket的緣:我從大二在計算機網(wǎng)絡(luò)課上聽老師講過之后,第一次使用就到了畢業(yè)之后的第一份工作。直到最近換了工作,到了一家是含有IM社交聊天功能的app的時候,我覺得我現(xiàn)在可以談談我對WebSocket/Socket的一些看法了。要想做IM聊天app,就不得不理解WebSocket和Socket的原理了,聽我一一道來。

目錄

  • 1.WebSocket使用場景
  • 2.WebSocket誕生由來
  • 3.談談WebSocket協(xié)議原理
  • 4.WebSocket 和 Socket的區(qū)別與聯(lián)系
  • 5.iOS平臺有哪些WebSocket和Socket的開源框架
  • 6.iOS平臺如何實現(xiàn)WebSocket協(xié)議
一.WebSocket的使用場景

1.社交聊天
最著名的就是微信,QQ,這一類社交聊天的app。這一類聊天app的特點是低延遲,高即時。即時是這里面要求最高的,如果有一個緊急的事情,通過IM軟件通知你,假設(shè)網(wǎng)絡(luò)環(huán)境良好的情況下,這條message還無法立即送達到你的客戶端上,緊急的事情都結(jié)束了,你才收到消息,那么這個軟件肯定是失敗的。
2.彈幕
說到這里,大家一定里面想到了A站和B站了。確實,他們的彈幕一直是一種特色。而且彈幕對于一個視頻來說,很可能彈幕才是精華。發(fā)彈幕需要實時顯示,也需要和聊天一樣,需要即時。
3.多玩家游戲
4.協(xié)同編輯
現(xiàn)在很多開源項目都是分散在世界各地的開發(fā)者一起協(xié)同開發(fā),此時就會用到版本控制系統(tǒng),比如Git,SVN去合并沖突。但是如果有一份文檔,支持多人實時在線協(xié)同編輯,那么此時就會用到比如WebSocket了,它可以保證各個編輯者都在編輯同一個文檔,此時不需要用到Git,SVN這些版本控制,因為在協(xié)同編輯界面就會實時看到對方編輯了什么,誰在修改哪些段落和文字。
5.股票基金實時報價
金融界瞬息萬變——幾乎是每毫秒都在變化。如果采用的網(wǎng)絡(luò)架構(gòu)無法滿足實時性,那么就會給客戶帶來巨大的損失。幾毫秒錢股票開始大跌,幾秒以后才刷新數(shù)據(jù),一秒鐘的時間內(nèi),很可能用戶就已經(jīng)損失巨大財產(chǎn)了。
6.體育實況更新
全世界的球迷,體育愛好者特別多,當然大家在關(guān)心自己喜歡的體育活動的時候,比賽實時的賽況是他們最最關(guān)心的事情。這類新聞中最好的體驗就是利用Websocket達到實時的更新!
7.視頻會議/聊天
視頻會議并不能代替和真人相見,但是他能讓分布在全球天涯海角的人聚在電腦前一起開會。既能節(jié)省大家聚在一起路上花費的時間,討論聚會地點的糾結(jié),還能隨時隨地,只要有網(wǎng)絡(luò)就可以開會。
8.基于位置的應用
越來越多的開發(fā)者借用移動設(shè)備的GPS功能來實現(xiàn)他們基于位置的網(wǎng)絡(luò)應用。如果你一直記錄用戶的位置(比如運行應用來記錄運動軌跡),你可以收集到更加細致化的數(shù)據(jù)。
9.在線教育
在線教育近幾年也發(fā)展迅速。優(yōu)點很多,免去了場地的限制,能讓名師的資源合理的分配給全國各地想要學習知識的同學手上,Websocket是個不錯的選擇,可以視頻聊天、即時聊天以及其與別人合作一起在網(wǎng)上討論問題...
10.智能家居
這也是我一畢業(yè)加入的一個偉大的物聯(lián)網(wǎng)智能家居的公司。考慮到家里的智能設(shè)備的狀態(tài)必須需要實時的展現(xiàn)在手機app客戶端上,毫無疑問選擇了Websocket。
11.總結(jié)
從上面我列舉的這些場景來看,一個共同點就是,高實時性!

二.WebSocket誕生由來

1.最開始的輪詢Polling階段

這種方式下,是不適合獲取實時信息的,客戶端和服務器之間會一直進行連接,每隔一段時間就詢問一次。客戶端會輪詢,有沒有新消息。這種方式連接數(shù)會很多,一個接受,一個發(fā)送。而且每次發(fā)送請求都會有Http的Header,會很耗流量,也會消耗CPU的利用率。

2.改進版的長輪詢Long polling階段

長輪詢是對輪詢的改進版,客戶端發(fā)送HTTP給服務器之后,有沒有新消息,如果沒有新消息,就一直等待。當有新消息的時候,才會返回給客戶端。在某種程度上減小了網(wǎng)絡(luò)帶寬和CPU利用率等問題。但是這種方式還是有一種弊端:例如假設(shè)服務器端的數(shù)據(jù)更新速度很快,服務器在傳送一個數(shù)據(jù)包給客戶端后必須等待客戶端的下一個Get請求到來,才能傳遞第二個更新的數(shù)據(jù)包給客戶端,那么這樣的話,客戶端顯示實時數(shù)據(jù)最快的時間為2×RTT(往返時間),而且如果在網(wǎng)絡(luò)擁塞的情況下,這個時間用戶是不能接受的,比如在股市的的報價上。另外,由于http數(shù)據(jù)包的頭部數(shù)據(jù)量往往很大(通常有400多個字節(jié)),但是真正被服務器需要的數(shù)據(jù)卻很少(有時只有10個字節(jié)左右),這樣的數(shù)據(jù)包在網(wǎng)絡(luò)上周期性的傳輸,難免對網(wǎng)絡(luò)帶寬是一種浪費。

3.WebSocket誕生

現(xiàn)在急需的需求是能支持客戶端和服務器端的雙向通信,而且協(xié)議的頭部又沒有HTTP的Header那么大,于是,Websocket就誕生了!

上圖就是Websocket和Polling的區(qū)別,從圖中可以看到Polling里面客戶端發(fā)送了好多Request,而下圖,只有一個Upgrade,非常簡潔高效。至于消耗方面的比較就要看下圖了


上圖中,我們先看藍色的柱狀圖,是Polling輪詢消耗的流量,這次測試,HTTP請求和響應頭信息開銷總共包括871字節(jié)。當然每次測試不同的請求,頭的開銷不同。這次測試都以871字節(jié)的請求來測試。
**Use case A: **1,000 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) = 8,710,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)
而Websocket的Frame是 just two bytes of overhead instead of 871,僅僅用2個字節(jié)就代替了輪詢的871字節(jié)!
**Use case A: **1,000 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)

相同的每秒客戶端輪詢的次數(shù),當次數(shù)高達10W/s的高頻率次數(shù)的時候,Polling輪詢需要消耗665Mbps,而Websocket僅僅只花費了1.526Mbps,將近435倍?。?/p>

三.談談WebSocket協(xié)議原理

Websocket是應用層第七層上的一個應用層協(xié)議,它必須依賴 HTTP 協(xié)議進行一次握手 ,握手成功后,數(shù)據(jù)就直接從 TCP 通道傳輸,與 HTTP 無關(guān)了。

Websocket的數(shù)據(jù)傳輸是frame形式傳輸?shù)?,比如會將一條消息分為幾個frame,按照先后順序傳輸出去。這樣做會有幾個好處:

1 大數(shù)據(jù)的傳輸可以分片傳輸,不用考慮到數(shù)據(jù)大小導致的長度標志位不足夠的情況。
2 和http的chunk一樣,可以邊生成數(shù)據(jù)邊傳遞消息,即提高傳輸效率。

 0                   1                   2                   3
 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 ...                |
 +---------------------------------------------------------------+



    FIN      1bit 表示信息的最后一幀,flag,也就是標記符
    RSV 1-3  1bit each 以后備用的 默認都為 0
    Opcode   4bit 幀類型,稍后細說
    Mask     1bit 掩碼,是否加密數(shù)據(jù),默認必須置為1 (這里很蛋疼)
    Payload  7bit 數(shù)據(jù)的長度
    Masking-key      1 or 4 bit 掩碼
    Payload data     (x + y) bytes 數(shù)據(jù)
    Extension data   x bytes  擴展數(shù)據(jù)
    Application data y bytes  程序數(shù)據(jù)

具體的規(guī)范,還請看官網(wǎng)的RFC 6455文檔給出的詳細定義。這里還有一個翻譯版本

四.WebSocket 和 Socket的區(qū)別與聯(lián)系

首先,
Socket 其實并不是一個協(xié)議。它工作在 OSI 模型會話層(第5層),是為了方便大家直接使用更底層協(xié)議(一般是 TCPUDP )而存在的一個抽象層。Socket是對TCP/IP協(xié)議的封裝,Socket本身并不是協(xié)議,而是一個調(diào)用接口(API)。


Socket通常也稱作”套接字”,用于描述IP地址和端口,是一個通信鏈的句柄。網(wǎng)絡(luò)上的兩個程序通過一個雙向的通訊連接實現(xiàn)數(shù)據(jù)的交換,這個雙向鏈路的一端稱為一個Socket,一個Socket由一個IP地址和一個端口號唯一確定。應用程序通常通過”套接字”向網(wǎng)絡(luò)發(fā)出請求或者應答網(wǎng)絡(luò)請求。

Socket在通訊過程中,服務端監(jiān)聽某個端口是否有連接請求,客戶端向服務端發(fā)送連接請求,服務端收到連接請求向客戶端發(fā)出接收消息,這樣一個連接就建立起來了??蛻舳撕头斩艘捕伎梢韵嗷グl(fā)送消息與對方進行通訊,直到雙方連接斷開。

所以基于WebSocket和基于Socket都可以開發(fā)出IM社交聊天類的app

五.iOS平臺有哪些WebSocket和Socket的開源框架

Socket開源框架有:CocoaAsyncSocket,socketio/socket.io-client-swift
WebSocket開源框架有:facebook/SocketRocket,tidwall/SwiftWebSocket

六.iOS平臺如何實現(xiàn)WebSocket協(xié)議

Talk is cheap。Show me the code ——Linus Torvalds

我們今天來看看facebook/SocketRocket的實現(xiàn)方法
首先這是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;

下面這些是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 Send
///--------------------------------------

//下面是4個發(fā)送的方法
/**
 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;

@end

對應5種狀態(tài)的代理方法

///--------------------------------------
#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

didReceiveMessage方法是必須實現(xiàn)的,用來接收消息的。
下面4個did方法分別對應著Open,F(xiàn)ail,Close,ReceivePong不同狀態(tài)的代理方法

方法就上面這些了,我們實際來看看代碼怎么寫

先是初始化Websocket連接,注意此處ws://或者wss://連接有且最多只能有一個,這個是Websocket協(xié)議規(guī)定的

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

發(fā)送消息

    [self.ws send:message];

接收消息以及其他3個代理方法

//這個就是接受消息的代理方法了,這里接受服務器返回的數(shù)據(jù),方法里面就應該寫處理數(shù)據(jù),存儲數(shù)據(jù)的方法了。
- (void)webSocket:(SRWebSocket *)webSocket didReceiveMessage:(id)message
{
    NSDictionary *data = [NetworkUtils decodeData:message];
    if (!data)
        return;
}

//這里是Websocket剛剛Open之后的代理方法。就想微信剛剛連接中,會顯示連接中,當連接上了,就不顯示連接中了,取消顯示連接的方法就應該寫在這里面
- (void)webSocketDidOpen:(SRWebSocket *)webSocket
{
    // Open = silent ping
    [self.ws receivedPing];
}

//這是關(guān)閉Websocket的代理方法
- (void)webSocket:(SRWebSocket *)webSocket didCloseWithCode:(NSInteger)code reason:(NSString *)reason wasClean:(BOOL)wasClean
{
    [self failedConnection:NSLS(Disconnected)];
}

//這里是連接Websocket失敗的方法,這里面一般都會寫重連的方法
- (void)webSocket:(SRWebSocket *)webSocket didFailWithError:(NSError *)error
{
    [self failedConnection:NSLS(Disconnected)];
}

最后

以上就是我想分享的一些關(guān)于Websocket的心得,文中如果有錯誤的地方,歡迎大家指點!一般沒有微信QQ那么大用戶量的app,用Websocket應該都可以完成IM社交聊天的任務。當用戶達到億級別,應該還有很多需要優(yōu)化,優(yōu)化性能各種的吧。

最后,微信和QQ的實現(xiàn)方法也許并不是只用Websocket和Socket這么簡單,也許是他們自己開發(fā)的一套能支持這么大用戶,大數(shù)據(jù)的,各方面也都優(yōu)化都最優(yōu)的方法。如果有開發(fā)和微信和QQ的大神看到這篇文章,可以留言說說看你們用什么方式實現(xiàn)的,也可以和我們一起分享,我們一起學習!我先謝謝大神們的指點了!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • 今天我將為大家介紹常用的幾種消息推送:JMS,MQTT,XMPP,WebSocket,AMQP,友盟,環(huán)信。 首先...
    馬小悅閱讀 2,354評論 0 7
  • 初涉IM,首先我有這么幾個問題需要弄明白: Socket 和 WebSocket 有哪些區(qū)別和聯(lián)系? WebSoc...
    夜幕青雨閱讀 11,475評論 8 39
  • WebSocket簡介 談到Web實時推送,就不得不說WebSocket。在WebSocket出現(xiàn)之前,很多網(wǎng)站為...
    吧啦啦小湯圓閱讀 8,334評論 15 75
  • 石堅聽到老伴的埋汰,心里清楚她是在激將自己。 但他自己也知道,現(xiàn)在這個模樣的自己,確實像丟了魂似的,他需要改變。 ...
    魚團子環(huán)游銀河鐵道閱讀 305評論 0 0
  • 我家的“二胎”是一只普通短毛貓,屬龍,雙子座,大名果果。 它一個多月大的時候被抱回了家,從此,我家有了“二胎”,果...
    一口一閱讀 932評論 2 4

友情鏈接更多精彩內(nèi)容