HTML5之WebSocket（轉自知乎）

在認識websocket以前，咱們必須瞭解的是websocket有什麼用？ 他能解決咱們遇到的什麼問題？ 若是沒用，那麼咱們就麼有使用它的必要的。 

　　websocket就是創建起全雙工協議的，提升了效率，節省了時間。  

 

   　什麼是WebSocket？ WebSocket一種在單個 TCP鏈接上進行全雙工通信的協議。即WebSocket是一個協議。 websocket是基於TCP協議的。

　　比較通俗的理解，咱們能夠點擊這裏。

　　推薦文章：

　　 https://zhuanlan.zhihu.com/p/23467317 （強烈推薦 --- 這篇文章詳盡介紹了websocket的原理以及長輪詢、短輪、commet， 經過鋪墊告訴咱們爲何要使用 websocket。對於基本概念的理解能夠看這一篇文章 ）

 

　　http://www.alloyteam.com/2015/04/qian-duan-qiang-hou-duan-fan-wan-node-js-socket-io-zhi-zuo-jian-yi-liao-tian-shi/ （推薦： 這篇文章是騰訊前端團隊的成員所寫，只是其中的例子都已經不能用了，可是這篇文章的思路仍是很是清晰的，而且分享了本身在作項目中遇到的一些坑。）

 

　　http://www.cnblogs.com/Wayou/p/hichat_built_with_nodejs_socket.html （這是講解文章，很是好。能夠參考學習。）

　　https://github.com/wayou/HiChat/blob/master/www/scripts/hichat.js （這是是github的源代碼）

　　https://hichat.herokuapp.com/ （這個網站是聊天室在PC端的具體實現 。）

 　  https://www.websocket.org/index.html#  websocket官網

　　https://socket.io/demos/chat/ (socket.io提供了聊天室demo) 相關https://socket.io/get-started/chat/教程： 

 

第一部分：WebSocket的特色

• 經過TCP一次握手就能夠創建鏈接。  而HTTP協議須要三次握手。
• HTTP中服務器永遠是被動的，即每次只有客戶端發出請求，服務器纔會響應。 可是WebSocket協議中，服務器是能夠主動的向客戶端傳遞數據。這樣就避免了輪詢的問題。
• WebSocket須要瀏覽器、服務器同時支持纔可使用，而http協議是廣泛支持的。 且WebSocket是一種新的協議，只是目前爲了兼容性，必需要創建在http的基礎上發起請求，如只用WebSocket協議名將再也不是http:而是ws:。
• 一樣地，WebSocket也是基於TCP協議的。

websocket 和 http 的區別

　　首先要知道的時 websocket 和 http是不一樣的兩個協議，最大的區別在於---http協議是被動的，而websocket協議是主動的。 所謂被動就是說只有客戶端發起請求服務器端纔會給出響應，而websocket顯然就是說能夠由服務器端來主動給數據，也許你並無請求。

　　

客戶端：啦啦啦，我要創建Websocket協議，須要的服務：chat，Websocket協議版本：17（HTTP Request）
服務端：ok，確認，已升級爲Websocket協議（HTTP Protocols Switched）
客戶端：麻煩你有信息的時候推送給我噢。。
服務端：ok，有的時候會告訴你的。
服務端：balabalabalabala
服務端：balabalabalabala
服務端：哈哈哈哈哈啊哈哈哈哈
服務端：笑死我了哈哈哈哈哈哈哈

做者：Ovear
連接：https://www.zhihu.com/question/20215561/answer/40316953
來源：知乎
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

 

 

　　這樣， 服務器端就能夠在有消息的時候再推送消息，那麼客戶端就能夠減小沒必要要的ajax輪詢了。

 

 

 

注意： 雖然websocket和http協議是兩個不一樣的協議，可是咱們每次在使用websocket協議時，首先要創建http協議，經過http協議，咱們才能進一步升級（upgrade）爲websocket協議。

 

 下面這張圖片比較好地解釋了websocket的相關原理。

 

 

相比於傳統 HTTP 的每次「請求-應答」都要 client 與 server 創建鏈接的模式，WebSocket 是一種長鏈接的模式。具體什麼意思呢？就是一旦 WebSocket 鏈接創建後，除非 client 或者 server 中有一端主動斷開鏈接，不然每次數據傳輸以前都不須要 HTTP 那樣請求數據。從上面的圖能夠看出，client 第一次須要與 server 創建鏈接，當 server 確認鏈接以後，二者便一直處於鏈接狀態。直到一方斷開鏈接，WebSocket 鏈接才斷開。

 

第二部分： 基礎知識

　　當咱們獲取了WebSocket鏈接以後，咱們就能夠經過send()方法來向服務器發送數據，並經過onmessage事件來接收服務器返回的數據。下面的api用於建立一個Websocket對象。

　　var Socket = new WebSocket(url, [protocol]);

　　其中第一個參數是須要鏈接的url，後一個參數是可選的，制定能夠接受的子協議。

　   

WebSocket相關屬性

　　即咱們建立了Socket對象以後，它會有一個readyState屬性（這個和xhr的屬性同名），取值以下：

0     表示鏈接還沒有創建

1     表示鏈接已經創建，能夠進行通訊

2     表示鏈接正在進行關閉

3     表示鏈接已經關閉或者鏈接不能打開

 

且websocket連接一旦創建，那麼就能夠雙方進行通訊了，直到有一方主動提出終止連接爲止。，

 

 

