html5中http和Websocket的輪詢(xún)與原理詳解

猿友 2021-07-17 15:54:22 瀏覽數(shù) (5773)

反饋

相信不少的人不知道怎么實(shí)現(xiàn)我們的網(wǎng)頁(yè)項(xiàng)目發(fā)布在網(wǎng)上供大家瀏覽和使用，那么接下來(lái)我們就來(lái)說(shuō)說(shuō)：“html5中http和Websocket的輪詢(xún)與原理詳解！”這方面的內(nèi)容。

一、HTTP的輪詢(xún)

Web客戶(hù)端與服務(wù)器之間基于A(yíng)jax（http）的常用通信方式，分為 短連接 與 長(zhǎng)輪詢(xún) 。

短連接：客戶(hù)端和服務(wù)器每進(jìn)行一次HTTP操作，就建立一次連接，任務(wù)結(jié)束就中斷連接。

長(zhǎng)輪詢(xún)：客戶(hù)端像傳統(tǒng)輪詢(xún)一樣從服務(wù)器請(qǐng)求數(shù)據(jù)。然而，如果服務(wù)器沒(méi)有可以立即返回給客戶(hù)端的數(shù)據(jù)，則不會(huì)立刻返回一個(gè)空結(jié)果，而是保持這個(gè)請(qǐng)求等待數(shù)據(jù)到來(lái)（或者恰當(dāng)?shù)某瑫r(shí)：小于ajax的超時(shí)時(shí)間），之后將數(shù)據(jù)作為結(jié)果返回給客戶(hù)端。

長(zhǎng)輪詢(xún)機(jī)制如下圖所示：

二、Websocket基本概念

WebSocket 是 HTML5 開(kāi)始提供的一種在單個(gè) TCP 連接上進(jìn)行全雙工通訊的協(xié)議。

WebSocket 使得客戶(hù)端和服務(wù)器之間的數(shù)據(jù)交換變得更加簡(jiǎn)單，允許服務(wù)端主動(dòng)向客戶(hù)端推送數(shù)據(jù)。在 WebSocket API 中，瀏覽器和服務(wù)器只需要完成一次握手，兩者之間就直接可以創(chuàng)建持久性的連接，并進(jìn)行雙向數(shù)據(jù)傳輸。

在 WebSocket API 中，瀏覽器和服務(wù)器只需要做一個(gè)握手的動(dòng)作，然后，瀏覽器和服務(wù)器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送。

現(xiàn)在，很多網(wǎng)站為了實(shí)現(xiàn)推送技術(shù)，所用的技術(shù)都是 Ajax 輪詢(xún)。輪詢(xún)是在特定的的時(shí)間間隔（如每1秒），由瀏覽器對(duì)服務(wù)器發(fā)出HTTP請(qǐng)求，然后由服務(wù)器返回最新的數(shù)據(jù)給客戶(hù)端的瀏覽器。這種傳統(tǒng)的模式帶來(lái)很明顯的缺點(diǎn)，即瀏覽器需要不斷的向服務(wù)器發(fā)出請(qǐng)求，然而HTTP請(qǐng)求可能包含較長(zhǎng)的頭部，其中真正有效的數(shù)據(jù)可能只是很小的一部分，顯然這樣會(huì)浪費(fèi)很多的帶寬等資源。

HTML5 定義的 WebSocket 協(xié)議，能更好的節(jié)省服務(wù)器資源和帶寬，并且能夠更實(shí)時(shí)地進(jìn)行通訊。

瀏覽器通過(guò) JavaScript 向服務(wù)器發(fā)出建立 WebSocket 連接的請(qǐng)求，連接建立以后，客戶(hù)端和服務(wù)器端就可以通過(guò) TCP 連接直接交換數(shù)據(jù)。

當(dāng)你獲取 Web Socket 連接后，你可以通過(guò) ?send()? 方法來(lái)向服務(wù)器發(fā)送數(shù)據(jù)，并通過(guò) onmessage 事件來(lái)接收服務(wù)器返回的數(shù)據(jù)。

三、Websocket 握手原理：

Websocket的握手原理大致可分為以下步驟：

第一步：客戶(hù)端發(fā)起HTTP請(qǐng)求連接
第二步：服務(wù)端從請(qǐng)求頭中取出Sec-WebSocket-Key的值
第三步：給Sec-WebSocket-Key值 拼接一個(gè)magic_string 的到一個(gè)新的value
第四步：給新的value先做 sha1加密 再做 base64加密
第五步：拼接一個(gè)響應(yīng)頭
第六步：服務(wù)器將拼好的響應(yīng)頭發(fā)送給客戶(hù)端
第七步：客戶(hù)端解密Sec-WebSocket-Accept得到Sec-WebSocket-Key判斷是否握手成功

