目的:实现服务端像客户端主动发送实时信息
例子:服务端主动向客户端发送100以内的随机数
环境准备
python 3
Flask库
flask_socketio库
服务端
demo_flask.py
import random from flask import Flask, render_template, sessions, request from flask_socketio import SocketIO, emit from threading import Lock async_mode = None app = Flask(__name__) app.config['SECRET_KEY'] = 'secret!' socketio = SocketIO(app, async_mode=async_mode) thread = None thread_lock = Lock() """ 对app进行一些路由设置 """ @app.route('/') def index(): return render_template('index.html', async_mode=socketio.async_mode) def background_thread(): while True: socketio.sleep(100) socketio.emit('my_response', {'data': 'Server generated event'}, namespace='/test') """ 对socketio进行一些监听设置 """ @socketio.on('connect', namespace='/test') def mtest_connect(): global thread with thread_lock: if thread is None: thread = socketio.start_background_task(background_thread) emit('my_response', {'data': 'Connected', 'count': 0}) @socketio.on('my_event', namespace='/test') def mtest_message(message): while True: i = random.randint(1,100) emit('my_response',{'data': message['data'], "num": i}) socketio.sleep(1) if __name__ == '__main__': socketio.run(app, debug=True, host='0.0.0.0', port=5000)
前端页面
index.html
<!DOCTYPE HTML> <html> <head> <title>Flask-SocketIO Test</title> <script src="/code/jquery-3.3.1.min.js" ></script> <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js" integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function() { namespace = '/test'; var socket = io(namespace); socket.on('connect', function() { socket.emit('my_event', {data: 'I\'m connected!'}); }); socket.on('my_response', function(msg) { $("#test_log").val(msg.data); $("#test_data").val(msg.num); }); }); </script> </head> <body> <h2>测试socketio</h2> <h3>接收msg:</h3> <input type="text" id="test_log"> <h3>接收num:</h3> <input type="text" id="test_data"> </body> </html>