當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

websocket协议

發(fā)布時(shí)間：2025/3/15 编程问答 19 豆豆

生活随笔收集整理的這篇文章主要介紹了 websocket协议小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

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

一、初識(shí)websocket

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

答案很簡(jiǎn)單，因?yàn)?HTTP 協(xié)議有一個(gè)缺陷：通信只能由客戶(hù)端發(fā)起。

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

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

輪詢(xún)的效率低，非常浪費(fèi)資源（因?yàn)楸仨毑煌＿B接，或者 HTTP 連接始終打開(kāi)）。因此，工程師們一直在思考，有沒(méi)有更好的方法。WebSocket 就是這樣發(fā)明的。

二、websocket的特點(diǎn)

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

其他特點(diǎn)包括：

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

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

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

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

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

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

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

三、客戶(hù)端的簡(jiǎn)單示例

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

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

四、客戶(hù)端的 API

WebSocket 客戶(hù)端的 API 如下。

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

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

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

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

4.2 webSocket.readyState

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

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

下面是一個(gè)示例。

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

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

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

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

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

4.4 webSocket.onclose

實(shí)例對(duì)象的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

實(shí)例對(duì)象的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ù)可能是文本，也可能是二進(jìn)制數(shù)據(jù)（blob對(duì)象或Arraybuffer對(duì)象）。

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"); } }

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

// 收到的是 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()

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

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

ws.send('your message');

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

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

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

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

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

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

4.8 webSocket.onerror

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

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

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

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

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

μWebSockets
Socket.IO
WebSocket-Node

具體的用法請(qǐng)查看它們的文檔，這里不詳細(xì)介紹了。

六、WebSocketd

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

它的最大特點(diǎn)，就是后臺(tái)腳本不限語(yǔ)言，標(biāo)準(zhǔn)輸入（stdin）就是 WebSocket 的輸入，標(biāo)準(zhǔn)輸出（stdout）就是 WebSocket 的輸出。

舉例來(lái)說(shuō)，下面是一個(gè) Bash 腳本counter.sh。

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

命令行下運(yùn)行這個(gè)腳本，會(huì)輸出1、2、3，每個(gè)值之間間隔1秒。

$ bash ./counter.sh 1 2 3

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

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

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

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

上面是客戶(hù)端的 JavaScript 代碼，運(yùn)行之后會(huì)在控制臺(tái)依次輸出1、2、3。

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

$ websocketd --port=8080 ls

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

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

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

websocketd 的實(shí)質(zhì)，就是命令行的 WebSocket 代理。只要命令行可以執(zhí)行的程序，都可以通過(guò)它與瀏覽器進(jìn)行 WebSocket 通信。下面是一個(gè) Node 實(shí)現(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 用戶(hù)名 = 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 用戶(hù)名 = 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.輪詢(xún)： 40 客戶(hù)端向服務(wù)端發(fā)起一個(gè)請(qǐng)求 41 服務(wù)端沒(méi)消息 42 客戶(hù)端向服務(wù)端發(fā)起一個(gè)請(qǐng)求 43 服務(wù)端沒(méi)消息 44 客戶(hù)端向服務(wù)端發(fā)起一個(gè)請(qǐng)求 45 服務(wù)端終于有消息了，我都快累死了 46 客戶(hù)端你以為我不累啊 47 48 優(yōu)點(diǎn):數(shù)據(jù)的實(shí)時(shí)性 49 缺點(diǎn):前后端資源浪費(fèi)嚴(yán)重，帶寬網(wǎng)絡(luò)資源 6kb/s 10bytes 50 51 52 2.長(zhǎng)輪詢(xún)： 53 loop 1： 54 客戶(hù)端向服務(wù)端發(fā)起一個(gè)請(qǐng)求 55 服務(wù)端沒(méi)消息保存你的連接不斷開(kāi)，并不返回等待消息，等有消息給你返回 56 客戶(hù)端等待… 57 服務(wù)器說(shuō)我累了，我不想給你看著了,主動(dòng)關(guān)閉連接 58 客戶(hù)端說(shuō)怎么可以給我斷掉，于是再次發(fā)起請(qǐng)求 59 goto 1 60 61 優(yōu)點(diǎn)：釋放前端資源，資源回收，節(jié)省帶寬 62 缺點(diǎn)：不能?chē)?yán)謹(jǐn)?shù)谋ＷC數(shù)據(jù)實(shí)時(shí)性，服務(wù)器資源占用比較嚴(yán)重 63 64 65 以上兩種方式的不足：服務(wù)端無(wú)法主動(dòng)向客戶(hù)端發(fā)起消息 66 67 3.websocket： 68 即時(shí)通訊的福音： 69 客戶(hù)端向服務(wù)端發(fā)起握手信息 70 服務(wù)端校驗(yàn)客戶(hù)端屬性并建立websocket 71 客戶(hù)端和服務(wù)端建立通訊連接 72 客戶(hù)端發(fā)發(fā)發(fā)發(fā)發(fā)發(fā) 73 服務(wù)端收收收收 74 服務(wù)端發(fā)發(fā)發(fā)發(fā)發(fā)發(fā) 75 76 等待： 77 當(dāng)前建立的websocket連接實(shí)際上是被監(jiān)聽(tīng)的 78 客戶(hù)端監(jiān)聽(tīng) 79 服務(wù)端監(jiān)聽(tīng) 80 81 客戶(hù)端瀏覽器 82 服務(wù)器 websocket 83 基于Flask實(shí)現(xiàn)websocket 84 View Code

啟動(dòng)這個(gè)腳本的命令如下。

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

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

總結(jié)

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

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

上一篇：使用 jquery 创建数组
下一篇： WEB学习 -相对定位、绝对定位、固定定