代碼實(shí)現(xiàn)：

import socket, base64, hashlib

# 創(chuàng)建socket連接
sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
# 綁定端地址和口號(hào)
sock.bind(('127.0.0.1', 9527))
# 監(jiān)聽(tīng)
sock.listen(5)
# 獲取客戶(hù)端socket對(duì)象
conn, address = sock.accept()
# 獲取客戶(hù)端的【握手】信息
data = conn.recv(1024)
print(data)

def get_headers(data):
    """從請(qǐng)求頭中取出Sec-WebSocket-Key對(duì)應(yīng)的值并返回"""
    header_dict = {}
    header_str = data.decode("utf8")
    for i in header_str.split("
"):
        if str(i).startswith("Sec-WebSocket-Key"):
            return i.split(":")[1].strip()

# 得到Sec-WebSocket-Key對(duì)應(yīng)的值
ws_key = get_headers(data)

# 魔法字符串magic string為：258EAFA5-E914-47DA-95CA-C5AB0DC85B11
magic_string = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11'
# 拼接
socket_str = ws_key + magic_string
# sha1加密
socket_str_sha1 = hashlib.sha1(socket_str.encode("utf8")).digest()
# base64加密
socket_str_base64 = base64.b64encode(socket_str_sha1)
# 拼接響應(yīng)頭
response_tpl = "HTTP/1.1 101 Switching Protocols
" 
               "Upgrade:websocket
" 
               "Connection: Upgrade
" 
               "Sec-WebSocket-Accept: %s
" 
               "WebSocket-Location: ws://127.0.0.1:9527

" % (socket_str_base64.decode("utf8"))
# 服務(wù)器發(fā)送響應(yīng)頭到客戶(hù)端
conn.send(response_tpl.encode("utf8"))
# 客戶(hù)端服務(wù)端建立長(zhǎng)連接循環(huán)接收發(fā)送數(shù)據(jù)
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)//用于接收數(shù)據(jù)
    }
</script>
</html>

附帶客戶(hù)端發(fā)起HTTP請(qǐng)求的請(qǐng)求頭：

b'GET /ws/ HTTP/1.1
Host: 127.0.0.1:9527
Connection: Upgrade
Pragma: no-cache
Cache-Control: no-cache
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.3...
Upgrade: websocket
Origin: http://localhost:63342
Sec-WebSocket-Version: 13
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Sec-WebSocket-Key: kJXuOKsrl3AR1KeFngRElQ==
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits'

四、Websocket的加解密方式：

解密方式：

# b'x81x87x0exc3xf3xcd;xf6xc6xf8;xf6xc6'==========5555555

hashstr = b'x81x87x0exc3xf3xcd;xf6xc6xf8;xf6xc6'

# 將第二個(gè)字節(jié)也就是 x87 第9-16位 進(jìn)行與127進(jìn)行位運(yùn)算
payload = hashstr[1] & 127

# 當(dāng)位運(yùn)算結(jié)果等于127時(shí),則第3-10個(gè)字節(jié)為數(shù)據(jù)長(zhǎng)度
# 第11-14字節(jié)為mask 解密所需字符串
# 則數(shù)據(jù)為第15字節(jié)至結(jié)尾
if payload == 127:
    extend_payload_len = hashstr[2:10]
    mask = hashstr[10:14]
    decoded = hashstr[14:]

# 當(dāng)位運(yùn)算結(jié)果等于126時(shí),則第3-4個(gè)字節(jié)為數(shù)據(jù)長(zhǎng)度
# 第5-8字節(jié)為mask 解密所需字符串
# 則數(shù)據(jù)為第9字節(jié)至結(jié)尾
if payload == 126:
    extend_payload_len = hashstr[2:4]
    mask = hashstr[4:8]
    decoded = hashstr[8:]

# 當(dāng)位運(yùn)算結(jié)果小于等于125時(shí),則這個(gè)數(shù)字就是數(shù)據(jù)的長(zhǎng)度
# 第3-6字節(jié)為mask 解密所需字符串
# 則數(shù)據(jù)為第7字節(jié)至結(jié)尾
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 struct
msg_bytes = "5555555".encode("utf8")
token = b"x81"
length = len(msg_bytes)

if length < 126:
    token += struct.pack("B", length)
elif length == 126:
    token += struct.pack("!BH", 126, length)
else:
    token += struct.pack("!BQ", 127, length)

msg = token + msg_bytes

print(msg)

四、基于flask框架、Websocket協(xié)議實(shí)現(xiàn)的客戶(hù)端和服務(wù)端鏈接通信示例：

pip3 install gevent-websocket

from flask import Flask, request
from geventwebsocket.websocket import WebSocket
from gevent.pywsgi import WSGIServer
from geventwebsocket.handler import WebSocketHandler

