碼上歡樂
相關內容    簡體    繁體

Python實現WebSocket

本文轉載自   查看原文   2021-11-06 17:52   6146    快速入門前端

Python實現WebSocket

一、WebSocket建立連接

1. 握手環節

  • 目的:驗證服務端是否支持Websocket協議

  • 流程：

  1. 客戶端瀏覽器第一次訪問服務器的時候，瀏覽器內部會自動生成一個隨機字符串，將該隨機字符串發送給服務端（基於http）協議）瀏覽器也保留隨機生成的字符串（在請求頭里面）
  2. 服務端接收隨機字符串之后，會將字符串與magic string(全球統一)做字符串拼接，然后利用加密算法對拼接好的字符串進行加密處理（sha1/base64）,此時客戶端也對產生的隨機字符串做上述的拼接和加密操作
  3. 接着服務器將產生好的隨機字符串發送給客戶端的瀏覽器（響應頭里面），客戶端瀏覽器會對比服務器發送的隨機字符串與瀏覽器本地操作的隨機字符串進行對比，如果一致說明該服務端支持websocket，如果不一致服務端則不支持。

請求協議

GET / HTTP/1.1\r\n  # 請求首行，握手階段還是使用http協議
Host: 127.0.0.1:8080\r\n # 請求頭
Connection: Upgrade\r\n  # 表示要升級協議
Pragma: no-cache\r\n
Cache-Control: no-cache\r\n
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.72 Safari/537.36\r\n
Upgrade: websocket\r\n  # 要升級協議到websocket協議
Origin: http://localhost:63342\r\n
Sec-WebSocket-Version: 13\r\n  # 表示websocket的版本。如果服務端不支持該版本，需要返回一個Sec-WebSocket-Versionheader，里面包含服務端支持的版本號
Accept-Encoding: gzip, deflate, br\r\n
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8\r\n
Sec-WebSocket-Key: 07EWNDBSpegw1vfsIBJtkg==\r\n # 對應服務端響應頭的Sec-WebSocket-Accept，由於沒有同源限制，websocket客戶端可任意連接支持websocket的服務。這個就相當於一個鑰匙一把鎖，避免多余的，無意義的連接
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits\r\n\r\n
  • Sec-WebSocket-Key 是一個 Base64 encode 的值，這個是瀏覽器隨機生成的，發送給服務器
  • 服務端從請求(HTTP的請求頭)信息中提取 Sec-WebSocket-Key，利用magic_string 和 Sec-WebSocket-Key 先進行拼接，然后采用hmac1加密，再進行base64加密
  • 將加密結果響應給客戶端，服務器會返回下列東西，表示已經接受到請求， 成功建立 WebSocket

響應協議

HTTP/1.1 101 Switching Protocols\r\n  # 響應首行，還是使用http協議
Upgrade:websocket\r\n                 # 表示要升級到websocket協議
Connection: Upgrade\r\n               # 表示要升級協議
Sec-WebSocket-Accept: 07EWNDBSpegw1vfsIBJtkg==\r\n # 根據客戶端請求首部的Sec-WebSocket-Key計算出來。
WebSocket-Location: ws://127.0.0.1:8000\r\n\r\n

2. 收發數據（send/onmessage）

驗證成功之后就可以數據交互了 但是交互的數據是加密的 需要解密處理

  • 數據基於網絡傳輸都是二進制格式，單位換算 8bit = 1bytes
  • 步驟一：讀取第二個字節的后七位稱之為payload，根據payload大小決定不同的處理方式：
  1. =127 再讀取8個字節 作為數據報
  2. =126 再讀取2個字節 作為數據報
  3. <=125 不再往后讀了
  • 步驟二：
# 步驟1之后 會對剩下的數據再讀取4個字節(masking-key)		
# 之后依據masking-key算出真實數據
var DECODED = "";
for(var i = 0; i < ENCODED.length; i++) {
       DECODED[i] = ENCODED[i] ^ MASK[i % 4];
  }

二、Python實現

Python后端：

from django.test import TestCase

# Create your tests here.
import socket
import base64
import hashlib

# 正常的socket代碼
sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
# 防止linux/mac報錯
sock.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
sock.bind(('127.0.0.1', 8080))
sock.listen(5)

conn, address = sock.accept()
data = conn.recv(1024)  # 獲取客戶端發送的消息


def get_headers(data):
    """
    將請求頭格式化成字典
    :param data:
    :return:
    """
    
    """
    請求頭格式：
    GET / HTTP/1.1\r\n  # 請求首行，握手階段還是使用http協議
    Host: 127.0.0.1:8080\r\n # 請求頭
    Connection: Upgrade\r\n  # 表示要升級協議
    Pragma: no-cache\r\n
    Cache-Control: no-cache\r\n
    User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.72 Safari/537.36\r\n
    Upgrade: websocket\r\n  # 要升級協議到websocket協議
    Origin: http://localhost:63342\r\n
    Sec-WebSocket-Version: 13\r\n  # 表示websocket的版本。如果服務端不支持該版本，需要返回一個Sec-WebSocket-Versionheader，里面包含服務端支持的版本號
    Accept-Encoding: gzip, deflate, br\r\n
    Accept-Language: zh-CN,zh;q=0.9,en;q=0.8\r\n
    Sec-WebSocket-Key: 07EWNDBSpegw1vfsIBJtkg==\r\n # 對應服務端響應頭的Sec-WebSocket-Accept，由於沒有同源限制，websocket客戶端可任意連接支持websocket的服務。這個就相當於一個鑰匙一把鎖，避免多余的，無意義的連接
    Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits\r\n\r\n
    """
    header_dict = {}
    data = str(data, encoding='utf-8')

    header, body = data.split('\r\n\r\n', 1) # 因為請求頭信息結尾都是\r\n,並且最后末尾部分是\r\n\r\n；
    header_list = header.split('\r\n')
    for i in range(0, len(header_list)):
        if i == 0:
            if len(header_list[i].split(' ')) == 3:
                header_dict['method'], header_dict['url'], header_dict['protocol'] = header_list[i].split(' ')
        else:
            k, v = header_list[i].split(':', 1)
            header_dict[k] = v.strip()
    return header_dict


