需要用到gevent-websocket包,这里我们用下图这个
一.websocket简单实现
ep1.py
from geventwebsocket.handler import WebSocketHandler from gevent.pywsgi import WSGIServer from geventwebsocket.websocket import WebSocket # 引这个模块为了注释中显示提示用 from flask import Flask, render_template,request app = Flask(__name__) @app.route('/my_app') def my_app(): return render_template('my_app.html') @app.route('/my_ws') def my_ws(): print(request.environ) user_socket = request.environ.get('wsgi.websocket') # type:WebSocket while 1: msg = user_socket.receive() print(msg) user_socket.send(msg) if __name__ == '__main__': # app.run() http_server = WSGIServer(('0.0.0.0',9527),app,handler_class=WebSocketHandler) http_server.serve_forever()
my_app.html
<body> 我即将是Websocket </body> <script> var ws = new WebSocket("ws://127.0.0.1:9527/my_ws") ws.onmessage = function (MessageEvent) { console.log(MessageEvent.data); } </script>
request.environ:
{ 'GATEWAY_INTERFACE': 'CGI/1.1', 'SERVER_SOFTWARE': 'gevent/1.4 Python/3.6', 'SCRIPT_NAME': '', 'wsgi.version': (1, 0), 'wsgi.multithread': False, 'wsgi.multiprocess': False, 'wsgi.run_once': False, 'wsgi.url_scheme': 'http', 'wsgi.errors': < _io.TextIOWrapper name = '<stderr>' mode = 'w' encoding = 'UTF-8' > , 'SERVER_NAME': 'DESKTOP-3B0N8T7', 'SERVER_PORT': '9527', 'REQUEST_METHOD': 'GET', 'PATH_INFO': '/my_ws', 'QUERY_STRING': '', 'SERVER_PROTOCOL': 'HTTP/1.1', 'REMOTE_ADDR': '127.0.0.1', 'REMOTE_PORT': '62130', 'HTTP_HOST': '127.0.0.1:9527', 'HTTP_CONNECTION': 'Upgrade', 'HTTP_PRAGMA': 'no-cache', 'HTTP_CACHE_CONTROL': 'no-cache', 'HTTP_UPGRADE': 'websocket', 'HTTP_ORIGIN': 'http://127.0.0.1:9527', 'HTTP_SEC_WEBSOCKET_VERSION': '13', 'HTTP_USER_AGENT': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36', 'HTTP_ACCEPT_ENCODING': 'gzip, deflate, br', 'HTTP_ACCEPT_LANGUAGE': 'zh-CN,zh;q=0.9', 'HTTP_COOKIE': 'session=cd724228-79f3-4fee-af68-f923b5298ddf', 'HTTP_SEC_WEBSOCKET_KEY': 'Sut5Yva++5oPh3yBO8nbXw==', 'HTTP_SEC_WEBSOCKET_EXTENSIONS': 'permessage-deflate; client_max_window_bits', 'wsgi.input': < gevent.pywsgi.Input object at 0x00000222A00988E8 > , 'wsgi.input_terminated': True, 'wsgi.websocket_version': '13', 'wsgi.websocket': < geventwebsocket.websocket.WebSocket object at 0x00000222A009F1E8 > , 'werkzeug.request': < Request 'http://127.0.0.1:9527/my_ws' [GET] > }
二.使用websocket简单应用
1.简单实现聊天, (一对一单人聊天聊天)
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
import json from geventwebsocket.handler import WebSocketHandler from gevent.pywsgi import WSGIServer from geventwebsocket.websocket import WebSocket from geventwebsocket.exceptions import WebSocketError from flask import Flask,render_template,request app = Flask(__name__) # user_socket_list = [] user_socket_dict = {} @app.route("/my_app") def my_app(): print(request.environ) return render_template("my_app.html") @app.route("/my_ws/<username>") def my_ws(username): user_socket = request.environ.get("wsgi.websocket") # type:WebSocket user_socket_dict[username] = user_socket print(len(user_socket_dict),user_socket_dict) while 1: try: msg = user_socket.receive() # 阻塞等待消息数据 print(msg,type(msg)) msg_dict = json.loads(msg) # msg = {from_user:xxx,to_user:robert,messge:"hello"} to_user = msg_dict.get("to_user") to_user_socket = user_socket_dict.get(to_user) to_user_socket.send(msg) # user_socket_dict.get(msg.get(to_user) == "robert").send(msg) except WebSocketError: user_socket_dict.pop(username) return "good bye" if __name__ == '__main__': # app.run() http_serv = WSGIServer(("0.0.0.0",9527),app,handler_class=WebSocketHandler) http_serv.serve_forever()
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 你的名字:<input type="text" id="nickname"> <button οnclick="open_chat()">登录聊天室</button> <p>发送至<input type="text" id="to_user"></p> 消息<input type="text" id="message"> <button οnclick="send_message()">发送</button> <div id="chat_list"> </div> </body> <script type="application/javascript"> var ws = null; function open_chat() { var nickname = document.getElementById("nickname").value; ws = new WebSocket("ws://192.168.14.200:9527/my_ws/" + nickname); // 这里的地址是websocket服务器的地址 ws.onopen = function () { alert(nickname + "!欢迎登录对骂平台!"); }; ws.onmessage = function (eventMessage) { // document.getElementById("chat_list").innerHTML += "<p>" + eventMessage.data + "</p>"; console.log(eventMessage.data); var chat = JSON.parse(eventMessage.data); var p = document.createElement("p"); p.style.cssText = "width: 250px;text-align: left"; p.innerText = chat.from_user + "->" + chat.message; document.getElementById("chat_list").appendChild(p); }; ws.onclose = function () { //断开重连机制 console.log("连接断开了完全懵逼了"); }; } function send_message() { var message = document.getElementById("message").value; var from_user = document.getElementById("nickname").value; var to_user = document.getElementById("to_user").value; var send_str = { from_user: from_user, to_user: to_user, message: message }; ws.send(JSON.stringify(send_str)); var p = document.createElement("p"); p.style.cssText = "width: 250px;text-align: right"; p.innerText = send_str.message + "<-我"; document.getElementById("chat_list").appendChild(p); } </script> </html>
2. 实现多人在线聊天
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
from geventwebsocket.handler import WebSocketHandler from gevent.pywsgi import WSGIServer from geventwebsocket.websocket import WebSocket from geventwebsocket.exceptions import WebSocketError from flask import Flask,render_template,request app = Flask(__name__) user_socket_list = [] @app.route("/my_app") def my_app(): return render_template("my_app.html") @app.route("/my_ws") def my_ws(): user_socket = request.environ.get("wsgi.websocket") # type:WebSocket user_socket_list.append(user_socket) print(len(user_socket_list),user_socket_list) while 1: try: msg = user_socket.receive() # 阻塞等待消息数据 except WebSocketError: user_socket_list.remove(user_socket) return "good bye" for u in user_socket_list: if u == user_socket: continue try: u.send(msg) except : continue if __name__ == '__main__': # app.run() http_serv = WSGIServer(("0.0.0.0",9527),app,handler_class=WebSocketHandler) http_serv.serve_forever()
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="message"><button οnclick="send_message()">发送</button> <div id="chat_list"> </div> </body> <script type="application/javascript"> var ws = new WebSocket("ws://192.168.14.200:9527/my_ws"); ws.onmessage = function (eventMessage) { // document.getElementById("chat_list").innerHTML += "<p>" + eventMessage.data + "</p>"; var p = document.createElement("p"); p.innerText = eventMessage.data; document.getElementById("chat_list").appendChild(p); }; function send_message() { var message = document.getElementById("message").value; ws.send(message); } </script> </html>
三.websocket握手原理, 加密, 解密
下面是我用python代码进行的简单原理实现, 上文中的websocket其实已经帮我们封装好了这些方式
1.握手原理
import socket, base64, hashlib # 分析HTTP请求 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) """ b'GET / 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 Upgrade: websocket\r\n Origin: http://localhost:63342\r\n Sec-WebSocket-Version: 13\r\n User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36\r\n Accept-Encoding: gzip, deflate, br\r\n Accept-Language: zh-CN,zh;q=0.9\r\n Sec-WebSocket-Key: 176bkom1UAtHfS7MUYCwlQ==\r\n Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits\r\n\r\n' """ # 由于信息是bytes类型,所以我们要将请求头信息处理转化为字典 # 获取头的第1种方式 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 # 获取头的第2种方式 def get_header(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 headers = get_headers(data) # 提取请求头信息 # # 对请求头中的sec-websocket-key进行加密 swk = headers['Sec-WebSocket-Key'] # Websocket 中的魔法字符串 magic_string magic_string = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11' value = swk + magic_string # 176bkom1UAtHfS7MUYCwlQ==258EAFA5-E914-47DA-95CA-C5AB0DC85B11 # ZWHsGUn8ogDGd+JYzQunlQ==258EAFA5-E914-47DA-95CA-C5AB0DC85B11 # 先SHA1后base64 ac = base64.b64encode(hashlib.sha1(value.encode('utf-8')).digest()) print(value) print(ac) # b'PIj4+UWLuqcpcTZcMnnu9Ik6rSQ=' # b'iZFEC+HI/NqNp5g2BoENbywWBLA=' 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" response_str = response_tpl % (ac.decode('utf-8')) # 响应【握手】信息 conn.send(response_str.encode("utf8")) while True: msg = conn.recv(8096) print(msg) import websocket加密 conn.send(websocket加密.res()) # # magic string为:258EAFA5-E914-47DA-95CA-C5AB0DC85B11 #
2.加密
import struct def res(): msg_bytes = "hello".encode("utf8") token = b"\x81" length = len(msg_bytes) # 5 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) return msg
3.解密
# b'\x81\x83\xceH\xb6\x85\xffz\x85' hashstr = b'\x81\x8c\xc2J\xb3\x0c\xaa/\xdf`\xadj\xc4c\xb0&\xd7-' # b'\x81 \x8c \xc2J\xb3\x0c\xaa/\xdf`\xadj\xc4c\xb0&\xd7-' ssss = b'\x81\xfe\x0bp\x8fF\xa1\xa3j\xc3)F7\xdbD+\x14\xa2\x199i\xda\x0bF\x02\xccI#\x03\xa2\x19\x0ef\xc72F;\xefG\r\r\xa9\x1d/k\xfd+F+\xefE\x1b\x04\xa2\x,' print(ssss[2:4]) # == 140 # 与127做 与 位运算 12 # Websocket 加密 解密 3种情况 # 校验位 : 由websocket加密字符串的第二个字节与127期开始进行与位运算 # 校验位 == 127 # 校验位 == 126 # 校验位 <= 125 # 将第二个字节也就是 \x83 第9-16位 进行与127进行位运算 payload = hashstr[1] & 127 print(payload) if payload == 127: extend_payload_len = hashstr[2:10] # 15.5ZB mask = hashstr[10:14] decoded = hashstr[14:] # 当位运算结果等于127时,则第3-10个字节为数据长度 # 第11-14字节为mask 解密所需字符串 # 则数据为第15字节至结尾 # ssss = b'\x81\xfe\x0bp\x8fF\xa1\xa3j\xc3)F7\xdbD+\x14\xa2\x199i\xda\x0bF\x02\xccI#\x03\xa2\x19\x0ef\xc72F;\xefG\r\r\xa9\x1d/k\xa0\x0c\x07g\xe9;F\x02\xf7G#*\\xa0+\x06k\xff*G,' if payload == 126: extend_payload_len = hashstr[2:4] # \x0bp\x8fF 65535 字节 21845个汉字 mask = hashstr[4:8] # xa1\xa3j\xc3)F7 decoded = hashstr[8:] # 从第九个开始全是数据 # 当位运算结果等于126时,则第3-4个字节为数据长度 # 第5-8字节为mask 解密所需字符串 # 则数据为第9字节至结尾 # hashstr = b'\x81\x8c\xc2J\xb3\x0c\xaa/\xdf`\xadj\xc4c\xb0&\xd7-' 12 if payload <= 125: extend_payload_len = None mask = hashstr[2:6] # \xc2J\xb3\x0c\xaa decoded = hashstr[6:] # /\xdf`\xadj\xc4c\xb0&\xd7- # 当位运算结果小于等于125时,则这个数字12就是数据的长度 # 第3-6字节为mask 解密所需字符串 # 则数据为第7字节至结尾 str_byte = bytearray() # mask_len = 4 # [0,1,2,3] for i in range(len(decoded)): # 12 - 0 1 2 3 4 5 6 7 8 9 10 11 byte = decoded[i] ^ mask[i % 4] # i=0 str_byte.append(byte) print(str_byte.decode("utf8"))