flask + websocket实现简单的单聊和群聊
单聊
1 from flask import Flask,request,render_template 2 from geventwebsocket.handler import WebSocketHandler 3 from gevent.pywsgi import WSGIServer 4 from geventwebsocket.websocket import WebSocket 5 import json 6 7 8 app = Flask(__name__) 9 10 user_socket_dict = {} 11 12 @app.route('/ws/<username>') 13 def ws(username): 14 user_socket = request.environ.get('wsgi.websocket') # type:WebSocket 15 user_socket_dict[username] = user_socket 16 17 print(len(user_socket_dict),user_socket_dict) 18 19 while 1: 20 try: 21 msg = user_socket.receive() 22 msg = json.loads(msg) 23 to_user = msg.get('to_user') 24 content = msg.get('msg') 25 usocket = user_socket_dict.get(to_user) 26 recv_msg = { 27 'from_user':username, 28 'msg':content 29 } 30 31 usocket.send(json.dumps(recv_msg)) 32 except: 33 pass 34 35 @app.route('/chat') 36 def chat(): 37 return render_template('chat.html') 38 39 40 if __name__ == '__main__': 41 http_serv = WSGIServer(('0.0.0.0',5000),app,handler_class=WebSocketHandler) 42 http_serv.serve_forever() 43 44 python代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>单聊</title> 6 </head> 7 <body> 8 <input type="text" id="username"> 9 <button onclick="open_ws()">连接服务器</button> 10 <p>给：<input type="text" id="to_user"></p> 11 <p>发送消息：<input type="text" id="msg"></p> 12 <button onclick="send_msg()">发送</button> 13 <div id="chat" style="width: 500px; height: 500px;"></div> 14 15 <script type="text/javascript"> 16 var ws = null; 17 function open_ws() { 18 var username = document.getElementById('username').value; 19 ws = new WebSocket('ws://192.168.19.34:5000/ws/' + username); 20 ws.onmessage = function (data) { 21 var msg = JSON.parse(data.data); 22 var ptag = document.createElement('p'); 23 ptag.innerText = msg.from_user + ':' + msg.msg; 24 document.getElementById('chat').appendChild(ptag); 25 }; 26 } 27 28 function send_msg() { 29 var msg = document.getElementById('msg').value; 30 var to_user = document.getElementById('to_user').value; 31 var send_obj = {to_user:to_user,msg:msg}; 32 ws.send(JSON.stringify(send_obj)); 33 } 34 </script> 35 </body> 36 37 38 </html> 39 40 页面
群聊
1 #!/usr/bin/env python 2 # -*- coding=utf-8 -*- 3 from flask import Flask,request,render_template 4 from geventwebsocket.handler import WebSocketHandler 5 from gevent.pywsgi import WSGIServer 6 from geventwebsocket.websocket import WebSocket 7 import json 8 9 app = Flask(__name__) 10 11 user_socket_list = [] 12 13 @app.route('/ws') 14 def ws(): 15 user_socket = request.environ.get('wsgi.websocket') # type:WebSocket 16 user_socket_list.append(user_socket) 17 print(len(user_socket_list),user_socket_list) 18 while 1: 19 try: 20 msg = user_socket.receive() 21 for usocket in user_socket_list: 22 if usocket != user_socket: 23 usocket.send(msg) 24 except: 25 user_socket_list.remove(user_socket) 26 27 28 @app.route('/chat') 29 def chat(): 30 return render_template('ws.html') 31 32 if __name__ == '__main__': 33 http_serv = WSGIServer(('0.0.0.0',5000),app,handler_class=WebSocketHandler) 34 http_serv.serve_forever() 35 36 Python代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <p>发送消息：<input type="text" id="msg"></p> 9 <button onclick="send_msg()">发送</button> 10 <div id="chat" style="width: 500px;height: 500px;"></div> 11 <script type="text/javascript"> 12 var ws = new WebSocket('ws://192.168.19.34:5000/ws'); 13 ws.onmessage = function (data) { 14 var ptag = document.createElement('p'); 15 ptag.innerText = data.data; 16 document.getElementById('chat').appendChild(ptag); 17 }; 18 19 function send_msg() { 20 var msg = document.getElementById('msg').value; 21 ws.send(msg) 22 } 23 </script> 24 </body> 25 </html> 26 27 页面
