53-websocket
内容回顾：
1. 谈谈Flask和Django的认识？
Django大而全的框架，把Web相关设计的组件全部包括。
Flask轻量级的框架，可扩展强。
2. Flask基础
- 配置
- 路由
- 蓝图
- session
- 闪现
- 中间件
- 请求和响应相关
3. Flask上下文管理
- threading.local
- 上下文
- 请求上下文
- 应用上下文
4. 页面实时显示数据
- 轮询，每2s向后台发送请求获取数据。
- 长轮询，把请求最多夯30s。
今日内容：
1. websocket
2. Flask中应用WebSocket
3. 数据库操作
4. 数据库连接池
5. SQLAlchemy
6. Flask-SQLAchemy
内容详细：
1. websocket
参考博客：http://www.cnblogs.com/wupeiqi/p/6558766.html
Http协议：
- 数据格式："GET / http1.1\r\nhost:www.bb.com\r\n\r\n"
- 连接：请求获取响应之后断开连接
WebSocket协议：
- 数据格式："host:www.bb.com\r\n\r\n"
- 连接：创建链接之后不断开
- 校验：magic_string
- 加密: mask key + 127/126/125
示例（python3环境）
websocket_server.py
#!/usr/bin/env python # encoding=utf-8 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'))
浏览器websocket客户端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>WebSocket协议学习</h1> <script type="text/javascript"> // 向 127.0.0.1:8002 发送一个WebSocket请求 var socket = new WebSocket("ws://127.0.0.1:8002"); socket.onmessage = function (event) { /* 服务器端向客户端发送数据时，自动执行 */ var response = event.data; console.log(response); }; </script> </body> </html>
效果，启动服务端，然后浏览器访问这个html网页
2. 在Flask中使用WebSocket
安装：pip3 install gevent-websocket
示例：投票
前端：
socket = new WebSocket("ws://127.0.0.1:5000/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()
后端：
@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'
示例：
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>投票系统:参与投票的人</h1> <ul> {% for k,v in users.items() %} <li id="user_{{k}}" ondblclick="vote('{{k}}')">{{v.name}} <span>{{v.count}}</span> </li> {% endfor %} </ul> <script src="{{ url_for('static',filename='jquery-3.3.1.min.js')}}"></script> <script> var socket = new WebSocket("ws://127.0.0.1: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> </body> </html>
login.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form method="post"> <input type="text" name="user"> <input type="submit" value="提交"> </form> </body> </html>
app.py
from flask import Flask,request,render_template,session,redirect import uuid import json from geventwebsocket.handler import WebSocketHandler from gevent.pywsgi import WSGIServer app = Flask(__name__) app.secret_key = 'asdfasdf' GENTIEMAN = { '1':{'name':'钢弹','count':0}, '2':{'name':'铁锤','count':0}, '3':{'name':'闫帅','count':0}, } WEBSOCKET_DICT = { } @app.before_request def before_request(): if request.path == '/login': return None user_info = session.get('user_info') if user_info: return None return redirect('/login') @app.route('/login',methods=['GET','POST']) def login(): if request.method == "GET": return render_template('login.html') else: uid = str(uuid.uuid4()) session['user_info'] = {'id':uid,'name':request.form.get('user')} return redirect('/index') @app.route('/index') def index(): return render_template('index.html',users=GENTIEMAN) @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' @app.route('/notify') def notify(): data = {'data': "你的订单已经生成，请及时处理；", 'type': 'alert'} print(WEBSOCKET_DICT) for conn in WEBSOCKET_DICT.values(): conn.send(json.dumps(data)) return '发送成功' if __name__ == '__main__': http_server = WSGIServer(('127.0.0.1', 5000), app, handler_class=WebSocketHandler) http_server.serve_forever()
效果：运行app.py
浏览器访问http://127.0.0.1:5000/login登陆后
点击任意一个投票，投票的结果会实时显示在浏览器上。
另外群发消息演示：访问如下
则在所有的客户端都会受到弹出alert
总结：
a. ws协议规范
- 格式：\r\n
- 创建链接之后默认不断开
b. 握手环节
- 获取客户端发送过来的 Sec-WebSocket-Key 值
- base64(sha1(值+magic_string))
- 返回数据
c. 接收数据并解密
- 取第2个字节（第1个索引）
- 去掉最高位截取7位
- 127
- 126
- <=125
- mask key
- 根据mask key对数据进行位运算
d. 应用：
Flask中应用：pip3 install gevent-websocket
Django应用：channel
Tornado应用：自己有
美团黄珏翻译的websocket RFC文档 https://juejin.im/post/5c6b7366e51d45016527d648
浙公网安备 33010602011771号