Flask-Websocket实现服务端即时推送信息到web前端

 

 1 from flask import Flask, request,render_template
 2 from geventwebsocket.websocket import WebSocket
 3 from gevent.pywsgi import WSGIServer
 4 from geventwebsocket.handler import WebSocketHandler
 5 
 6 
 7 user_socket_list = []
 8 app = Flask(__name__)
 9 
10 @app.route('/')
11 def index():
12     return render_template('index.html')
13 
14 @app.route('/ws')
15 def ws():
16     user_socket = request.environ.get('wsgi.websocket') # type:WebSocket  
17     # 建立连接
18     if user_socket:
19         user_socket_list.append(user_socket) # 将建立的连接添加进一个列表
20         print(len(user_socket_list))
21     else:
22         print('请用websocket链接')
23         return render_template('index.html',message='请用websocket链接')
24     while True:
25         msg = user_socket.receive()
26         print(msg)
27         for socket in user_socket_list:
28                 socket.send(msg)
29                 
30 if __name__ == '__main__':
31     http_serv = WSGIServer(('0.0.0.0',5000),app,handler_class=WebSocketHandler)
32     http_serv.serve_forever()
APP.PY
 
 1 DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Titletitle>
 7 head>
 8 
 9 <body>
10     <h1>
11         <dvi id='idMsg'>群聊dvi>
12     h1>
13     <input type='button' value='Test' onclick='test()'>
14 
15     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">script>
16     <script>
17         var ws = new WebSocket('ws://127.0.0.1:5000/ws');
18         ws.onmessage = function(data) {
19             var jdata = JSON.parse(data.data);
20             $('#idMsg').html(jdata.user + ': ' + jdata.text);
21         }
22 
23         function test() {
24             mydict = {
25                 'user': 'myname',
26                 'text': 'mytext',
27             };
28             jdata = JSON.stringify(mydict);
29             ws.send(jdata)
30         }
31     script>
32 body>
33 
34 html>
index.html

 

你可能感兴趣的:(Flask-Websocket实现服务端即时推送信息到web前端)