# 想將http協議的數據處理成字典的形式方便后續取值
header_dict = get_headers(data)  # 將一大堆請求頭轉換成字典數據  類似於wsgiref模塊
client_random_string = header_dict['Sec-WebSocket-Key']  # 獲取瀏覽器發送過來的隨機字符串

# magic string拼接
magic_string = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11'  # 全球共用的隨機字符串 一個都不能寫錯
# 確認握手Sec-WebSocket-Key固定格式：headers頭部的Sec-WebSocket-Key+'258EAFA5-E914-47DA-95CA-C5AB0DC85B11'
# 確認握手的秘鑰值為 傳入的秘鑰+magic_string，使用sha1算法加密，然后base64轉碼
value = client_random_string + magic_string  # 拼接

# 算法加密 對請求頭中的sec-websocket-key進行加密
ac = base64.b64encode(hashlib.sha1(value.encode('utf-8')).digest())  # 加密處理

# 將處理好的結果再發送給客戶端校驗
tpl = "HTTP/1.1 101 Switching Protocols\r\n" \
      "Upgrade:websocket\r\n" \
      "Connection: Upgrade\r\n" \
      "Sec-WebSocket-Accept: %s\r\n" \
      "WebSocket-Location: ws://127.0.0.1:8080\r\n\r\n"
response_str = tpl % ac.decode('utf-8')  # 處理到響應頭中

# 將隨機字符串給瀏覽器返回回去
print(f"建立連接,加密驗證key{ac}")
conn.send(bytes(response_str, encoding='utf-8'))


def get_data(info):
    """
    前后端進行通信,對前端發生消息進行解密
    對返回消息進行解碼比較復雜，詳見數據幀格式解析
    """
    payload_len = info[1] & 127
    if payload_len == 126:
        extend_payload_len = info[2:4]
        mask = info[4:8]
        decoded = info[8:]
    elif payload_len == 127:
        extend_payload_len = info[2:10]
        mask = info[10:14]
        decoded = info[14:]
    else:
        extend_payload_len = None
        mask = info[2:6]
        decoded = info[6:]
    bytes_list = bytearray() # 使用字節將數據全部收集，再去字符串編碼，這樣不會導致中文亂碼
    for i in range(len(decoded)):
        chunk = decoded[i] ^ mask[i % 4]  # 異或運算
        bytes_list.append(chunk)

    body = str(bytes_list, encoding='utf-8')
    return body


# 基於websocket通信
while True:
    # ws.send("info")
    data = conn.recv(1024)  # 數據是加密處理的
    # print(data)
    # 對data進行解密操作
    value = get_data(data)
    print(value)

img

前端:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<script>
    var ws = new WebSocket('ws://127.0.0.1:8080/')
    // 上面這句代碼干了很多事
    // 1 產生隨機字符串並發送給服務端  Sec-WebSocket-Key: EMy5N4dwjl/jHoU0eYDDGQ==
    // 2 服務端發送處理好的內容過來之后 自動校驗
</script>
</body>
</html>

image-20210821193811586

image-20210821193937724

前端后端發送消息

image-20210821194131162

image-20210821194208884

image-20210821194241728

三、總結

客戶端第一次訪問服務端，客戶端會隨機生成一個字符串發送給服務端Sec-WebSocket-Key，瀏覽器也會保存一份，然后服務端解析獲取隨機字符串與magic string進行拼接，然后通過base64和sha1進行加密，返回給瀏覽器，瀏覽器保留的字符串也會經過上面操作之后與后端生成的加密字符串進行比較，如果相同則說明服務端支持websocket，如果不一致則不支持（握手環節）。驗證成功之后，就可以數據交互，交互的數據是加密的，所以需要解密，解密：首先讀取第二個字節后七位，后七位也稱之為payload,根據payload的大小進行不同的操作，如果 =127 再讀取后面8個字節作為數據報，如果=126在讀取后面2個字節作為數據報，如果<125 則不再往后讀取數據，最后會對剩下的數據再次讀取4個字節之后，依據masking-key 算出(異或)真實的數據結果。


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Python 實現 WebSocket 通信 websocket python實現原理 python 實現 websocket python實現websocket python簡單實現websocket python 實現websocket python實現建立websocket通信 flask python geventwebsocket實現websocket python實現的websocket總結 —— wspy Python3+WebSockets實現WebSocket通信
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM