基于flask框架,使用websocket实现一对一聊天室功能-飞外

from flask import Flask,request,render_templatefrom geventwebsocket.handler import WebSocketHandlerfrom gevent.pywsgi import WSGIServerimport jsonfrom 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.run("0.0.0.0",8000,debug=True) http_serve = WSGIServer(("0.0.0.0",8000),app,handler_ >
meta charset="UTF-8" meta content="width=device-width, initial-scale=1" title 多人聊天 /title /head body 您的昵称: input {# nick 发送着 #} button span >"openws()" 进入聊天室 /button 给 input {# to_user 接收者#} input button span >"send_msg()" 点击发送 /button div /div
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)
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

注意:

在执行程序的时候,先进入聊天室,才能给指定的聊天人发送消息