web聊天室（Flask-WebSocket实现）

 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()

app.py

 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>

ws.html

注意：这里Flask启动时不能使用pycharm启动，应使用命令行启动

web聊天室（Flask-WebSocket实现）

猜你喜欢