真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

html5中http輪詢和Websocket原理的示例分析-創(chuàng)新互聯(lián)

小編給大家分享一下html5中http輪詢和Websocket原理的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

創(chuàng)新互聯(lián)是一家專業(yè)從事成都網(wǎng)站設(shè)計、做網(wǎng)站、網(wǎng)頁設(shè)計的品牌網(wǎng)絡(luò)公司。如今是成都地區(qū)具影響力的網(wǎng)站設(shè)計公司,作為專業(yè)的成都網(wǎng)站建設(shè)公司,創(chuàng)新互聯(lián)依托強大的技術(shù)實力、以及多年的網(wǎng)站運營經(jīng)驗,為您提供專業(yè)的成都網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)及網(wǎng)站設(shè)計開發(fā)服務(wù)!

一、HTTP的輪詢

Web客戶端與服務(wù)器之間基于Ajax(http)的常用通信方式,分為短連接長輪詢

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

長輪詢:客戶端像傳統(tǒng)輪詢一樣從服務(wù)器請求數(shù)據(jù)。然而,如果服務(wù)器沒有可以立即返回給客戶端的數(shù)據(jù),則不會立刻返回一個空結(jié)果,而是保持這個請求等待數(shù)據(jù)到來(或者恰當(dāng)?shù)某瑫r:小于ajax的超時時間),之后將數(shù)據(jù)作為結(jié)果返回給客戶端。

長輪詢機制如下圖所示:

html5中http輪詢和Websocket原理的示例分析

二、Websocket基本概念

WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協(xié)議。

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

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

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

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

html5中http輪詢和Websocket原理的示例分析

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

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

三、Websocket 握手原理:

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

  • 第一步:客戶端發(fā)起HTTP請求連接

  • 第二步:服務(wù)端從請求頭中取出Sec-WebSocket-Key的值

  • 第三步:給Sec-WebSocket-Key值拼接一個magic_string 的到一個新的value

  • 第四步:給新的value先做sha1加密 再做base64加密

  • 第五步:拼接一個響應(yīng)頭

  • 第六步:服務(wù)器將拼好的響應(yīng)頭發(fā)送給客戶端

  • 第七步:客戶端解密Sec-WebSocket-Accept得到Sec-WebSocket-Key判斷是否握手成功

代碼實現(xiàn):

import socket, base64, hashlib

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

def get_headers(data):
    """從請求頭中取出Sec-WebSocket-Key對應(yīng)的值并返回"""
    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對應(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\r\n" \
               "Upgrade:websocket\r\n" \
               "Connection: Upgrade\r\n" \
               "Sec-WebSocket-Accept: %s\r\n" \
               "WebSocket-Location: ws://127.0.0.1:9527\r\n\r\n" % (socket_str_base64.decode("utf8"))
# 服務(wù)器發(fā)送響應(yīng)頭到客戶端
conn.send(response_tpl.encode("utf8"))
# 客戶端服務(wù)端建立長連接循環(huán)接收發(fā)送數(shù)據(jù)
while True:
    msg = conn.recv(8096)
    print(msg)



    
    Title





    ws = new WebSocket("ws://127.0.0.1:9527");
    ws.onmessage = function (ev) {
        console.log(ev)//用于接收數(shù)據(jù)
    }

附帶客戶端發(fā)起HTTP請求的請求頭:

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'\x81\x87\x0e\xc3\xf3\xcd;\xf6\xc6\xf8;\xf6\xc6'==========5555555

hashstr = b'\x81\x87\x0e\xc3\xf3\xcd;\xf6\xc6\xf8;\xf6\xc6'

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

# 當(dāng)位運算結(jié)果等于127時,則第3-10個字節(jié)為數(shù)據(jù)長度
# 第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)位運算結(jié)果等于126時,則第3-4個字節(jié)為數(shù)據(jù)長度
# 第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)位運算結(jié)果小于等于125時,則這個數(shù)字就是數(shù)據(jù)的長度
# 第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é)議實現(xiàn)的客戶端和服務(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():
    # 得到用戶的鏈接
    user_socket = request.environ.get("wsgi.websocket")  # type:WebSocket
    print("訪問成功")
    while True:
        msg = user_socket.receive()  # 接受消息
        print(msg)
        user_socket.send(msg)  # 發(fā)送消息

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

html文件:




    
    Title
    



點擊創(chuàng)建鏈接

請您輸入消息:

發(fā)送消息
  • 第一步:運行flask

  • 第二步:運行html文件

  • 第三步:點擊創(chuàng)建鏈接

  • 第四步:輸入消息

  • 第五步:點擊發(fā)送消息

 html5中http輪詢和Websocket原理的示例分析

客戶端.png

html5中http輪詢和Websocket原理的示例分析

服務(wù)器端.png

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

五、基于Websocket實現(xiàn)即時通訊(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/")
def websocket(username):

    # 得到用戶的鏈接
    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__':
    # 指定地址、端口號開啟Websocket服務(wù)
    http_serv = WSGIServer(("127.0.0.1", 8001), app, handler_class=WebSocketHandler)
    # 啟動Websocket服務(wù)
    http_serv.serve_forever()

html代碼:




    
    Title
    


請輸入你的昵稱:

點擊創(chuàng)建鏈接

請您輸入消息:

發(fā)送消息


html5中http輪詢和Websocket原理的示例分析

客戶端01.png

html5中http輪詢和Websocket原理的示例分析

客戶端02.png

html5中http輪詢和Websocket原理的示例分析

服務(wù)器端.png

以上是“html5中http輪詢和Websocket原理的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!


本文題目:html5中http輪詢和Websocket原理的示例分析-創(chuàng)新互聯(lián)
網(wǎng)站地址:http://weahome.cn/article/ehijs.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部