《物聯(lián)網(wǎng)技術(shù)創(chuàng)新應(yīng)用》Websocket通訊協(xié)議的實(shí)踐

Websocket通訊協(xié)議的實(shí)踐InternetofThings目錄ContentsSuccessWords2相關(guān)知識(shí)Websocket基本概念任務(wù)實(shí)踐Web實(shí)時(shí)通信方案Websocket協(xié)議目錄ContentsSuccessWords3Web實(shí)時(shí)通信方案13Web實(shí)時(shí)通信方案輪詢最早的一種實(shí)現(xiàn)實(shí)時(shí)Web應(yīng)用的方案?？蛻舳艘砸欢ǖ臅r(shí)間間隔向服務(wù)端發(fā)出請(qǐng)求，以頻繁請(qǐng)求的方式來保持客戶端和服務(wù)器端的同步。在客戶端的頁面使用隱藏窗口向服務(wù)端發(fā)出長(zhǎng)連接請(qǐng)求。服務(wù)器端接到這個(gè)請(qǐng)求后作出回應(yīng)并不斷更新連接狀態(tài)以保證客戶端和服務(wù)器端的連接不過期。長(zhǎng)輪詢長(zhǎng)輪詢是對(duì)定時(shí)輪詢的改進(jìn)和提高，當(dāng)服務(wù)器端沒有數(shù)據(jù)更新的時(shí)候，連接會(huì)保持一段時(shí)間周期，直到數(shù)據(jù)或狀態(tài)改變或者時(shí)間過期。流5Web實(shí)時(shí)通信方案

這種同步方案的最大問題是，當(dāng)客戶端以固定頻率向服務(wù)器發(fā)起請(qǐng)求的時(shí)候，服務(wù)器端的數(shù)據(jù)可能并沒有更新，這樣會(huì)帶來很多無謂的網(wǎng)絡(luò)傳輸，所以這是一種非常低效的實(shí)時(shí)方案。輪詢6Web實(shí)時(shí)通信方案

這種方式從某種程度上減小了網(wǎng)絡(luò)帶寬和CPU利用率等問題。但是，如果服務(wù)端的數(shù)據(jù)變更非常頻繁的話，這種機(jī)制和定時(shí)輪詢比較起來沒有本質(zhì)上的性能提高。長(zhǎng)輪詢7Web實(shí)時(shí)通信方案

這種機(jī)制在用戶體驗(yàn)上有一點(diǎn)問題，需要針對(duì)不同的瀏覽器設(shè)計(jì)不同的方案來改進(jìn)用戶體驗(yàn)，同時(shí)這種機(jī)制在并發(fā)比較大的情況下，對(duì)服務(wù)器端的資源是一個(gè)極大的考驗(yàn)。流8Web實(shí)時(shí)通信方案Websocket與傳統(tǒng)通信方式的效率對(duì)比場(chǎng)景A:1,000個(gè)客戶端請(qǐng)求每秒:網(wǎng)絡(luò)流量(871×1,000)=871,000bytes=6,968,000bits每秒(6.6Mbps)場(chǎng)景B:10,000個(gè)客戶端請(qǐng)求每秒:網(wǎng)絡(luò)流量(871×10,000)=8,710,000bytes=69,680,000bits每秒(66Mbps)場(chǎng)景A:1,000個(gè)客戶端請(qǐng)求每秒:網(wǎng)絡(luò)流量(2×1,000)=2,000bytes=16,000bits每秒(0.015Mbps)場(chǎng)景B:10,000個(gè)客戶端請(qǐng)求每秒:網(wǎng)絡(luò)流量(2×10,000)=20,000bytes=160,000bits每秒(0.153Mbps)傳統(tǒng)HTTP通信方式使用

websocket通信方式假設(shè)HTTP頭是871字節(jié)（有些是2000字節(jié)）9Web實(shí)時(shí)通信方案

