1 # -*- coding: UTF-8 -*- 2 from flask import Flask ,request,render_template 3 from geventwebsocket.websocket import WebSocket,WebSocketError 4 from geventwebsocket.handler import WebSocketHandler 5 from gevent.pywsgi import WSGIServer 6 7 import json 8 9 app = Flask(__name__) 10 11 @app.route('/index/') 12 def index(): 13 return render_template('ws.html') 14 15 # user_socket_list = [] 16 user_socket_dict={} 17 18 @app.route('/ws/<username>') 19 def ws(username): 20 user_socket=request.environ.get("wsgi.websocket") 21 if not user_socket: 22 return "请以WEBSOCKET方式连接" 23 24 user_socket_dict[username]=user_socket 25 print(user_socket_dict) 26 27 while True: 28 try: 29 user_msg = user_socket.receive() 30 for user_name,u_socket in user_socket_dict.items(): 31 32 who_send_msg={ 33 "send_user":username, 34 "send_msg":user_msg 35 } 36 37 if user_socket == u_socket: 38 continue 39 u_socket.send(json.dumps(who_send_msg)) 40 41 except WebSocketError as e: 42 user_socket_dict.pop(username) 43 print(user_socket_dict) 44 print(e) 45 46 if __name__ == '__main__': 47 48 http_serve=WSGIServer(("0.0.0.0",5000),app,handler_class=WebSocketHandler) 49 http_serve.serve_forever()
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 7 8 </head> 9 <body> 10 <div class="container-fluid"> 11 <div class="row"> 12 <div class="col-md-4"> 13 <h2 style="text-align: center">激情群聊</h2> 14 <div class="form-group"> 15 <label for="username">你是谁:</label> 16 <input class="form-control" type="text" id="username"> 17 </div> 18 <button id="create_ws" onclick="go_to()" class="btn btn-warning">创建ws连接</button> 19 <div style="width: 100%; height: 300px; border: thick;background-color: cadetblue" id="chat_window" class="input-group"> 20 </div> 21 22 <div class="input-group"> 23 <input type="text" class="form-control" placeholder="" id="send_msg"> 24 <span class="input-group-btn"> 25 <button class="btn btn-default" type="button" id="btn_send">发送消息</button> 26 </span> 27 </div> 28 </div> 29 </div> 30 </div> 31 </div> 32 33 <script type="application/javascript"> 34 35 var ws_url="ws://192.168.31.218:5000/ws/"; 36 var ws =null; 37 38 function go_to() { 39 var username = document.getElementById('username'); 40 ws = new WebSocket(ws_url+username.value); 41 ws.onmessage=function(serv_msg){ 42 msg=JSON.parse(serv_msg.data); 43 //console.log(serv_msg.data); 44 create_chart('y',msg) 45 }; 46 } 47 48 function create_chart(self,content) { 49 if (self == "w"){ 50 self = "right"; 51 var spantag = document.createElement("span"); 52 spantag.innerText= content.send_msg; 53 var spantag1 = document.createElement("span"); 54 spantag1.innerText=':我'; 55 }else{ 56 self = "left"; 57 var spantag = document.createElement("span"); 58 spantag.innerText=content.send_user+':'; 59 60 var spantag1 = document.createElement("span"); 61 spantag1.innerText=content.send_msg; 62 63 } 64 var divtag = document.createElement("div"); 65 divtag.style="text-align:"+self; 66 divtag.appendChild(spantag); 67 divtag.appendChild(spantag1); 68 var char_window = document.getElementById('chat_window'); 69 char_window.appendChild(divtag); 70 71 } 72 document.getElementById("btn_send").addEventListener("click",function () { 73 74 var send_msg=document.getElementById("send_msg"); 75 ws.send(send_msg.value); 76 77 var s_msg = {send_msg:send_msg.value}; 78 create_chart('w',s_msg); 79 send_msg.value=''; 80 }) 81 82 </script> 83 </body> 84 </html>
注意:这里Flask启动时不能使用pycharm启动,应使用命令行启动