本文摘自：http://www.ruanyifeng.com/blog/2017/05/websocket.html

一、初識websocket

初次接觸 WebSocket 的人，都會問同樣的問題：我們已經(jīng)有了 HTTP 協(xié)議，為什么還需要另一個協(xié)議？它能帶來什么好處？

答案很簡單，因為 HTTP 協(xié)議有一個缺陷：通信只能由客戶端發(fā)起。

舉例來說，我們想了解今天的天氣，只能是客戶端向服務(wù)器發(fā)出請求，服務(wù)器返回查詢結(jié)果。HTTP 協(xié)議做不到服務(wù)器主動向客戶端推送信息。

這種單向請求的特點，注定了如果服務(wù)器有連續(xù)的狀態(tài)變化，客戶端要獲知就非常麻煩。我們只能使用輪詢：每隔一段時候，就發(fā)出一個詢問，了解服務(wù)器有沒有新的信息。最典型的場景就是聊天室。

輪詢的效率低，非常浪費資源（因為必須不停連接，或者 HTTP 連接始終打開）。因此，工程師們一直在思考，有沒有更好的方法。WebSocket 就是這樣發(fā)明的。

?

二、websocket的特點

它的最大特點就是，服務(wù)器可以主動向客戶端推送信息，客戶端也可以主動向服務(wù)器發(fā)送信息，是真正的雙向平等對話，屬于服務(wù)器推送技術(shù)的一種

其他特點包括：

（1）建立在 TCP 協(xié)議之上，服務(wù)器端的實現(xiàn)比較容易。

（2）與 HTTP 協(xié)議有著良好的兼容性。默認端口也是80和443，并且握手階段采用 HTTP 協(xié)議，因此握手時不容易屏蔽，能通過各種 HTTP 代理服務(wù)器。

（3）數(shù)據(jù)格式比較輕量，性能開銷小，通信高效。

（4）可以發(fā)送文本，也可以發(fā)送二進制數(shù)據(jù)。

（5）沒有同源限制，客戶端可以與任意服務(wù)器通信。

（6）協(xié)議標識符是ws（如果加密，則為wss），服務(wù)器網(wǎng)址就是 URL。

ws://example.com:80/some/path

?

三、客戶端的簡單示例

WebSocket 的用法相當(dāng)簡單。

下面是一個網(wǎng)頁腳本的例子，基本上一眼就能明白。

var ws = new WebSocket("wss://echo.websocket.org"); ws.onopen = function(evt) { console.log("Connection open ..."); ws.send("Hello WebSockets!"); }; ws.onmessage = function(evt) { console.log( "Received Message: " + evt.data); ws.close(); }; ws.onclose = function(evt) { console.log("Connection closed."); };

四、客戶端的 API

WebSocket 客戶端的 API 如下。

4.1 WebSocket 構(gòu)造函數(shù)

WebSocket 對象作為一個構(gòu)造函數(shù)，用于新建 WebSocket 實例。

var ws = new WebSocket('ws://localhost:8080');

執(zhí)行上面語句之后，客戶端就會與服務(wù)器進行連接。

4.2 webSocket.readyState

readyState屬性返回實例對象的當(dāng)前狀態(tài)，共有四種。

• CONNECTING：值為0，表示正在連接。
• OPEN：值為1，表示連接成功，可以通信了。
• CLOSING：值為2，表示連接正在關(guān)閉。
• CLOSED：值為3，表示連接已經(jīng)關(guān)閉，或者打開連接失敗。

下面是一個示例。

