一 . WebSocket原理
1.1.背景
WebSocket 是基于Http 协议的改进，Http 为无状态协议，基于短连接，需要频繁的发起请求，第二 Http 只能客户端发起请求，服务端无法主动请求。
1.2.相同点
1.都是基于TCP的应用层协议。
2.都使用Request/Response模型进行连接的建立。
3.在连接的建立过程中对错误的处理方式相同，在这个阶段WS可能返回和HTTP相同的返回码。
4.都可以在网络中传输数据。
1.3.不同点
1.WS使用HTTP来建立连接，但是定义了一系列新的header域，这些域在HTTP中并不会使用。
2.WS的连接不能通过中间人来转发，它必须是一个直接连接。
3.WS连接建立之后，通信双方都可以在任何时刻向另一方发送数据。
4.WS连接建立之后，数据的传输使用帧来传递，不再需要Request消息。
5.WS的数据帧有序。
6.WebSocket 分为握手和数据传输
1.4.WebSocket的握手
客户端的握手如下：
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin: http://example.com
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
服务端的握手如下：
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
Sec-WebSocket-Protocol: chat
客户端和服务端都发送了握手，并且成功，数据传输即可开始。
1.5.建立握手的时候需要遵守的规则
1.请求【握手】信息中提取 Sec-WebSocket-Key
2.利用magic_string 和 Sec-WebSocket-Key 进行sha1加密，再进行base64加密
3.将加密结果响应给客户端
# 注：magic string为：258EAFA5-E914-47DA-95CA-C5AB0DC85B11
1.6.数据传输
通过Http握手之后，如果是http 协议的话，tcp 连接会断开，这里在http 头部指明了升级为 websocket， 所以tcp 连接不断开。 WebSocket在握手后发送数据并象下层TCP协议那样由用户自定义,还是需要遵循对应的应用协议规范。 WebSocket 数据传输以数据帧的形式传输。
1.7.payload length:传输数据长度
# hashstr = b'\x81\x83\xceH\xb6\x85\xffz\x85'
# b'\x81 \x83 \xceH\xb6\x85\xffz\x85'
# print(hashstr[1]) #也就是打印\x83得到一个数字,这个数字与127做位运算,得到一个值:
如果这个值以字节表示是0-125这个范围，那这个值就表示传输数据的长度；
如果这个值是126，则随后的两个字节表示的是一个16进制无符号数，用来表示传输数据的长度；
如果这个值是127,则随后的是8个字节表示的一个64位无符合数，这个数用来表示传输数据的长度。
二 . 轮询
# 轮询
客户端向服务器不断发起类似Http请求
服务器不断的响应客户端
带上你的身份牌 - 服务器校验身份
大爷去找你的消息 - 服务器获取你应该拿到数据
if：拿到数据
else：拿不到数据 - 再次发起请求询问服务器消息
劣势：
1.双端资源浪费
2.带宽资源占用
3.不能保证数据实时性
上个世纪90年代 - 本世纪初：
24bps == 4-6KB
CPU == 800MHZ
内存 == 256MB
QQ -- ICQ
三 . 长轮询
# 长轮询
1.客户端向服务器发起一个请求
2.服务器保持这个请求 不返回不响应
3.一定时间之后，服务器抛弃 or 返回
4.客户端收到请求 立即再次发起保持
你去传达室，大爷款待你喝茶，
喝茶等消息(保持)
上厕所或者大爷撵你走(断开)
再次回去喝茶等消息(保持)
劣势：
1.服务器资源浪费
2.不能保证数据实时性(可能在上厕所的时候来消息)
优势：
1.节省客户端资源(不用总去)
2.保证数据有效
当时的环境：本世纪初 - 目前
128bps == 20-30KB
Cpu == 1.4GHZ 奔腾4
内存 == 512MB
四 . 长连接
# 长连接
永久保持连接
1.你和大爷之间装了一台电话分机
2.你派人告诉大爷你的分机号码
3.大爷拨通分机
4.你告诉大爷，有消息说句话，我派人去拿
5.你和大爷同时开启了闭音(我平常说话你听不见)
劣势：
1.服务器CPU要求较高
优势：
1.节省大量资源
2.数据实时有效性
3.带宽几乎不占用
现在的环境：
100mps == 百兆光纤 == 5MB/s || 2KB
CPU == 16核32线程 i9 3.2GHZ
内存 == 16GB
基于 geventwebsocket 模块来实现websocket
需要导入模块
from geventwebsocket.handler import WebSocketHandler
from geventwebsocket.websocket import WebSocket
from gevent.pywsgi import WSGIServer
以下为Flask的版本
简陋版
后端
from flask import Flask,render_template,request
from geventwebsocket.handler import WebSocketHandler
from geventwebsocket.websocket import WebSocket
from gevent.pywsgi import WSGIServer
import json
app=Flask(__name__)
user_socket_list = []
user_socket_dict = {
}
# 这边的type 为标识当前类, 或定义类, 解释来源于百度..
@app.route("/ws/<username>")
def ws(username):
# 获取连接当前websocket服务的socket对象
user_socket = request.environ.get("wsgi.websocket") #type:WebSocket
print(user_socket)
if user_socket:
# 将当前存在的用户对象放入 用户scoket字典中
user_socket_dict[username] = user_socket
print(len(user_socket_dict),user_socket_dict)
while 1:
# 接受传入的数据
msg = user_socket.receive() # 收件人 消息 发件人
# json反序列化获取对应的消息后, 拼接前端需要的数据, 这边获取socket的原始用户,用于返回消息
msg_dict = json.loads(msg)
msg_dict["from_user"] = username
to_user = msg_dict.get("to_user")
# chat = msg_dict.get("msg")
u_socket = user_socket_dict.get(to_user) # type:WebSocket
# 返回当前的用户信息
u_socket.send(json.dumps(msg_dict))
# for u_socket in user_socket_list:
# if u_socket == user_socket:
# continue
# try:
# u_socket.send(msg)
# except:
# continue
@app.route("/")
def index():
print(123)
return render_template("ws.html")
if __name__ == '__main__':
# app.run("0.0.0.0",9527,debug=True)
http_serv = WSGIServer(("0.0.0.0",9527),app,handler_class=WebSocketHandler)
http_serv.serve_forever()
ps: main函数体重启动wsgiserver服务, 这边0.0.0.0:9527 开放所有的ip访问, 执行类为geventscoket里的 WebSocketHandler
前端
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Title</title>
</head>
<body>
<input type="text" id="username"> <button onclick="login()">登录聊天室</button>
给<input type="text" id="to_user">发送：<input type="text" id="msg"> <button onclick="send_msg()">发送</button>
<div id="chat_list" style="width: 500px;height: 500px;"></div>
</body>
<script type="application/javascript">
var ws = null;
function login() {
var username = document.getElementById("username").value;
// 创建WebSocket连接对象, 这边加username 为了匹配后端的有名分组, 来对不同的websocket进行区分
ws = new WebSocket("ws://192.168.12.87:9527/ws/"+username);
ws.onmessage = function (data) {
console.log(data.data);
var recv_msg = JSON.parse(data.data);
var ptag = document.createElement("p");
ptag.innerText= recv_msg.from_user + ":" + recv_msg.msg;
document.getElementById("chat_list").appendChild(ptag);
}
}
function send_msg() {
var to_user = document.getElementById("to_user").value;
var msg = document.getElementById("msg").value;
var send_str = {
"to_user" :to_user,
"msg":msg
};
// 使用在login()函数中创建的ws对象 执行send方法来发送自己拼接的消息
ws.send(JSON.stringify(send_str));
}
</script>
</html>
WebSocket握手原理
magic_string 唯一不可改变
import socket, base64, hashlib
from pprint import pprint
sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
sock.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
sock.bind(('127.0.0.1', 9527))
sock.listen(5)
# 获取客户端socket对象
conn, address = sock.accept()
# 获取客户端的【握手】信息
data = conn.recv(1024)
print(data)
print("====== pprint ======================>")
pprint(data)
"""
GET /ws HTTP/1.1\r\n
Host: 127.0.0.1:9527\r\n
Connection: Upgrade\r\n
Pragma: no-cache\r\n
Cache-Control: no-cache\r\n
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36\r\n
Upgrade: websocket\r\n
Origin: http://localhost:63342\r\n
Sec-WebSocket-Version: 13\r\n
Accept-Encoding: gzip, deflate, br\r\n
Accept-Language: zh-CN,zh;q=0.9\r\n
Cookie: session=a6f96c20-c59e-4f33-84d9-c664a2f29dfc\r\n
Sec-WebSocket-Key: MAZZU5DPIxWmhk/UWL2+BA==\r\n
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits\r\n\r\n
"""
# 以下动作是有websockethandler完成的
# magic string为：258EAFA5-E914-47DA-95CA-C5AB0DC85B11
def get_headers(data):
header_dict = {}
header_str = data.decode("utf8")
for i in header_str.split("\r\n"):
if str(i).startswith("Sec-WebSocket-Key"):
header_dict["Sec-WebSocket-Key"] = i.split(":")[1].strip()
return header_dict
headers = get_headers(data) # 提取请求头信息
#魔法字符串, WebSocket协议中 这个magic_string是不改变的, 一旦变化握手必然失败
magic_string = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11'
#Sec-WebSocket-Key: MAZZU5DPIxWmhk/UWL2+BA==
value = headers['Sec-WebSocket-Key'] + magic_string
print(value)
ac = base64.b64encode(hashlib.sha1(value.encode('utf-8')).digest())
# 对请求头中的sec-websocket-key进行加密
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"
print("ac decode",ac.decode('utf-8'))
response_str = response_tpl % (ac.decode('utf-8'))
# 响应【握手】信息
conn.send(response_str.encode("utf8"))
while True:
msg = conn.recv(8096)
print(msg)
ps: 参key就是客户端发上来的Sec-WebSocket-Ke。 然后服务器进行sha1计算并且拼上一个GUID RFC6455中可以找到这个字符串。然后进行base64encode返回给客户端。客户端拿到后拿自己的key做同样的加密，如果对得上握手完成。到此为止就可以开始愉快的使用
WebSocket加密
import struct
msg_bytes = "the emperor has not been half-baked in the early days of the collapse of the road, today down three points, yizhou weakness, this serious crisis autumn".encode("utf8")
token = b"\x81" # + 数据长度/运算位 + mask/数据长度 + mask/数据 + 数据
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)
输出结果(b=>二进制形式的)
b'\x81\x7f\x00\x00\x00\x00\x00\x00\x00\x97the emperor has not been half-baked in the early days of the collapse of the road, today down three points, yizhou weakness, this serious crisis autumn'
X81开头, 为协议要求
信息长度决定了发送的消息的方式, 最终的结果在解密解读对应不同的类型进行位运算解开
WebSocket解密
#b'\x81\x89\xf3\x99\x81-\x15\x05\x01\xcbO\x1be\x97]'
#b'\x81\x85s\x92a\x10\x1b\xf7\r|\x1c'
#b'\x81\x83H\xc0x\xa6y\xf2K'
hashstr = b'\x81\x85s\x92a\x10\x1b\xf7\r|\x1c'
# b'\x81 \x85s \x92a\x10\x1b\xf7 \r|\x1c' <126
# \x85s = 5
hashstr = b'\x81\xfe\x02\xdc\x8d\xe8-\xb2hm\xa5W5u\xc8:\x16\x0c\x95(kt\x87W\x00b\xc52\x01\x0c\x95\x1fdi\xbeW9A\xcb\x1c\x0f\x07\x91>iS\xa7W)A\xc9\n\x06\x0c\x95;h`\xab]1d\xca)\x07\r\x9a,j~\x9fW1b\xc2\x0e\x01\x0e\x80\x16eG\xb7W\x00Y\xcb2(\r\x80*iR\x8cV4c\xca\x15\x06\x0c\x94-nh\xafU\t^\xc9\x0c\x00\r\xa0\x19iQ\xa6Z\nK\xc9\n\x00\x0e\xaa:iR\xa3W\x0bm\xc2\x0e\x01\r\x92\x12hW\xbaV4c\xc8\x11&\r\x92*eR\x86V7f\xc8\x16\x1b\x00\xad7bT\xa1U\x16~\xc5\r0\r\xa8:hP\xb0V4c\xcb\x1c\x07\x01\xac5bT\xa1T!Z\xcb8(\x0c\x949iR\xa3[\x14s\xc9\n\x06\x0c\x94-nh\xafZ"r\xc8\x1c\x11\r\x912hT\x8dW\x11K\xc8"!\x07\x91>iS\x88W\x08a\xc87\x05\r\x95/di\xbaW3_\xc2\x0e\x01\x0e\xac\x10hT\xb5W2\x7f\xc8\x11&\x0c\x949kX\xb9]1d\xc9\n\x00\r\x83.hN\xa9Z\nB\xc5=?\x00\xbb6bT\xa1W1}\xc8$6\r\x89\x03iQ\xa4]1d\xc9\t(\r\x8c,hW\x8dZ=g\xc9\x0b\x06\x00\x9a\x1diQ\xb2Q\rj\xc8\x1c&\x0c\x95\x1fhR\xb1V5E\xc2\x0e\x01\x0c\x92\x03iP\x97V5h\xc9\x0f\x1e\x07\x91>dq\xb2U0r\xc55*\r\xbd\x14bT\xa1V5e\xc8\x1c\x11\r\x910hx\xa1Q\rj\xc59(\x0e\xb1;iU\xb1W(P\xca8"\x0f\x8a#hg\xa7V5R\xc8\r-\r\xbb6eh\xa8]1d\xc8\x1c\x11\x0c\x96*kt\xa4W\x02P\xc5\x1c7\r\xa8\x04h`\xbcZ8g\xc2\x0e\x01\x0c\x96\x17kp\x80[\x14s\xc9\n\x06\r\x94\x01kp\xa3V4c\xca"\x0b\x07\x91>iP\xa0W#t\xc83\x02\x0f\x8a3bT\xa1V0W\xc84\x08\r\x89$hT\xafT>}\xc9\x0b\x12\x0b\xad0iV\xa0V5E\xce2\x0c\x0c\x93?dk\xa3[\x0eE\xcb&5\x0c\x949nh\xacZ9Q\xca\x17\x03\x0b\xad3ey\x8eW\x08i\xca\x1f\x04\x07\x91>kE\x89U\x17n\xc5;"\r\x83,bT\xa1W2\x7f\xc5+\x1c\r\x92\x12jR\x82]1d\xcb*"\x0c\x96\x17hm\xa5W5u\xca\x1c\r\x0e\xa6&iS\x88[\x0c\x7f\xc4+\x16\x0c\x959nh\xafT\tr\xc9\t(\x0c\x95\x08hF\x86V5E\xc9\x0b\x06\x0c\x979bT\xa1V7c\xcb%-\r\x89\x15hX\xa2]1d\xcb0\x04\x0c\x96\x17hz\x85V4c\xc2\x0e\x01\x0f\xa9\x04hx\xa3T\x1bU\xc5\x13\x01\x07\x91>hW\xa8Z\x0eU\xc5\x11%\x00\x8c\x17dp\xb4T1g\xc2\x0e\x01\x0e\xb1;ka\xadW4W\xca)\x07\x0b\xad0'
# print(chushibiao[1],chushibiao[1]&127)
# print(chushibiao[2:4],chushibiao[4:8])
# 将第二个字节也就是 \x83 第9-16位 进行与127进行位运算
payload = hashstr[1] & 127
print(payload)
if payload == 127:
extend_payload_len = hashstr[2:10]
mask = hashstr[10:14]
decoded = hashstr[14:]
# 当位运算结果等于127时,则第3-10个字节为数据长度
# 第11-14字节为mask 解密所需字符串
# 则数据为第15字节至结尾
if payload == 126:
extend_payload_len = hashstr[2:4]
mask = hashstr[4:8]
decoded = hashstr[8:]
# 当位运算结果等于126时,则第3-4个字节为数据长度
# 第5-8字节为mask 解密所需字符串
# 则数据为第9字节至结尾
if payload <= 125:
extend_payload_len = None
mask = hashstr[2:6]
decoded = hashstr[6:]
# 当位运算结果小于等于125时,则这个数字就是数据的长度
# 第3-6字节为mask 解密所需字符串
# 则数据为第7字节至结尾
str_byte = bytearray()
# b'\x81 \x85s \x92a\x10\x1b \xf7\r|\x1c' <126
for i in range(len(decoded)): # 0 \xf7 ^ \x92a 1 \r ^ \x10 \x1c ^ \x1b
byte = decoded[i] ^ mask[i % 4]
str_byte.append(byte)
print(str_byte.decode("utf8"))
输出结果
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。
获取mask, 解密所需字符串获得数据
总结:
扩展：
http协议：\r\n分割、请求头和请求体\r\n分割、无状态、短连接。
websocket协议：\r\n分割，创建连接后不断开、验证+数据加密；
websocket本质：
就是一个创建连接后不断开的socket,当连接成功之后：
客户端（浏览器）会自动向服务端发送消息，包含： Sec-WebSocket-Key: iyRe1KMHi4S4QXzcoboMmw==
服务端接收之后，会对于该数据进行加密：
base64(sha1(swk+magic_string))
构造响应头：
HTTP/1.1 101 Switching Protocols\s\n
Upgrade:websocket\r\n Connection: Upgrade\r\n
Sec-WebSocket-Accept: 加密后的值\r\n
WebSocket-Location: ws://127.0.0.1:8002\r\n\r\n
发送客户端（浏览器）
-建立：双工通道，接下来就可以进行收发数据
-发送的数据是加密，解密，根据payload_len的值进行处理：
-payload_len <= 125
-payload_len == 126
-payload_len == 127
获取内容：
-mask_key
数据
根据mask_key和数据进行位运算，就可以把值解析出来。
Websocket再解释
WebSocket是一种在单个TCP连接上进行全双工通信的协议
WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输
现在，很多网站为了实现推送技术，所用的技术都是轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
而比较新的技术去做轮询的效果是Comet。这种技术虽然可以双向通信，但依然需要反复发出请求。而且在Comet中，普遍采用的长链接，也会消耗服务器资源。
在这种情况下，HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯
Django实现Websocket
django实现websocket大致上有两种方式，一种channels，一种是dwebsocket。channels依赖于redis，twisted等，相比之下使用dwebsocket要更为方便一些
dwebsocket安装
pip3 install dwebsocket
dwebsocket配置
INSTALLED_APPS = [
.....
.....
'dwebsocket',
]
MIDDLEWARE_CLASSES = [
......
......
'dwebsocket.middleware.WebSocketMiddleware' # 为所有的URL提供websocket，如果只是单独的视图需要可以不选
]
WEBSOCKET_ACCEPT_ALL=True # 可以允许每一个单独的视图实用websockets
使用
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
</head>
<body>
<button onclick="WebSocketTest()">test</button>
</body>
<script>
function WebSocketTest() {
alert(1)
if ("WebSocket" in window) {
alert("您的浏览器支持 WebSocket!");
// 打开一个 web socket
ws = new WebSocket("ws://127.0.0.1:8000/path/");
ws.onopen = function () {
// Web Socket 已连接上，使用 send() 方法发送数据
ws.send("发送数据");
alert("数据发送中...");
};
ws.onmessage = function (evt) {
var received_msg = evt.data;
alert("数据已接收...");
alert("数据:" + received_msg)
};
ws.onclose = function () {
// 关闭 websocket
alert("连接已关闭...");
};
}
else {
// 浏览器不支持 WebSocket
alert("您的浏览器不支持 WebSocket!");
}
}
</script>
</html>
views视图层：
from django.shortcuts import render,HttpResponse
# Create your views here.
def login(request):
return render(request,'login.html')
from dwebsocket.decorators import accept_websocket
@accept_websocket
def path(request):
if request.is_websocket():
print(1)
request.websocket.send('下载完成'.encode('utf-8'))
[
路由层：
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^login/', views.login),
url(r'^path/', views.path),
]
六 详解
dwebsocket有两种装饰器：require_websocket和accept_websocekt，使用require_websocket装饰器会导致视图函数无法接收导致正常的http请求，
一般情况使用accept_websocket方式就可以了，
dwebsocket的一些内置方法：
request.is_websocket（）：判断请求是否是websocket方式，是返回true，否则返回falserequest.websocket：
当请求为websocket的时候，会在request中增加一个websocket属性，WebSocket.wait（） 返回客户端发送的一条消息，没有收到消息则会导致阻塞WebSocket.read（） 和wait一样可以接受返回的消息，只是这种是非阻塞的，没有消息返回NoneWebSocket.count_messages（）返回消息的数量WebSocket.has_messages（）返回是否有新的消息过来WebSocket.send（message）像客户端发送消息，message为byte类型
全理解后, 部分复制之
关于通讯方式的参考博客==>
https://www.cnblogs.com/huchong/p/8595644.html#_label1
关于django实现的websocket的参考博客==>
https://www.cnblogs.com/liuqingzheng/p/10151572.html
来源：oschina
链接：https://my.oschina.net/u/4364580/blog/3337715