详解websocket
@(python之路)[websocket学习]
websocket学习
websocket
安装：pip3 install gevent-websocket
http协议：
数据格式： "GET / http1.1\r\host:www.bb.com\r\n\r\n"
请求获取响应之后断开连接
WebSocket协议：
数据格式：“host:www.bb.com\r\n\r\n”
连接：创建连接永远不断开。
校验：magic_string
加密 ：mask key + 127/126/125
WebSocket协议
WebSocket协议是基于TCP的一种新的协议。WebSocket最初在HTML5规范中被引用为TCP连接，作为基于TCP的套接字API的占位符。它实现了浏览器与服务器全双工（full-duplex）通信。其本质保持了TCP连接，在浏览器和服务端通过Socket进行通信。
启动服务端
import socket
sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
sock.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
sock.bind(('127.0.0.1', 8002))
sock.listen(5)
# 等待用户连接
conn, address = sock.accept()
启动socket服务器后，等待用户【连接】，进行收发数据。
客户端连接
<script type="text/javascript">
// 向127.0.0.1:8002 发送一个WebSocket请求
var socket = new WebSocket("ws://127.0.0.1:8002/index")
</script>
当客户端向服务端发送连接请求时，不仅连接还会发送【握手】信息，并等待服务端响应，至此连接才创建成功！
建立连接【握手】
import socket
sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
sock.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
sock.bind(('127.0.0.1', 8002))
sock.listen(5)
# 获取客户端socket对象
conn, address = sock.accept()
# 获取客户端的【握手】信息
data = conn.recv(1024)
...
...
...
conn.send('响应【握手】信息')
请求和响应的【握手】信息遵循规则：
- 从请求【握手】信息中提取sec-WebSocket-Key
- 利用magic_string和Sec-WebSocket-Key 进行hmac1解密，在进行base64加密
- 将加密结果响应给客户端
注释：magic string为：258EAFA5-E914-47DA-95CA-C5AB0DC85B11。这里的magic string全世界都在用是不可变的。
请求【握手】信息为：
GET /chatsocket HTTP/1.1
Host: 127.0.0.1:8002
Connection: Upgrade
Pragma: no-cache
Cache-Control: no-cache
Upgrade: websocket
Origin: http://localhost:63342
Sec-WebSocket-Version: 13
Sec-WebSocket-Key: mnwFxiOlctXFN/DeMt1Amg==
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
提取Sec-WebSocket-Key值并进行加密：
import socket
import hashlib
import base64
def get_headers(data):
"""
将请求头格式化成字典
:param data:
:return:
"""
header_dict = {}
data = str(data, encoding='utf-8')
header, body = data.split('\r\n\r\n', 1)
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
def send_msg(conn, msg_bytes):
"""
WebSocket服务端向客户端发送消息
:param conn: 客户端连接到服务器端的socket对象,即： conn,address = socket.accept()
:param msg_bytes: 向客户端发送的字节
:return:
"""
import struct
token = b"\x81"
length = len(msg_bytes)
if length < 126:
token += struct.pack("B", length)
elif length <= 0xFFFF:
token += struct.pack("!BH", 126, length)
else:
token += struct.pack("!BQ", 127, length)
msg = token + msg_bytes
conn.send(msg)
return True
sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
sock.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
sock.bind(('127.0.0.1', 8002))
sock.listen(5)
# 等待用户连接
conn, address = sock.accept()
# WebSocket发来的连接
# 1. 获取握手数据
data = conn.recv(1024)
headers = get_headers(data)
# 2. 对握手信息进行加密
magic_string = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11'
value = headers['Sec-WebSocket-Key'] + magic_string
ac = base64.b64encode(hashlib.sha1(value.encode('utf-8')).digest())
# 3. 返回握手信息
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:8002\r\n\r\n"
response_str = response_tpl % (ac.decode('utf-8'),)
conn.sendall(bytes(response_str, encoding='utf-8'))
# 之后，才能进行首发数据。
while True:
# 对数据进行解密
# send_msg(conn, bytes('alex', encoding='utf-8'))
# send_msg(conn, bytes('SB', encoding='utf-8'))
# info = conn.recv(8096)
# print(info)
info = conn.recv(8096)
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)
msg = str(bytes_list, encoding='utf-8')
rep = msg + 'sb'
send_msg(conn,bytes(rep,encoding='utf-8'))
服务器与客户端收发数据
客户端和服务端传输数据时，需要对数据进行【封包】和【解包】。客户端的JavaScript类库已经封装【封包】和【解包】过程，但Socket服务端需要手动实现。
下面看一下，解包的详细过程
0 1 2 3
0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+-+-+-+-+-------+-+-------------+-------------------------------+
|F|R|R|R| opcode|M| Payload len | Extended payload length |
|I|S|S|S| (4) |A| (7) | (16/64) |
|N|V|V|V| |S| | (if payload len==126/127) |
| |1|2|3| |K| | |
+-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
| Extended payload length continued, if payload len == 127 |
+ - - - - - - - - - - - - - - - +-------------------------------+
| |Masking-key, if MASK set to 1 |
+-------------------------------+-------------------------------+
| Masking-key (continued) | Payload Data |
+-------------------------------- - - - - - - - - - - - - - - - +
: Payload Data continued ... :
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
| Payload Data continued ... |
+---------------------------------------------------------------+
在这里我们主要关注的是第1个索引字节：Payload len()。这里有七位数，最大的数为127个。
在这里总共分了几种情况。后边那些是数据，需要根据值来决定的。
如果小于等于125：就表示后边全都是数据了；
等于126的时候：就往后移动两个字节，后边才是数据包；
等于127的时候：再往后读八个字节，后边是数据；
除了这里所用的，后边还需要有一个mask key，通过位运算计算出咱们的数据
示例：WebSocket示例
目录：
|____static
|____templates
|____app.py
对于前端我们所写的的代码如下
这是主要逻辑
<script>
socket = new WebSocket("ws://127.0.0.1:500/message");
socket.onopen = function () {
// 与服务器连接成功之后，自动执行
};
socket.onmessage = function (event) {
// 与服务器像后端发送数据时，自动执行
var response = JSON.parse(event.data); // {"user":1,"count":new}
var nid = "#user_"+response.user;
$(nid).find("span").text(response.count)
};
socket.onclose = function (event) {
// 服务器主动断开时，自动执行
};
socket.send("向后端发送数据")
socket.close()
</script>
具体实现：
<script src="{{ url_for('static',filename='jquery-3.3.1.min.js')}}"></script>
<script>
var socket = new WebSocket("ws://192.168.11.143:5000/message");
socket.onmessage = function (event) {
/* 服务器端向客户端发送数据时，自动执行 */
var response = JSON.parse(event.data); // {'user':1,'count':new}
if(response.type == 'vote'){
var nid = '#user_' + response.user_id;
$(nid).find('span').text(response.count)
}else{
alert(response.data);
}
};
/*
我要给某人投票
*/
function vote(id) {
socket.send(id);
}
</script>
后端代码：
@app.route('/message')
def message():
# 1. 判断到底是否是websocket请求？
ws = request.environ.get('wsgi.websocket')
if not ws:
return "请使用WebSocket协议"
# ----- ws连接成功 -------
current_user_id = session['user_info']['id']
WEBSOCKET_DICT[current_user_id] = ws
while True:
# 2. 等待用户发送消息，并接受
message = ws.receive() # 帅哥ID
# 关闭：message=None
if not message:
del WEBSOCKET_DICT[current_user_id]
break
# 3. 获取用户要投票的帅哥ID,并+1
old = GENTIEMAN[message]['count']
new = old + 1
GENTIEMAN[message]['count'] = new
data = {'user_id': message, 'count': new,'type':'vote'}
# 4. 给所有客户端推送消息
for conn in WEBSOCKET_DICT.values():
conn.send(json.dumps(data))
return 'close'
总结
协议规范：
- 格式：\r\n
- 创建链接之后默认不断开
握手环节：
- 获取客户端发过来的 sec-WebSocket-key 值
- base64(sha1*(值 + magic_string))
- 返回数据
接收数据并解密：
- 取第一个字节
- 截取七位去掉最高为
127
126
125- mask key 占四个字节
- 根据mask key对数据进行做位运算
应用：
- flask中应用： pip3 install gevent-websocket
- django中应用：channel
- tornado应用： 自己有
浙公网安备 33010602011771号