websocket · 人手一本php工具書

>[success]總結： 1. websocket是h5獨有的，是一個基于TCP協議，只需要一個握手動作，就通過js發送數據。狀態碼是1xx開頭的，如101成功。 2. 服務端我使用的是純php開發的框架：workerman。 3. 可參考我的“常見類庫使用-》workerman”（參考之前千萬要看完這篇文章，自己跑下代碼試一下，這樣你就會更明白） # :-: websocket WebSocket是HTML5開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。在WebSocket API中，瀏覽器和服務器只需要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送。瀏覽器通過 JavaScript 向服務器發出建立 WebSocket 連接的請求，連接建立以后，客戶端和服務器端就可以通過 TCP 連接直接交換數據。當你獲取 Web Socket 連接后，你可以通過 send() 方法來向服務器發送數據，并通過 onmessage 事件來接收服務器返回的數據。 > Web套接字 - 定義 > Web套接字被定義為服務器和客戶端之間的雙向通信，這意味著雙方同時進行通信和交換數據。 > Web套接字的關鍵點是真正的并發性和性能優化，從而產生更靈敏和更豐富的Web應用程序 # :-: 以下 API 用于創建 WebSocket 對象 ```js var Socket = new WebSocket(url, [protocol] ); #第一個參數，指定連接的 URL。第二個參數 protocol 是可選的，指定了可接受的子協議。 ``` ### **網址（url）** HTTP有自己的一組模式，如http和https。Web套接字協議也具有在其URL模式中定義的類似模式。下圖顯示了令牌中的Web Socket URL。 ![](https://box.kancloud.cn/346c460e8be82ddde70807d49f0fdadb_501x106.png) 以下是 WebSocket 對象的屬性。假定我們使用了以上代碼創建了 Socket 對象： ![](https://box.kancloud.cn/740c4540b3a595a855ef3dc83893cd53_732x301.png) 以下是 WebSocket 對象的相關事件。假定我們使用了以上代碼創建了 Socket 對象： ![](https://box.kancloud.cn/63fad569ebbfc884eb15a9812ea252e7_731x199.png) 以下是 WebSocket 對象的相關方法。假定我們使用了以上代碼創建了 Socket 對象： ![](https://box.kancloud.cn/6a99d886cfc9fc577ac0479a75b2921c_731x108.png) >[info]屬性啥也不帶；事件前，帶on；方法后，帶()； # :-: websocket的實例 WebSocket 協議本質上是一個基于 TCP 的協議。為了建立一個 WebSocket 連接，客戶端瀏覽器首先要向服務器發起一個 HTTP 請求，這個請求和通常的 HTTP 請求不同，包含了一些附加頭信息，其中附加頭信息"Upgrade: WebSocket"表明這是一個申請協議升級的 HTTP 請求，服務器端解析這些附加的頭信息然后產生應答信息返回給客戶端，客戶端和服務器端的 WebSocket 連接就建立起來了，雙方就可以通過這個連接通道自由的傳遞信息，并且這個連接會持續存在直到客戶端或者服務器端的某一方主動的關閉連接。 ![](https://box.kancloud.cn/ba8706f73418b16a18e40283e6e69d56_1395x490.png) ## 1、代碼可以參考這個賣書的網站：http://www.websocket.org/echo.html 也可以直接復制，粘貼到你自己的ide上 ``` html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>測試</title> </head> <body> <div id="output"></div> <script> var socket; var url = "ws://echo.websocket.org/"; //指定連接的url。真實項目中這里填寫服務器的ip或域名 var output; //初始化 function init(){ output = document.getElementById('output'); testWebSocket(); } function testWebSocket() { socket = new WebSocket(url); //只需要做一個握手的動作，瀏覽器和服務器之間就形成了一條快速通道，就可以將數據互相傳送了 //連接上服務端時觸發 socket.onopen = function () { writeToScreen('連接'); doSend("websocket rocks"); }; //服務端斷開時觸發 socket.onclose = function(){ writeToScreen('關閉'); }; //接收服務端發來的請求 socket.onmessage = function(evt){ writeToScreen('RESPONSE: '+ evt.data+''); socket.close(); }; //通信發生錯誤時觸發 socket.onerror = function (evt) { writeToScreen('ERROR: '+ evt.data); }; } //發送數據 function doSend(message){ writeToScreen('SENT:'+ message); //先顯示 socket.send(message); //后發送 } //顯示內容 function writeToScreen(message) { var pre = document.createElement('p'); pre.style.wordWrap = "break-word"; pre.innerHTML = message; output.appendChild(pre); //追加節點 } window.addEventListener("load", init, false); //加載，初始化函數 </script> </body> </html> ``` ## 2、主要代碼解釋： ### 2.1、申請一個WebSocket對象參數是需要連接的服務器端的地址，同http協議使用http://開頭一樣，WebSocket協議的URL使用ws://開頭，另外安全的WebSocket協議使用wss://開頭。 ``` js var wsUri ="ws://echo.websocket.org/"; websocket = new WebSocket(wsUri); ``` ### 2.2、WebSocket對象一共支持四個消息 onopen, onmessage, onclose和onerror 我們可以看出所有的操作都是采用消息的方式觸發的，這樣就不會阻塞UI，使得UI有更快的響應時間，得到更好的用戶體驗。（1）當Browser和WebSocketServer連接成功后，會觸發onopen消息; ``` js websocket.onopen = function(evt) {}; ``` （2）如果連接失敗，發送、接收數據失敗或者處理數據出現錯誤，browser會觸發onerror消息; ``` js websocket.onerror = function(evt) { }; ``` （3）當Browser接收到WebSocketServer發送過來的數據時，就會觸發onmessage消息，參數evt中包含server傳輸過來的數據; ``` js websocket.onmessage = function(evt) { }; ``` （4）當Browser接收到WebSocketServer端發送的關閉連接請求時，就會觸發onclose消息。 ``` js websocket.onclose = function(evt) { }; ``` ### 2.3、通信協議 WebSocket與TCP、HTTP的關系WebSocket與http協議一樣都是基于TCP的，所以他們都是可靠的協議，Web開發者調用的WebSocket的send函數在browser的實現中最終都是通過TCP的系統接口進行傳輸的。   WebSocket和Http協議一樣都屬于應用層的協議，那么他們之間有沒有什么關系呢?答案是肯定的，WebSocket在建立握手連接時，數據是通過http協議傳輸的，但是在建立連接之后，真正的數據傳輸階段是不需要http協議參與的。 ![](https://box.kancloud.cn/d79b568c64098a45f037c107bb214a73_536x229.png) ### 2.4、通訊協議詳解從下圖可以明顯的看到，分三個階段： 1. 打開握手 2. 數據傳遞 3. 關閉握手 ![](https://box.kancloud.cn/cb45dbabcf7cbf4264342217ebd3074d_544x524.png) 下圖顯示了WebSocket主要的三步瀏覽器和服務器端分別做了那些事情 ![](https://box.kancloud.cn/c359d84badf60138ea72280794328c60_601x448.png) ### 2.5、WebSocket的優點 1. 服務器與客戶端之間交換的標頭信息很小，大概只有2字節; 2. 客戶端與服務器都可以主動傳送數據給對方; 3. 不用頻率創建TCP請求及銷毀請求，減少網絡帶寬資源的占用，同時也節省服務器資源; ### 2.6、建立連接的握手 當Web應用程序調用new WebSocket(url)接口時，Browser就開始了與地址為url的WebServer建立握手連接的過程。 1. Browser與WebSocket服務器通過TCP三次握手建立連接，如果這個建立連接失敗，那么后面的過程就不會執行，Web應用程序將收到錯誤消息通知。 2. 在TCP建立連接成功后，Browser/UA通過http協議傳送WebSocket支持的版本號，協議的字版本號，原始地址，主機地址等等一些列字段給服務器端。 3. WebSocket服務器收到Browser/UA發送來的握手請求后，如果數據包數據和格式正確，客戶端和服務器端的協議版本號匹配等等，就接受本次握手連接，并給出相應的數據回復，同樣回復的數據包也是采用http協議傳輸。 4. Browser收到服務器回復的數據包后，如果數據包內容、格式都沒有問題的話，就表示本次連接成功，觸發onopen消息，此時Web開發者就可以在此時通過send接口想服務器發送數據。否則，握手連接失敗，Web應用程序會收到onerror消息，并且能知道連接失敗的原因。這個握手很像HTTP，但是實際上卻不是，它允許服務器以HTTP的方式解釋一部分handshake的請求，然后切換為websocket ### 2.7、數據傳輸 - WebScoket協議中，數據以幀序列的形式傳輸。 - 考慮到數據安全性，客戶端向服務器傳輸的數據幀必須進行掩碼處理。服務器若接收到未經過掩碼處理的數據幀，則必須主動關閉連接。 - 服務器向客戶端傳輸的數據幀一定不能進行掩碼處理。客戶端若接收到經過掩碼處理的數據幀，則必須主動關閉連接。 - 針對上情況，發現錯誤的一方可向對方發送close幀(狀態碼是1002，表示協議錯誤)，以關閉連接。 - 關閉WebSocket(握手) ![](https://box.kancloud.cn/69ece4d8be40fc95d4363d160bb20d25_523x240.png)