WebSocket方法

　　WebSocket中只有兩個方法，一個是使用鏈接發送數據，即Socket.send()，另外一個就是關閉鏈接，即Socket.close()。

　　注意：在xhr中是沒有close相關方法的，由於一次請求一次響應的方式使得其無需close。

 

WebSocket 事件

 

　　

第三部分：WebSocket實例

　　在創建一個WebSocket鏈接的時候，客戶端瀏覽器首先向服務器發送一個http請求，這個請求和普通的http請求不一樣，由於在首部字段中包含了Upgrade: WebSocket; 這代表這是一個申請升級爲WebSocket協議的http請求， 服務器解析這些附加的頭信息而後產生了應答信息返回給客戶端，客戶端和服務端的WebSocket鏈接就創建起來了，雙方就可使用這個鏈接進行自由的傳遞信息，而且這個鏈接會持續存在到客戶端或者服務器端的某一方主動的關閉鏈接。

　　

客戶端的HTML和JavaScript

　　下面是菜鳥教程上的例子：

  View Code

　　可是若是要使用,咱們必須安裝 pywebsocket， 安裝過程以下：

https://looly.gitbooks.io/python-basic/100/101.html 這裏有python環境的安裝教程。

http://www.runoob.com/html/html5-websocket.html 這裏是pywebsocket的安裝過程。

 　　

 

 

第四部分： http與websocket在報文方面的差別

　　這裏從報文層面談一下二者的差別。

　　首先，client 發起 WebSocket 鏈接，報文相似於 HTTP，但主要有幾點不同的地方：

　　

• "Upgrade: websocket"： 代表這是一個 WebSocket 類型請求，意在告訴 server 須要將通訊協議切換到 WebSocket

• "Sec-WebSocket-Key: *": 是 client 發送的一個 base64 編碼的密文，要求 server 必須返回一個對應加密的 "Sec-WebSocket-Accept" 應答，不然 client 會拋出 "Error during WebSocket handshake" 錯誤，並關閉鏈接

 

 

　　server 收到報文後，若是支持 WebSocket 協議，那麼就會將本身的通訊協議切換到 WebSocket，返回如下信息：

　　

• "HTTP/1.1 101 WebSocket Protocol Handshake"：返回的狀態碼爲 101，表示贊成 client 的協議轉換請求

• "Upgrade: websocket"

• "Connection: Upgrade"

• "Sec-WebSocket-Accept: *"

• ...

   以上都是利用 HTTP 協議完成的。這樣，通過「請求-相應」的過程， server 與 client 的 WebSocket 鏈接握手成功，後續即可以進行 TCP 通信了，也就沒有 HTTP 什麼事了。能夠查閱WebSocket 協議棧瞭解 WebSocket 的 client 與 server 更詳細的交互數據格式。

 

 

第五部分： websocket 與 socket的區別

　　什麼是socket? 

　　網絡應用中，兩個應用程序同時須要向對方發送消息的能力（即全雙工通訊），所利用到的技術就是 socket，其可以提供端對端的通訊。對於程序員而言，其須要在 A 端建立一個 socket 實例，併爲這個實例提供其所要鏈接的 B 端的 IP 地址和端口號，而在 B 端建立另外一個 socket 實例，而且綁定本地端口號來進行監聽。當 A 和 B 創建鏈接後，雙方就創建了一個端對端的 TCP 鏈接，從而能夠進行雙向通訊。

　　進一步解釋： 能夠知道socket並非僅僅針對於網絡的，而是對於任何的雙方之間能夠進行全雙工通訊，咱們就認爲這是socket。 而不是說必須是客戶端和服務器端。

　　

　　WebSocekt 是 HTML5 規範中的一部分，其借鑑了 socket 的思想，爲 client 和 server 之間提供了相似的雙向通訊機制。同時，WebSocket 又是一種新的應用層協議，包含一套標準的 API；而 socket 並非一個協議，而是一組接口，其主要方便你們直接使用更底層的協議（好比 TCP 或 UDP）。 

 

　　即 websocket是協議，而socket是技術。

 

 

 

第五部分： websocket與socket.io的區別

　　

https://socket.io/ 

Socket.IO 是一個封裝了 Websocket、基於 Node 的 JavaScript 框架，包含 client 的 JavaScript 和 server 的 Node。其屏蔽了全部底層細節，讓頂層調用很是簡單。

另外，Socket.IO 還有一個很是重要的好處。其不只支持 WebSocket，還支持許多種輪詢機制以及其餘實時通訊方式，並封裝了通用的接口。這些方式包含 Adobe Flash Socket、Ajax 長輪詢、Ajax multipart streaming 、持久 Iframe、JSONP 輪詢等。換句話說，當 Socket.IO 檢測到當前環境不支持 WebSocket 時，可以自動地選擇最佳的方式來實現網絡的實時通訊。e

也就是說，經過socket.io，咱們能夠更方便的調用websocket。 好比，對於ajax的封裝就會大大提升咱們的效率，而不須要本身建立，考慮兼容性問題等。 

　

 

不難理解，socket.io這個庫是結合了node更方便咱們調用socket的方法的庫，更狹隘的說，socket.io是一個websocket庫， 他和express不一樣，由於express是node的庫，因此二者是相互獨立的，爲了開發的高效性，咱們也能夠同時使用express和socket.io兩個庫。

　　

　　

 

　

 

 

 

 

完

https://www.zhihu.com/question/20215561