Web客戶端與伺服器之間基於Ajax（http）的常用通訊方式，分為短連線與長輪詢。
短連接：客戶端和伺服器每進行一次HTTP操作，就建立一次連接，任務結束就會中斷連線。
長輪詢：客戶端像傳統輪詢一樣從伺服器請求資料。然而，如果伺服器沒有可以立即傳回給客戶端的數據，則不會立刻傳回一個空結果，而是保持這個請求等待資料到來（或恰當的逾時：小於ajax的逾時時間），之後將資料作為結果傳回客戶端。
長輪詢機制如下圖所示：
二、Websocket基本概念WebSocket 是HTML5 開始提供的一種在單一TCP 連線上進行全雙工通訊的協定。
WebSocket 使得客戶端和伺服器之間的資料交換變得更加簡單，允許服務端主動向客戶端推送資料。在WebSocket API 中，瀏覽器和伺服器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，並進行雙向資料傳輸。
在WebSocket API 中，瀏覽器和伺服器只需要做一個握手的動作，然後，瀏覽器和伺服器之間就形成了一條快速通道。兩者之間就直接可以資料互相傳送。
現在，很多網站為了實現推播技術，所使用的技術都是Ajax 輪詢。輪詢是在特定的時間間隔（如每1秒），由瀏覽器對伺服器發出HTTP請求，然後由伺服器傳回最新的資料給客戶端的瀏覽器。這種傳統的模式帶來明顯的缺點，即瀏覽器需要不斷的向伺服器發出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的資料可能只是很小的一部分，顯然這樣會浪費很多的頻寬等資源。
HTML5 定義的WebSocket 協議，能更好的節省伺服器資源和頻寬，並且能夠更即時地進行通訊。
瀏覽器透過JavaScript 向伺服器發出建立WebSocket 連線的請求，連線建立以後，客戶端和伺服器端就可以透過TCP 連線直接交換資料。
當你取得Web Socket 連線後，你可以透過send() 方法來向伺服器發送數據，並透過onmessage 事件來接收伺服器傳回的資料。
三、Websocket 握手原理：Websocket的握手原理大致可分為以下步驟：
程式碼實作：
import socket, base64, hashlib# 建立socket連線sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)# 綁定端位址與口號sock.bind(('127.0.0.1', 9527) 監聽器. (5)# 取得客戶端socket物件conn, address = sock.accept()# 取得客戶端的【握手】資訊data = conn.recv(1024)print(data)def get_headers(data): 從請求頭中取出Sec-WebSocket-Key對應的值並回傳header_dict = {} header_str = data.decode(utf8) for i in header_str.split(/r/n): if str(i).startswith(Sec-WebSocket-Key): return i.split(:)[1].strip()# 得到Sec-WebSocket-Key對應的值ws_key = get_headers(data)# 魔法字串magic string為：258EAFA5-E914-47DA-95CA-C5AB0DC85B11magic_string = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11'# 拼接socket_str = ws_key + magic_string# sha1加密socket_str_sha1 = hashlib.sha1(socket_str.encode(utf8))。 base64.b64encode(socket_str_sha1)# 拼接回應頭response_tpl = HTTP/1.1 101 Switching Protocols/r/n / Upgrade:websocket/r/n / Connection: Upgrade/r/n / Sec-WebSocket-Accept: WebS n / WebSocket-Location: ws://127.0.0.1:9527/r/n/r/n % (socket_str_base64.decode(utf8))# 伺服器傳送回應頭到客戶端conn.send(response_tpl.encode(utf8))# 客戶端服務端建立長連線迴圈接收傳送資料while True: msg = conn.recv(8096) print(msg) <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Title</title></head><body></body><script type=text/javascript> ws = new WebSocket(ws://127.0.0.1:9527); ws.onmessage = function (ev) { console.log(ev)//用於接收資料}</script></html>附帶客戶端發起HTTP請求的請求頭：
b'GET /ws/ HTTP/1.1Host: 127.0.0.1:9527Connection: UpgradePragma: no-cacheCache-Control: no-cacheUser-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.3... : http://localhost:63342Sec-WebSocket-Version: 13Accept-Encoding: gzip, deflate, brAccept-Language: zh-CN,zh;q=0.9Sec-WebSocket-Key: kJXuOKsrl3AR1KeFngRock-SecsionWebS deflate; client_max_window_bits'四、Websocket的加解密方式：
解密方式：
# b'/x81/x87/x0e/xc3/xf3/xcd;/xf6/xc6/xf8;/xf6/xc6'==========5555555hashstr = b'/x81/x87/x0e/xc3 /xf3/xcd;/xf6/xc6/xf8;/xf6/xc6'#將第二個位元組也就是/x87 第9-16位元進行與127進行位元運算payload = hashstr[1] & 127# 當位元運算結果等於127時,則第3-10個位元組為資料長度#第11-14位元組為mask 解密所需字串# 則資料為第15位元組至結尾if payload == 127: extend_payload_len = hashstr[2:10] mask = hashstr[10:14] decoded = hashstr[14:]# 當位元運算結果等於126時,則第3-4個位元組為資料長度# 第5-8位元組為mask解密所需字串# 則資料為第9位元組至結尾if payload == 126: extend_payload_len = hashstr[2:4] mask = hashstr[4:8] decoded = hashstr[8:]# 當位元運算結果小於等於125時,則這個數字就是資料的長度# 第3-6位元組為mask 解密所需字串# 則資料為第7位元組至結尾if payload <= 125: extend_payload_len = None mask = hashstr[2:6] decoded = hashstr[6:]str_byte = bytearray()for i in range(len(decoded)): byte = decoded[i] ^ mask[i % 4] str_byte.append(byte)print(str_byte.decode(utf8))
加密方式：
import structmsg_bytes = 5555555.encode(utf8)token = b/x81length = len(msg_bytes)if length < 126: token += struct.pack(B, length)elif length == 126: token += struct. , 126, length)else: token += struct.pack(!BQ, 127, length)msg = token + msg_bytesprint(msg)四、基於flask框架、Websocket協定實現的客戶端和服務端連結通訊範例：
pip3 install gevent-websocket
from flask import Flask, requestfrom geventwebsocket.websocket import WebSocketfrom gevent.pywsgi import WSGIServerfrom geventwebsocket.handler import WebSocketHandlerapp = Flask(__name__)@app.route(/////ocketHandler request.environ.get(wsgi.websocket) # type:WebSocket print(訪問成功) while True: msg = user_socket.receive() # 接受訊息print(msg) user_socket.send(msg) # 發送訊息if __name__ == ' __main__': # 指定位址、連接埠號碼開啟Websocket服務http_serv = WSGIServer((127.0.0.1, 8001), app, handler_class=WebSocketHandler) # 啟動Websocket服務http_serv.serve_forever()
html檔案：
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Title</title> <link href=https://cdnjs.cloudflare.com/ajax/libs/twitter- bootstrap/3.3.7/css/bootstrap.css rel=stylesheet></head><body><botton class=btn btn-default onclick=createsocket()>點選建立連結</botton><br><p>請您輸入訊息：<input type=text placeholder=輸入訊息id=msg></p><buttom class=btn btn-success onclick =send_msg()>傳送訊息</buttom><script> var ws = null; function createsocket() { ws = new WebSocket(ws://127.0.0.1:8001/ws); ws.onmessage = function (data) { console.log(從服務端收到的訊息=,data.data); } } function send_msg() { var to_msg = document.getElementById(msg).value; ws.send(to_msg) }</script></body></html> 客戶端.png
伺服器端.png
這樣我們就簡單實作了透過Websocket協定的客戶端服務端通訊。並且我們可以創建多個連結同時對伺服器端通訊。
五、基於Websocket實現即時通訊(IM)：伺服器代碼：
from flask import Flask, requestfrom geventwebsocket.websocket import WebSocketfrom gevent.pywsgi import WSGIServerfrom geventwebsocket.handler import WebSocketHandlerfrom geventwebsocket.exceptions import WebSockcykat( {}@app.route(/ws/<username>)def websocket(username): # 得到使用者的連結user_socket = request.environ.get(wsgi.websocket) # type:WebSocket user_socket_dict[username] = user_socket print(username+連結成功！ socket in user_socket_dict.values(): # type:WebSocket if user_socket != socket:# 自己發訊息伺服器就不要再給自己回訊息了try: socket.send(json.dumps({sender: username, msg: msgusername, msg}} )) except: continueif __name__ == '__main__': #指定位址、連接埠號碼開啟Websocket服務http_serv = WSGIServer((127.0.0.1, 8001), app, handler_class=WebSocketHandler) # 啟動Websocket服務http_serv.serve_forever()html代碼：
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Title</title> <link href=https://cdnjs.cloudflare.com/ajax/libs/twitter- bootstrap/3.3.7/css/bootstrap.css rel=stylesheet></head><body><p>請輸入你的暱稱：<input type=text id=username></p><botton class=btn btn-default onclick=createsocket()>點選建立連結</botton><br><p>請您輸入訊息：<input type=text id=msg>< /p><buttom class=btn btn-success onclick=send_msg()>傳送訊息</buttom><br><br><br><div style=border: 2px solid; width: 500px;height: 800px; id=text_div></div><script> var ws = null; var username = null; function createsocket() { username = document.getElementById(username).valueue; new WebSocket(ws://127.0.0.1:8001/ws + / + username); ws.onmessage = function (data) { var text_div = document.getElementById(text_div); var obj_data = JSON.parse(data.data); var add_msg = <p> + obj_data.sender + : + obj_data.msg + </p>; text_div.innerHTML += add_msg; } } function send_msg() { var to_msg = document.getElementById(msg).value; var text_div = document.getElementByIdtext_divg).value; var text_div = document.getElementBy style='text-align: right'> + to_msg + : + username + </p>; text_div.innerHTML += add_msg; ws.send(to_msg); }</script></body></html> 客戶端01.png
客戶端02.png
伺服器端.png
程式碼是示範程式碼，有bug有bug，目前主要用於學習，不可吹毛求疵。有興趣的可以進一步優化！ ！ ！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。