一，带昵称的群聊
#!/usr/bin/env python # -*- coding:utf8 -*- import json from flask import Flask, request, render_template from geventwebsocket.websocket import WebSocket from gevent.pywsgi import WSGIServer from geventwebsocket.handler import WebSocketHandler app = Flask(__name__) user_socket_dict = {} @app.route("/") def index(): return render_template("index_nickname.html") @app.route("/ws/<nick_name>") # ws://127.0.0.1:8000/ws def ws(nick_name): # print(request.environ) # print(request.environ.get("wsgi.websocket")) # 链接 <geventwebsocket.websocket.WebSocket object at 0x000001A7380D0C78> user_socket = request.environ.get("wsgi.websocket") # type:WebSocket # 写上这个，代码可以有提示 if user_socket: user_socket_dict[nick_name] = user_socket else: return render_template("index.html", msg="请使用web_socket链接") while 1: msg = user_socket.receive() for user_name, u_socket in user_socket_dict.items(): # type:WebSocket if user_socket != u_socket: # 不给自己发消息 try: u_socket.send(json.dumps({"nick_name": nick_name, "msg": msg})) # 发送人是 except Exception as e: continue if __name__ == '__main__': http_server = WSGIServer(("127.0.0.1", 8000), app, handler_class=WebSocketHandler) # 使用WSGIServer，而不是flask自带的werkzeug,处理, 如果本次请求是ws开头的,就交给WebSocketHandler # 处理数据(给environ中添加websocket相关的键值对),处理完之后交给app http_server.serve_forever() # app.run()
templates:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> {{ msg }} <h1>群P开始了</h1> 输入你的昵称:<input type="text" id="nick_name"> <button onclick="createWebsocket()">链接群聊</button> 编辑消息:<input type="text" id="msg_s"> <button onclick="send_msg()">发送</button> <div style="border: 2px solid; 500px;height: 800px;" id="text_div"> </div> <script> var ws = ""; var text_div = document.getElementById("text_div"); var nickName = ""; function createWebsocket() { let nick_name = document.getElementById("nick_name").value; nickName = nick_name; let w_s = new WebSocket("ws://127.0.0.1:8000/ws/" + nickName); // 把名称当作url参数发过去 ws = w_s; console.log("ws://127.0.0.1:8000/ws/" + nickName); ws.onmessage = function (data) { var obj_data = JSON.parse(data.data); console.log(data.data); var p_ele = '<p>'+ obj_data.nick_name + ':'+ obj_data.msg +'</p>'; text_div.innerHTML += p_ele }} function send_msg() { var msg_s = document.getElementById("msg_s").value; let p_ele_s = "<p style='text-align: right'>" + msg_s + ':' + nickName + "</p>"; text_div.innerHTML += p_ele_s; ws.send(msg_s); } </script> </body> </html>
二，带昵称的单聊
#!/usr/bin/env python # -*- coding:utf8 -*- import json from flask import Flask, request, render_template from geventwebsocket.websocket import WebSocket from gevent.pywsgi import WSGIServer from geventwebsocket.handler import WebSocketHandler app = Flask(__name__) user_socket_dict = {} @app.route("/") def index(): return render_template("index_nickname_danren.html") @app.route("/ws/<nick_name>") # ws://127.0.0.1:8000/ws def ws(nick_name): # print(request.environ) # print(request.environ.get("wsgi.websocket")) # 链接 <geventwebsocket.websocket.WebSocket object at 0x000001A7380D0C78> user_socket = request.environ.get("wsgi.websocket") # type:WebSocket # 写上这个，代码可以有提示 if user_socket: user_socket_dict[nick_name] = user_socket else: return render_template("index.html", msg="请使用web_socket链接") while 1: msg = user_socket.receive() msg_dict = json.loads(msg) to_user = msg_dict.get('to_user') msg = msg_dict.get("msg") to_user_socket = user_socket_dict.get(to_user) # type:WebSocket to_user_socket.send(json.dumps({"nick_name": nick_name, "msg": msg})) if __name__ == '__main__': http_server = WSGIServer(("127.0.0.1", 8000), app, handler_class=WebSocketHandler) # 使用WSGIServer，而不是flask自带的werkzeug,处理, 如果本次请求是ws开头的,就交给WebSocketHandler # 处理数据(给environ中添加websocket相关的键值对),处理完之后交给app http_server.serve_forever() # app.run()
templates:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> {{ msg }} <h1>群P开始了</h1> 输入你的昵称:<input type="text" id="nick_name"> <button onclick="createWebsocket()">链接群聊</button> <p>与：<input type="text" id="to_user">轻声细语</p> 编辑消息:<input type="text" id="msg_s"> <button onclick="send_msg()">发送</button> <div style="border: 2px solid; 500px;height: 800px;" id="text_div"> </div> <script> var ws = ""; var text_div = document.getElementById("text_div"); var nickName = ""; function createWebsocket() { let nick_name = document.getElementById("nick_name").value; nickName = nick_name; let w_s = new WebSocket("ws://127.0.0.1:8000/ws/" + nickName); // 把名称当作url参数发过去 ws = w_s; console.log("ws://127.0.0.1:8000/ws/" + nickName); ws.onmessage = function (data) { var obj_data = JSON.parse(data.data); console.log(data.data); var p_ele = '<p>'+ obj_data.nick_name + ':'+ obj_data.msg +'</p>'; text_div.innerHTML += p_ele }} function send_msg() { var msg_s = document.getElementById("msg_s").value; var to_user = document.getElementById("to_user").value; let p_ele_s = "<p style='text-align: right'>" + msg_s + ':' + nickName + "</p>"; text_div.innerHTML += p_ele_s; var msg_obj = JSON.stringify({to_user:to_user,msg:msg_s}); ws.send(msg_obj); } </script> </body> </html>