switch (ws.readyState) { case WebSocket.CONNECTING: // do something break; case WebSocket.OPEN: // do something break; case WebSocket.CLOSING: // do something break; case WebSocket.CLOSED: // do something break; default: // this never happens break; }

4.3 webSocket.onopen

實例對象的onopen屬性，用于指定連接成功后的回調(diào)函數(shù)。

ws.onopen = function () { ws.send('Hello Server!'); }

如果要指定多個回調(diào)函數(shù)，可以使用addEventListener方法。

ws.addEventListener('open', function (event) { ws.send('Hello Server!'); });

4.4 webSocket.onclose

實例對象的onclose屬性，用于指定連接關(guān)閉后的回調(diào)函數(shù)。

ws.onclose = function(event) { var code = event.code; var reason = event.reason; var wasClean = event.wasClean; // handle close event }; ws.addEventListener("close", function(event) { var code = event.code; var reason = event.reason; var wasClean = event.wasClean; // handle close event });

4.5 webSocket.onmessage

實例對象的onmessage屬性，用于指定收到服務(wù)器數(shù)據(jù)后的回調(diào)函數(shù)。

ws.onmessage = function(event) { var data = event.data; // 處理數(shù)據(jù) }; ws.addEventListener("message", function(event) { var data = event.data; // 處理數(shù)據(jù) });

注意，服務(wù)器數(shù)據(jù)可能是文本，也可能是二進制數(shù)據(jù)（blob對象或Arraybuffer對象）。

ws.onmessage = function(event){ if(typeof event.data === String) { console.log("Received data string"); } if(event.data instanceof ArrayBuffer){ var buffer = event.data; console.log("Received arraybuffer"); } }

除了動態(tài)判斷收到的數(shù)據(jù)類型，也可以使用binaryType屬性，顯式指定收到的二進制數(shù)據(jù)類型。

// 收到的是 blob 數(shù)據(jù) ws.binaryType = "blob"; ws.onmessage = function(e) { console.log(e.data.size); }; // 收到的是 ArrayBuffer 數(shù)據(jù) ws.binaryType = "arraybuffer"; ws.onmessage = function(e) { console.log(e.data.byteLength); };

4.6 webSocket.send()

實例對象的send()方法用于向服務(wù)器發(fā)送數(shù)據(jù)。

發(fā)送文本的例子。

ws.send('your message');

發(fā)送 Blob 對象的例子。

var file = document.querySelector('input[type="file"]') .files[0]; ws.send(file);

發(fā)送 ArrayBuffer 對象的例子。

// Sending canvas ImageData as ArrayBuffer var img = canvas_context.getImageData(0, 0, 400, 320); var binary = new Uint8Array(img.data.length); for (var i = 0; i < img.data.length; i++) { binary[i] = img.data[i]; } ws.send(binary.buffer);

4.7 webSocket.bufferedAmount

實例對象的bufferedAmount屬性，表示還有多少字節(jié)的二進制數(shù)據(jù)沒有發(fā)送出去。它可以用來判斷發(fā)送是否結(jié)束。

var data = new ArrayBuffer(10000000); socket.send(data); if (socket.bufferedAmount === 0) { // 發(fā)送完畢 } else { // 發(fā)送還沒結(jié)束 }

4.8 webSocket.onerror

實例對象的onerror屬性，用于指定報錯時的回調(diào)函數(shù)。

socket.onerror = function(event) { // handle error event }; socket.addEventListener("error", function(event) { // handle error event });

五、服務(wù)端的實現(xiàn)

WebSocket 服務(wù)器的實現(xiàn)，可以查看維基百科的列表

常用的 Node 實現(xiàn)有以下三種。

• μWebSockets
• Socket.IO
• WebSocket-Node

具體的用法請查看它們的文檔，這里不詳細介紹了。

六、WebSocketd

下面，我要推薦一款非常特別的 WebSocket 服務(wù)器：Websocketd。

它的最大特點，就是后臺腳本不限語言，標準輸入（stdin）就是 WebSocket 的輸入，標準輸出（stdout）就是 WebSocket 的輸出。

舉例來說，下面是一個 Bash 腳本counter.sh。

#!/bin/bashecho 1 sleep 1echo 2 sleep 1 echo 3

命令行下運行這個腳本，會輸出1、2、3，每個值之間間隔1秒。

$ bash ./counter.sh 1 2 3

現(xiàn)在，啟動websocketd，指定這個腳本作為服務(wù)。

$ websocketd --port=8080 bash ./counter.sh

上面的命令會啟動一個 WebSocket 服務(wù)器，端口是8080。每當(dāng)客戶端連接這個服務(wù)器，就會執(zhí)行counter.sh腳本，并將它的輸出推送給客戶端。

var ws = new WebSocket('ws://localhost:8080/'); ws.onmessage = function(event) { console.log(event.data); };

上面是客戶端的 JavaScript 代碼，運行之后會在控制臺依次輸出1、2、3。

有了它，就可以很方便地將命令行的輸出，發(fā)給瀏覽器。

$ websocketd --port=8080 ls

上面的命令會執(zhí)行l(wèi)s命令，從而將當(dāng)前目錄的內(nèi)容，發(fā)給瀏覽器。使用這種方式實時監(jiān)控服務(wù)器，簡直是輕而易舉（代碼）。

更多的用法可以參考官方示例。

• Bash 腳本讀取客戶端輸入的例子
• 五行代碼實現(xiàn)一個最簡單的聊天服務(wù)器

websocketd 的實質(zhì)，就是命令行的 WebSocket 代理。只要命令行可以執(zhí)行的程序，都可以通過它與瀏覽器進行 WebSocket 通信。下面是一個 Node 實現(xiàn)的回聲服務(wù)greeter.js。

process.stdin.setEncoding('utf8'); process.stdin.on('readable', function() { var chunk = process.stdin.read(); if (chunk !== null) { process.stdout.write('data: ' + chunk); } });

?

ps:附上學(xué)習(xí)總結(jié)

1 1.偏函數(shù) 2 from functools import partial 3 4 def func(num: int, anda, andb=1): 5 return num ** 2 + anda + andb 6 7 new_func = partial(func, 10) 8 print(new_func(1,10)) 9 10 11 one 12 用戶名 = jinwangba 13 密碼 = yinwangba 14 request = from{username:jinwangba} 15 16 time.sleep(15) -- 5 17 request = from{username:jinwangba1} 18 19 if req.jinwangba req.yinwangba 20 jinwangba1 21 22 23 24 two 25 用戶名 = jinwangba1 26 密碼 = yinwangba1 27 request = from{username:jinwangba1} 28 time.sleep(15) -- 10 29 30 31 32 33 HTTP 1.1 / GET\r\nasdfasdfasdf\r\n\r\nreqbody 34 35 36 37 2.websocket 38 socket HTTP 39 1.輪詢： 40 客戶端向服務(wù)端發(fā)起一個請求 41 服務(wù)端沒消息 42 客戶端向服務(wù)端發(fā)起一個請求 43 服務(wù)端沒消息 44 客戶端向服務(wù)端發(fā)起一個請求 45 服務(wù)端終于有消息了，我都快累死了 46 客戶端你以為我不累啊 47 48 優(yōu)點:數(shù)據(jù)的實時性 49 缺點:前后端資源浪費嚴重，帶寬網(wǎng)絡(luò)資源 6kb/s 10bytes 50 51 52 2.長輪詢： 53 loop 1： 54 客戶端向服務(wù)端發(fā)起一個請求 55 服務(wù)端沒消息保存你的連接不斷開，并不返回等待消息，等有消息給你返回 56 客戶端等待… 57 服務(wù)器說我累了，我不想給你看著了,主動關(guān)閉連接 58 客戶端說怎么可以給我斷掉，于是再次發(fā)起請求 59 goto 1 60 61 優(yōu)點：釋放前端資源，資源回收，節(jié)省帶寬 62 缺點：不能嚴謹?shù)谋ＷC數(shù)據(jù)實時性，服務(wù)器資源占用比較嚴重 63 64 65 以上兩種方式的不足：服務(wù)端無法主動向客戶端發(fā)起消息 66 67 3.websocket： 68 即時通訊的福音： 69 客戶端向服務(wù)端發(fā)起握手信息 70 服務(wù)端校驗客戶端屬性并建立websocket 71 客戶端和服務(wù)端建立通訊連接 72 客戶端發(fā)發(fā)發(fā)發(fā)發(fā)發(fā) 73 服務(wù)端收收收收 74 服務(wù)端發(fā)發(fā)發(fā)發(fā)發(fā)發(fā) 75 76 等待： 77 當(dāng)前建立的websocket連接 實際上是被監(jiān)聽的 78 客戶端監(jiān)聽 79 服務(wù)端監(jiān)聽 80 81 客戶端 瀏覽器 82 服務(wù)器 websocket 83 基于Flask實現(xiàn)websocket 84 View Code

?

啟動這個腳本的命令如下。

$ websocketd --port=8080 node ./greeter.js

轉(zhuǎn)載于:https://www.cnblogs.com/Roc-Atlantis/p/9880316.html

總結(jié)

以上是生活随笔為你收集整理的websocket协议的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。