from flask import Flask, render_template, request from geventwebsocket.handler import WebSocketHandler from geventwebsocket.websocket import WebSocket from gevent.pywsgi import WSGIServer app = Flask(__name__) user_socket_list = [] @app.route("/ws") def ws(): user_socket = request.environ.get("wsgi.websocket") #type:WebSocket #可以让user_socket变量当成WebSocket，可以点出方法 #只有当ws协议访问时原数据中才有wsgi.websocket if user_socket: user_socket_list.append(user_socket) print(len(user_socket_list), user_socket_list) while 1: msg = user_socket.receive() for u_socket in user_socket_list: if u_socket == user_socket: continue try: # 因为当一个连接断开时，我们再循环这个列表会报一个连接已死亡的错 u_socket.send(msg) except: continue @app.route("/") def index(): return render_template("ws.html") if __name__ == '__main__': http_serv = WSGIServer(("0.0.0.0", 9527), app, handler_class=WebSocketHandler) http_serv.serve_forever()
前端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input id="msg" type="text"><button onclick="send_msg()">发送</button> <div id="chat_list" style="500px;height:500px;"></div> </body> <script type="application/javascript"> var ws = new WebSocket("ws://172.20.10.2:9527/ws"); #实例化一个websocket对象，在加载时就会建立连接 ws.onmessage = function (data) { #成功的回调函数 console.log(data.data); var recv_msg = data.data; var ptag = document.createElement("p"); ptag.innerText = recv_msg; document.getElementById("chat_list").appendChild(ptag); }; function send_msg() { var msg = document.getElementById("msg").value; ws.send(msg) } </script> </html>
上面是一个群聊，下面是一个升级版的私聊（双方不能掉线）
import json from flask import Flask, render_template, request from geventwebsocket.handler import WebSocketHandler from geventwebsocket.websocket import WebSocket from gevent.pywsgi import WSGIServer app = Flask(__name__) # user_socket_list = [] user_socket_dict = {} @app.route("/ws/<username>") def ws(username): user_socket = request.environ.get("wsgi.websocket") #type:WebSocket if user_socket: user_socket_dict[username] = user_socket print(len(user_socket_dict), user_socket_dict) while 1: msg = user_socket.receive() # 收件人 消息 发件人 msg_dict = json.loads(msg) print(msg_dict) msg_dict["from_user"] = username to_user = msg_dict.get("to_user") u_socket = user_socket_dict.get(to_user) #type:WebSocket u_socket.send(json.dumps(msg_dict)) @app.route("/") def index(): return render_template("ws.html") if __name__ == '__main__': http_serv = WSGIServer(("0.0.0.0", 9527), app, handler_class=WebSocketHandler) http_serv.serve_forever()
前端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="username"><button onclick="login()">登录聊天室</button> 给 <input type="text" id="to_user">发送:<input id="msg" type="text"><button onclick="send_msg()">发送</button> <div id="chat_list" style="500px;height:500px;"></div> </body> <script type="application/javascript"> var ws = null; function login() { var username = document.getElementById("username").value; ws = null; ws = new WebSocket("ws://172.20.10.2: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 }; console.log(send_str); console.log(ws); ws.send(JSON.stringify(send_str)); } </script> </html>