目錄

一，什么是websocket

二，websocket的原理

三，websocket與http的關系

四，websocket解決的問題

1.http存在的問題

2.long poll(長輪詢)

3.Ajax輪詢

4.websocket的改進

---

一，什么是websocket

• WebSocket是HTML5下一種新的協議（websocket協議本質上是一個基于tcp的協議）
• 它實現了瀏覽器與服務器全雙工通信，能更好的節省服務器資源和帶寬并達到實時通訊的目的
• Websocket是一個持久化的協議

二，websocket的原理

1. websocket約定了一個通信的規范，通過一個握手的機制，客戶端和服務器之間能建立一個類似tcp的連接，從而方便它們之間的通信
2. 在websocket出現之前，web交互一般是基于http協議的短連接或者長連接
3. websocket是一種全新的協議，不屬于http無狀態協議，協議名為"ws"

三，websocket與http的關系

 相同點：

1. 都是基于tcp的，都是可靠性傳輸協議
2. 都是應用層協議

不同點：

1. WebSocket是雙向通信協議，模擬Socket協議，可以雙向發送或接受信息
2. HTTP是單向的
3. WebSocket是需要瀏覽器和服務器握手進行建立連接的
4. 而http是瀏覽器發起向服務器的連接，服務器預先并不知道這個連接

 聯系：

• WebSocket在建立握手時，數據是通過HTTP傳輸的。但是建立之后，在真正傳輸時候是不需要HTTP協議的

總結（總體過程）：

1. 首先，客戶端發起http請求，經過3次握手后，建立起TCP連接；http請求里存放WebSocket支持的版本號等信息，如：Upgrade、Connection、WebSocket-Version等；
2. 然后，服務器收到客戶端的握手請求后，同樣采用HTTP協議回饋數據；
3. 最后，客戶端收到連接成功的消息后，開始借助于TCP傳輸信道進行全雙工通信。

四，websocket解決的問題

1.http存在的問題

• http是一種無狀態協議，每當一次會話完成后，服務端都不知道下一次的客戶端是誰，需要每次知道對方是誰，才進行相應的響應，因此本身對于實時通訊就是一種極大的障礙
• http協議采用一次請求，一次響應，每次請求和響應就攜帶有大量的header頭，對于實時通訊來說，解析請求頭也是需要一定的時間，因此，效率也更低下
• 最重要的是，需要客戶端主動發，服務端被動發，也就是一次請求，一次響應，不能實現主動發送

2.long poll(長輪詢)

• 對于以上情況就出現了http解決的第一個方法——長輪詢
• 基于http的特性，簡單點說，就是客戶端發起長輪詢，如果服務端的數據沒有發生變更，會 hold 住請求，直到服務端的數據發生變化，或者等待一定時間超時才會返回。返回后，客戶端又會立即再次發起下一次長輪詢
• 優點是解決了http不能實時更新的弊端，因為這個時間很短，發起請求即處理請求返回響應，實現了“偽·長連接”
• 張三取快遞的例子，張三今天一定要取到快遞，他就一直站在快遞點，等待快遞一到，立馬取走

 從例子上來看有個問題：

1. 假如有好多人一起在快遞站等快遞，那么這個地方是否足夠大，（抽象解釋：需要有很高的并發，同時有很多請求等待在這里）

• 總的來看：

• 推送延遲。服務端數據發生變更后，長輪詢結束，立刻返回響應給客戶端。

• 服務端壓力。長輪詢的間隔期一般很長，例如 30s、60s，并且服務端 hold 住連接不會消耗太多服務端資源。

3.Ajax輪詢

• 基于http的特性，簡單點說，就是規定每隔一段時間就由客戶端發起一次請求，查詢有沒有新消息，如果有，就返回，如果沒有等待相同的時間間隔再次詢問
• 優點是解決了http不能實時更新的弊端，因為這個時間很短，發起請求即處理請求返回響應，把這個過程放大n倍，本質上還是request = response
• 舉個形象的例子（假設張三今天有個快遞快到了，但是張三忍耐不住，就每隔十分鐘給快遞員或者快遞站打電話，詢問快遞到了沒，每次快遞員就說還沒到，等到下午張三的快遞到了，but，快遞員不知道哪個電話是張三的，（可不是只有張三打電話，還有李四，王五），所以只能等張三打電話，才能通知他，你的快遞到了）

 從例子上來看有兩個問題：

1. 假如說，張三打電話的時間間隔為10分鐘，當他收到快遞前最后一次打電話，快遞員說沒到，他剛掛掉電話，快遞入庫了（就是到了），那么等下一次時間到了，張三打電話知道快遞到了，那么這樣的通訊算不算實時通訊？很顯然，不算，中間有十分鐘的時間差，還不算給快遞員打電話的等待時間（抽象的解釋：每次request的請求時間間隔等同于十分鐘，請求解析相當于等待）
2. 假如說張三所在的小區每天要收很多快遞，每個人都采取主動給快遞員打電話的方式，那么快遞員需要以多快的速度接到，其他人打電話占線也是問題（抽象解釋：請求過多，服務端響應也會變慢）

• 總的來看，Ajax輪詢存在的問題：

1. 推送延遲。

2. 服務端壓力。配置一般不會發生變化，頻繁的輪詢會給服務端造成很大的壓力。

3. 推送延遲和服務端壓力無法中和。降低輪詢的間隔，延遲降低，壓力增加；增加輪詢的間隔，壓力降低，延遲增高

4.websocket的改進

一旦WebSocket連接建立后，后續數據都以幀序列的形式傳輸。在客戶端斷開WebSocket連接或Server端中斷連接前，不需要客戶端和服務端重新發起連接請求。在海量并發及客戶端與服務器交互負載流量大的情況下，極大的節省了網絡帶寬資源的消耗，有明顯的性能優勢，且客戶端發送和接受消息是在同一個持久連接上發起，實現了“真·長鏈接”，實時性優勢明顯。

 

WebSocket有以下特點：

• 是真正的全雙工方式，建立連接后客戶端與服務器端是完全平等的，可以互相主動請求。而HTTP長連接基于HTTP，是傳統的客戶端對服務器發起請求的模式。
• HTTP長連接中，每次數據交換除了真正的數據部分外，服務器和客戶端還要大量交換HTTP header，信息交換效率很低。Websocket協議通過第一個request建立了TCP連接之后，之后交換的數據都不需要發送 HTTP header就能交換數據，這顯然和原有的HTTP協議有區別所以它需要對服務器和客戶端都進行升級才能實現（主流瀏覽器都已支持HTML5）

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司