后端代码：
from flask import Flask,request,render_template from geventwebsocket.handler import WebSocketHandler from gevent.pywsgi import WSGIServer import json from geventwebsocket.websocket import WebSocket # 做语法提示用的 app = Flask(__name__) # type: Flask user_socket_dict = {} # b"{from_user:jinwangba ,to_user:yinwangba,msg:"doushidawangba"}" @app.route("/ws/<user_id>") # flask的动态路由功能 def web_sck(user_id): # print(request.environ) # 打印的原始请求数据 # 这个东西其实就是WebSocket的长链接 user_socket = request.environ.get("wsgi.websocket") # type: WebSocket if user_socket: user_socket_dict[user_id]= user_socket print(len(user_socket_dict),user_socket_dict) while 1: msg = user_socket.receive() # 接收客户端传入数据 (前端穿过来的数据的byts类型) # 在浏览器中content的中输入ws ，readyState如果为1 表示连接成功，如果等于3表示，连接成功后又断开了连接，0 表示没有开启 print(msg) msg_dict = json.loads(msg) # 反序列化后的字典 to_usocket = user_socket_dict.get(msg_dict.get("to_user")) to_usocket.send(json.dumps({"from_user":user_id,"to_user":msg_dict.get("to_user"),"msg":msg_dict.get("msg")})) @app.route("/") def index(): return render_template("web_sckone.html") if __name__ == "__main__": # app.run("0.0.0.0",8000,debug=True) http_serve = WSGIServer(("0.0.0.0",8000),app,handler_class=WebSocketHandler) http_serve.serve_forever() # 启动这个web-server请求
前端代码：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>多人聊天</title> </head> <body> <p> 您的昵称： <input type="text" id="nick"> {# nick 发送着 #} <button onclick="openws()">进入聊天室</button> </p> <p> 给<input type="text" id="to_user"> {# to_user 接收者#} <input type="text" id="message"> <button onclick="send_msg()">点击发送</button> </p> <div id="msg_list" style=" 500px"> </div> <script type="application/javascript"> var ws = null; {#ws.onopen = function(){ //#} {#ws.send("hello")#} {# }; #} function openws() { var nick = document.getElementById("nick").value; ws = new WebSocket("ws://192.168.12.38:8000/ws/" + nick); // 指定发送的链接地址 // 前端接收消息 ws_info 接收数据的容器 ws.onmessage = function (ws_info) { console.log(ws_info.data); //后端返回的响应数据，存放在ws_info下的data中 ,此时返回的时byts类型的数据 var msg_obj = JSON.parse(ws_info.data); // 将数据转化成字符串类型 console.log(msg_obj) ; var ptag = document.createElement("p"); //创建一个p标签 ptag.innerText = msg_obj.from_user + ":" + msg_obj.msg;//将data中的数据存放标签中 document.getElementById("msg_list").appendChild(ptag) }; } function send_msg() { var msg = document.getElementById("message").value; var from_user = document.getElementById("nick").value; var to_user = document.getElementById("to_user").value; var ptag = document.createElement("p"); //创建一个p标签 ptag.style.cssText = "text-align: right;"; ptag.innerText = msg + ":" + from_user;//将data中的数据存放标签中 document.getElementById("msg_list").appendChild(ptag); var msg_obj = { msg: msg, from_user: from_user, to_user: to_user, }; ws.send(JSON.stringify(msg_obj)); // 拿到前端输入的内容，向后端发送 } </script> </body> </html>
注意：
在执行程序的时候，先进入聊天室，才能给指定的聊天人发送消息