app = Flask(__name__)


@app.route("/ws")
def websocket():
    # 得到用戶(hù)的鏈接
    user_socket = request.environ.get("wsgi.websocket")  # type:WebSocket
    print("訪(fǎng)問(wèn)成功")
    while True:
        msg = user_socket.receive()  # 接受消息
        print(msg)
        user_socket.send(msg)  # 發(fā)送消息

if __name__ == '__main__':
    # 指定地址、端口號(hào)開(kāi)啟Websocket服務(wù)
    http_serv = WSGIServer(("127.0.0.1", 8001), app, handler_class=WebSocketHandler)
    # 啟動(dòng)Websocket服務(wù)
    http_serv.serve_forever()

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link  rel="stylesheet">
</head>
<body>

<botton class="btn btn-default" onclick="createsocket()">點(diǎn)擊創(chuàng)建鏈接</botton>
<br>

<p>請(qǐng)您輸入消息：<input type="text" placeholder="輸入消息" id="msg"></p>
<buttom class="btn btn-success" onclick="send_msg()">發(fā)送消息</buttom>

<script>
    var ws = null;
    function createsocket() {
        ws = new WebSocket("ws://127.0.0.1:8001/ws");
        ws.onmessage = function (data) {
            console.log("從服務(wù)端收到的消息=",data.data);
        }
    }

    function send_msg() {
        var to_msg = document.getElementById("msg").value;
        ws.send(to_msg)
    }
</script>
</body>
</html>

第一步：運(yùn)行flask
第二步：運(yùn)行html文件
第三步：點(diǎn)擊創(chuàng)建鏈接
第四步：輸入消息
第五步：點(diǎn)擊發(fā)送消息

客戶(hù)端.png

服務(wù)器端.png

這樣我們就簡(jiǎn)單實(shí)現(xiàn)了通過(guò)Websocket協(xié)議的客戶(hù)端服務(wù)端通信。并且我們可以創(chuàng)建多個(gè)鏈接同時(shí)對(duì)服務(wù)器端通信。

五、基于Websocket實(shí)現(xiàn)即時(shí)通訊(IM)：

服務(wù)器代碼：

from flask import Flask, request
from geventwebsocket.websocket import WebSocket
from gevent.pywsgi import WSGIServer
from geventwebsocket.handler import WebSocketHandler
from geventwebsocket.exceptions import WebSocketError
import json

app = Flask(__name__)

user_socket_dict = {}
@app.route("/ws/<username>")
def websocket(username):

    # 得到用戶(hù)的鏈接
    user_socket = request.environ.get("wsgi.websocket")  # type:WebSocket
    user_socket_dict[username] = user_socket
    print(username+"鏈接成功！")
    while True:
        msg = user_socket.receive()  # 接受消息
        for socket in user_socket_dict.values():  # type:WebSocket
            if user_socket != socket:# 自己發(fā)消息服務(wù)器就不要再給自己回消息了
                try:
                    socket.send(json.dumps({"sender": username, "msg": msg}))
                except:
                    continue

if __name__ == '__main__':
    # 指定地址、端口號(hào)開(kāi)啟Websocket服務(wù)
    http_serv = WSGIServer(("127.0.0.1", 8001), app, handler_class=WebSocketHandler)
    # 啟動(dòng)Websocket服務(wù)
    http_serv.serve_forever()

html代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link  rel="stylesheet">
</head>
<body>
<p>請(qǐng)輸入你的昵稱(chēng)：<input type="text" id="username"></p>
<botton class="btn btn-default" onclick="createsocket()">點(diǎn)擊創(chuàng)建鏈接</botton>
<br>
<p>請(qǐng)您輸入消息：<input type="text" id="msg"></p>
<buttom class="btn btn-success" onclick="send_msg()">發(fā)送消息</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").value;
        ws = 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.getElementById("text_div");
        var add_msg = "<p style='text-align: right'>" + to_msg + ":" + username + "</p>";
        text_div.innerHTML += add_msg;
        ws.send(to_msg);
    }
</script>
</body>
</html>

第一步：運(yùn)行flask服務(wù)器
第二步：運(yùn)行html文件
第三步：輸入昵稱(chēng)，點(diǎn)擊創(chuàng)建鏈接
第四步：輸入消息
第五步：點(diǎn)擊發(fā)送消息

客戶(hù)端01.png

客戶(hù)端02.png

服務(wù)器端.png

以上就是有關(guān)于：“html5中http和Websocket的輪詢(xún)與原理詳解”這篇文章的相關(guān)內(nèi)容分享，希望對(duì)大家的學(xué)習(xí)有所幫助，當(dāng)然了更多有關(guān)于html5這方面的內(nèi)容都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解。

HTML5

0 人點(diǎn)贊