1.前端HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div style=" 600px;"> <input type="text" id="username"> <button onclick="login()">登录聊天室</button> </div> <br> <div style=" 600px;"> 给：<input type="text" id="to_user"> 发送：<input type="text" id="msg"> <button onclick="send_msg()">发送</button> </div> <br> <div id="chat_list" style=" 600px;height: 300px;"></div> </body> <script type="application/javascript"> var ws = null; function login() { var username = document.getElementById("username").value; // 打印当前登录用户名 console.log(username); // 注意ws/，斜线不要忘记写 ws = new WebSocket("ws://192.168.13.21:5300/ws/" + username); // 打印创建的socket链接 console.log(ws); 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 }; ws.send(JSON.stringify(send_str)); } </script> </html>
2.后端PYTHON
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 = {} @app.route("/ws/<username>") def ws(username): print('当前登录账号:',username) user_socket = request.environ.get("wsgi.websocket") #type:WebSocket if user_socket: user_socket_dict[username] = user_socket else: pass while 1: msg = user_socket.receive() msg_dict = json.loads(msg) 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",5300),app,handler_class=WebSocketHandler) http_serv.serve_forever()
需要借助2个浏览器实现