綜合這幾種方案，我們會(huì)發(fā)現(xiàn)，這些目前我們所使用的所謂的實(shí)時(shí)技術(shù)并不是真正的實(shí)時(shí)技術(shù)，它們只是在用Ajax方式來模擬實(shí)時(shí)的效果，在每次客戶端和服務(wù)器端交互的時(shí)候都是一次HTTP的請(qǐng)求和應(yīng)答的過程，而每一次的HTTP請(qǐng)求和應(yīng)答都帶有完整的HTTP頭信息，這就增加了每次傳輸?shù)臄?shù)據(jù)量，而且這些方案中客戶端和服務(wù)器端的編程實(shí)現(xiàn)都比較復(fù)雜。在實(shí)際的應(yīng)用中，為了模擬比較真實(shí)的實(shí)時(shí)效果，開發(fā)人員往往需要構(gòu)造兩個(gè)HTTP連接來模擬客戶端和服務(wù)器之間的雙向通訊，一個(gè)連接用來處理客戶端到服務(wù)器端的數(shù)據(jù)傳輸，一個(gè)連接用來處理服務(wù)器端到客戶端的數(shù)據(jù)傳輸，這不可避免地增加了編程實(shí)現(xiàn)的復(fù)雜度，也增加了服務(wù)器端的負(fù)載，制約了應(yīng)用系統(tǒng)的擴(kuò)展性?？偨Y(jié):目錄ContentsSuccessWords10Websocket基本概念11Websocket基本概念WebSocket是HTML5開始提供的一種在單個(gè)TCP連接上進(jìn)行全雙工通訊的協(xié)議。WebSocket通信協(xié)議于2011年被IETF定為標(biāo)準(zhǔn)RFC6455，WebSocketAPI被W3C定為標(biāo)準(zhǔn)。在WebSocketAPI中，瀏覽器和服務(wù)器只需要做一個(gè)握手的動(dòng)作，然后，瀏覽器和服務(wù)器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送。websocket需要類似tcp的客戶端和服務(wù)端通過握手連接，連接成功后才能相互通信。12WebSocket解決的問題HTML5WebSocket設(shè)計(jì)出來的目的就是要取代輪詢和Comet技術(shù)，使客戶端瀏覽器具備像C/S架構(gòu)下桌面系統(tǒng)的實(shí)時(shí)通訊能力。瀏覽器通過JavaScript向服務(wù)器發(fā)出建立WebSocket連接的請(qǐng)求，連接建立以后，客戶端和服務(wù)器端就可以通過TCP連接直接交換數(shù)據(jù)。WebSocket連接本質(zhì)上就是一個(gè)TCP連接，所以在數(shù)據(jù)傳輸?shù)姆€(wěn)定性和數(shù)據(jù)傳輸量的大小方面，和輪詢以及Comet技術(shù)比較，具有很大的性能優(yōu)勢(shì)。Websocket出現(xiàn)使得瀏覽器提供socket的支持成為可能，從而在瀏覽器和服務(wù)器之間建立一條基于tcp的雙向連接通道，web開發(fā)人員可以很方便的利用websocket構(gòu)建實(shí)時(shí)web應(yīng)用。13Websocket與http、tcp關(guān)系Websocket和http，都基于tcp，是可靠的協(xié)議；同屬于應(yīng)用層協(xié)議；Websocket在瀏覽器中的實(shí)現(xiàn)最終都是通過tcp系統(tǒng)接口進(jìn)行數(shù)據(jù)傳輸。Websocket在建立握手連接時(shí)，數(shù)據(jù)是通過http協(xié)議傳輸?shù)模虼擞玫搅薶ttp協(xié)議的一些簡(jiǎn)單字段，如“GET/chatHTTP/1.1”，但是在建立連接之后，真正的數(shù)據(jù)傳輸是不需要http協(xié)議參與的。目錄ContentsSuccessWords14Websocket協(xié)議15Websocket協(xié)議圖2.傳統(tǒng)http客戶端服務(wù)器交互圖1.websocket客戶端服務(wù)器交互16Websocket客戶端和服務(wù)端建立websocket連接的過程客戶端瀏覽器首先要向服務(wù)器發(fā)起一個(gè)HTTP請(qǐng)求，然后等待服務(wù)器響應(yīng)。這個(gè)請(qǐng)求和通常的HTTP請(qǐng)求不同，包含了一些附加頭信息，其中附加頭信息"Upgrade:WebSocket"表明這是一一個(gè)申請(qǐng)協(xié)議升級(jí)的HTTP請(qǐng)求。服務(wù)器解析這些附加的頭信息，然后返回握手響應(yīng)，告訴瀏覽器將后續(xù)的數(shù)據(jù);按照WebSocket指定的數(shù)據(jù)格式傳過來。此時(shí)，客戶端和服務(wù)器端的WebSocket連接就建立起來了?？蛻舳撕头?wù)器有任何需要傳遞的數(shù)據(jù)的時(shí)候，可以通過這個(gè)連接通道自由的傳遞信息。這個(gè)連接會(huì)持續(xù)存在，直到客戶端或者服務(wù)器端的某--方主動(dòng)的關(guān)閉連接。17Websocket協(xié)議Websocket類似socket的http長(zhǎng)連接通信方式，一旦連接建立，后續(xù)數(shù)據(jù)都以幀形式傳輸，在客戶端或服務(wù)器斷開連接前，不需要客戶端和服務(wù)器重新發(fā)起連接請(qǐng)求，在高并發(fā)及負(fù)載流量大的情況下，可節(jié)省網(wǎng)絡(luò)帶寬資源，且客戶端發(fā)送和接收信息是在同一個(gè)持久連接上發(fā)起，實(shí)時(shí)性優(yōu)勢(shì)明顯。傳統(tǒng)http每次請(qǐng)求-應(yīng)答都需要客戶端服務(wù)器建立連接模式。18Websocket協(xié)議客戶端到服務(wù)端握手協(xié)議GET/chatHTTP/1.1Host:Connection:UpgradeSec-WebSocket-Key2:129985Y31.P00Upgrade:WebSocketSec-WebSocket-Key1:4@146546xW%0l15Origin:[8-bytesecuritykey]GET/chatHTTP/1.1：打開階段握手，使用http協(xié)議。Upgrade：websocket，表示請(qǐng)求為特殊http請(qǐng)求，請(qǐng)求的目的是要將客戶端和服務(wù)端的通信協(xié)議從http上升為websocket；Sec-websocket-key、8-bytesecuritykey，客戶端向服務(wù)端提供的握手信息；19Websocket協(xié)議服務(wù)端到客戶端握手協(xié)議HTTP/1.1101WebSocketProtocolHandshakeUpgrade:WebSocketConnection:UpgradeWebSocket-Origin:WebSocket-Location:ws:///demo[16-bytehashresponse]16-bytehashresponse：服務(wù)端解析客戶端頭信息，生成16位安全密鑰返回給客戶端，以表明服務(wù)端獲取了客戶端的請(qǐng)求；一旦連接建立，后續(xù)就可以通過tcp通信（雙向傳輸數(shù)據(jù)）。20Websocket協(xié)議握手協(xié)議21Websocket協(xié)議http請(qǐng)求頭請(qǐng)求頭部分字段Accept:告訴服務(wù)器客戶機(jī)支持的數(shù)據(jù)類型。Accetp-charset:客戶機(jī)采用的編碼格式。Accept-encoding:客戶機(jī)支持的數(shù)據(jù)壓縮格式。Accept-language:客戶機(jī)的語言環(huán)境。Host:客戶機(jī)要訪問的主機(jī)名。If-modified-since:客戶機(jī)告訴服務(wù)器資源緩存時(shí)間。Referer:它是從哪個(gè)資源來訪問服務(wù)器的（防盜鏈）Cookie:客戶機(jī)向服務(wù)器帶數(shù)據(jù)。User-Agent：告訴服務(wù)器客戶機(jī)的軟件環(huán)境。Connection:處理完這次請(qǐng)求后是否斷開連接還是繼續(xù)保持連接。Date：當(dāng)前時(shí)間值。應(yīng)答頭部分Etag:緩存相關(guān)的字段。Server:服務(wù)器告訴瀏覽器服務(wù)器的類型。22Websocket協(xié)議websocket請(qǐng)求頭目錄ContentsSuccessWords23任務(wù)實(shí)踐——搭建簡(jiǎn)易聊天室24Websocket協(xié)議1.安裝Websocket服務(wù)端2.編寫客戶端代碼25步驟一：下載并安裝相關(guān)軟件任務(wù)實(shí)踐WebSocket協(xié)議的URLws://開頭,普通的WebSocket協(xié)議wss://開頭,安全的WebSocket協(xié)議服務(wù)器網(wǎng)址就是URL:ws://:80/path其余為websocket注冊(cè)消息的處理函數(shù)，共支持四個(gè)消息onopen,onmessageoncloseonerror26Websocket協(xié)議@OnError當(dāng)websocket發(fā)送錯(cuò)誤時(shí)調(diào)用此方法，通過參數(shù)可以獲取錯(cuò)誤的更多細(xì)節(jié)@OnMessage用戶接受傳入的websocket信息，信息可以是文本格式，也可以是二進(jìn)制格式。@OnClose連接被終止時(shí)調(diào)用，通過參數(shù)可以獲取用戶關(guān)閉連接的原因，如正常關(guān)閉網(wǎng)絡(luò)超時(shí)等@OnOpen在訪問端點(diǎn)，新的連接建立時(shí)調(diào)用，參數(shù)提供了連接的另一端的更多細(xì)節(jié)27步驟一：下載并安裝相關(guān)軟件任務(wù)實(shí)踐1.Windows開始菜單，右鍵運(yùn)行2.執(zhí)行pipinstallwebsockets28步驟三：編寫客戶端代碼（1）任務(wù)實(shí)踐1.新建客戶端Python腳本server.py2.引入Websocket模塊：importwebsockets3.引入asyncio模塊：importasyncioasyncio是Python3.4版本引入的標(biāo)準(zhǔn)庫，直接內(nèi)置了對(duì)異步IO的支持。asyncio的編程模型就是一個(gè)消息循環(huán)。我們從asyncio模塊中直接獲取一個(gè)EventLoop的引用，然后把需要執(zhí)行的協(xié)程扔到EventLoop中執(zhí)行，就實(shí)現(xiàn)了異步IO。29步驟三：編寫客戶端代碼（2）任務(wù)實(shí)踐4.注冊(cè)一個(gè)websockets服務(wù)器start_server=websockets.serve(main_logic,'localhost',1234)5.創(chuàng)建一個(gè)事件loop6.將協(xié)程加入到事件循環(huán)looploop.run_until_complete(start_server)loop=asyncio.get_event_loop()。websockets.serve方法有三個(gè)參數(shù)，main_logic是websocket連接后用于處理業(yè)務(wù)的方法，main_logic在第八步介紹，host是Websocket服務(wù)器地址，port是服務(wù)器端口30步驟三：編寫客戶端代碼（3）任務(wù)實(shí)踐7.啟動(dòng)服務(wù)端保持一直監(jiān)聽狀態(tài)loop.run_forever()8.websocket連接后用于處理業(yè)務(wù)的方法main_logicasyncdefmain_logic(websocket,path):whileTrue:name=awaitwebsocket.recv()print(f"Anewclient:{name}")greeting="Welcome"+nameawaitwebsocket.send(greeting)print(f"send'{greeting}'to'{name}'")main_logic是一個(gè)異步IO的方法websocket.send(greeting)是websocket發(fā)送數(shù)據(jù)的方法websocket.recv()是websocket從客戶端讀取數(shù)據(jù)的方法31步驟三：編寫客戶端代碼（4）任務(wù)實(shí)踐10.代碼概覽importwebsocketsimportasyncioasyncdefmain_logic(websocket,path):whileTrue:name=awaitwebsocket.recv()print(f"Anewclient:{name}")greeting="Welcome"+nameawaitwebsocket.send(greeting)print(f"send'{greeting}'to'{name}'")start_server=websockets.serve(main_logic,'localhost',1234)loop=asyncio.get_event_loop()loop.run_until_complete(start_server)loop.run_forever()11.執(zhí)行代碼pythonserver.py32步驟三：編寫客戶端代碼（5）任務(wù)實(shí)踐1.新建客戶端Python腳本client.py：2.與服務(wù)器建立連接，連接回調(diào)，信息到達(dá)等處理方法參照server.py3.發(fā)送Websocket消息方法whileTrue:context=input("pleaseenteryourcontext:")awaitwebsocket.send(context)whileTrue:循環(huán)等待用戶輸入信息.input("pleaseenteryourcontext:"):獲取用戶輸入的信息awaitwebsocket.send(context):將用戶輸入的信息異步發(fā)送出去參數(shù)：實(shí)現(xiàn)Python客戶端33步驟三：編寫客戶端代碼（6）任務(wù)實(shí)踐importwebsocketsimportasyncioasyncdefmain_logic():asyncwithwebsockets.connect('ws://localhost:1234')aswebsocket:whileTrue:context=input("pleaseenteryourcontext:")awaitwebsocket.send(context)print(f"sendserver:{context}")greeting=awaitwebsocket.recv()print(f"receivefromserver:{greeting}")asyncio.get_event_loop().run_until_complete(main_logic())4.代碼概覽5.執(zhí)行代碼pythonclient.py34步驟三：編寫客戶端代碼（7）任務(wù)實(shí)踐1.首先運(yùn)行server.py，啟動(dòng)后客戶端會(huì)一直運(yùn)行等待接收數(shù)據(jù)2.然后運(yùn)行client.py，啟動(dòng)后發(fā)布者會(huì)發(fā)送信息3.查看運(yùn)行效果：運(yùn)行后客戶端會(huì)接收到數(shù)據(jù)并打印出來。35步驟三：編寫客戶端代碼（8）任務(wù)實(shí)踐varws=newWebSocket("ws://localhost:9998/echo");1.新建html版客戶端index.html：實(shí)現(xiàn)Html客戶端ws是與服務(wù)器的連接結(jié)果，ws.readyState屬性返回實(shí)例對(duì)象的當(dāng)前狀態(tài)，共有四種。CONNECTING：值為0，表示正在連接。OPEN：值為1，表示連接成功，可以通信了。CLOSING：值為2，表示連接正在關(guān)閉。CLOSED：值為3，表示連接已經(jīng)關(guān)閉，或者打開連接失敗。36步驟三：編寫客戶端代碼（9）任務(wù)實(shí)踐ws.onopen=function(){//WebSocket已連接上，使用send()方法發(fā)送數(shù)據(jù)ws.send("發(fā)送數(shù)據(jù)");};3.連接到服務(wù)端后的處理varws=newWebSocket("ws://localhost:1234");2.Javascript腳本，連接websocket服務(wù)器：37步驟三：編寫客戶端代碼（9）任務(wù)實(shí)踐ws.onclose=function(){//關(guān)閉websocketalert("連接已關(guān)閉...");};4.新建html版客戶端代碼：ws.onmessage=function(evt){varreceived_msg=evt.data;alert("數(shù)據(jù)已接收...");};5.收到聊天信息后的處理ws.onerror=function(evt){alert("+evt.data");};6.發(fā)生錯(cuò)誤時(shí)的處理38步驟三：編寫客戶端代碼（10）任務(wù)實(shí)踐varsocket;if("WebSocket"inwindow){socket=newWe