I used flask-socketio to implement websocket. I used the eventlet/socketio sleep() function, which supposed to work asynchronously. And this is working in my custom event but when it is under the connect event, it is not working. Here is the reproducible code:
Backend code:
from flask import Flask
from flask_socketio import SocketIO,emit,send
from eventlet import sleep
app = Flask(__name__)
socketio = SocketIO(app)
@app.route('/socket',methods=['POST', 'GET'])
def socket():
"""Landing page."""
return app.send_static_file('websocket_test.html')
@socketio.on('connect', namespace='/test')
def test_connect(auth):
for i in range(10):
emit('my_response',
{'data': str(i)})
##This does not work asynchronously
socketio.sleep(1)
@socketio.on('my_event', namespace='/test')
def test_message(message):
emit('my_response',
{'data': message['dataaa']})
for i in range(10):
# emit('my_response', {'data': str(i)})
emit('my_response',
{'data': message['dataaa']})
##But This work asynchronously
socketio.sleep(1)
if __name__ == '__main__':
socketio.run(app)
websocket_test.html:
<!DOCTYPE HTML>
<html>
<head>
<title>Socket-Test</title>
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdn.socket.io/3.1.3/socket.io.min.js" integrity="sha384-cPwlPLvBTa3sKAgddT6krw0cJat7egBga3DJepJyrLl4Q9/5WLra3rrnMcyTyOnh" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
namespace = '/test';
var socket = io(namespace);
socket.on('connect', function(msg) {
console.log(socket.id);
console.log("connected");
console.log(msg);
$('#log').append('<br>' + $('<div/>').text(msg).html());
});
socket.on('my_response', function(msg, cb) {
$('#log').append('<br>' + $('<div/>').text('logs #' + msg.count + ': ' + msg.data).html());
});
socket.on('message', function(msg, cb) {
$('#log').append('<br>' + $('<div/>').text('logs #' + msg.count + ': ' + msg.data).html());
});
$('form#emit').submit(function(event) {
socket.emit('my_event', {dataaa: $('#emit_data').val()});
return false;
});
$('form#disconnect').submit(function(event) {
socket.emit('disconnect_request');
return false;
});
});
</script>
</head>
<body style="background-color:white;">
<h1 style="background-color:white;">Socket</h1>
<form id="emit" method="POST" action='#'>
<input type="text" name="emit_data" id="emit_data" placeholder="Message">
<input type="submit" value="Send Message">
</form>
<form id="disconnect" method="POST" action="#">
<input type="submit" value="Disconnect Server">
</form>
<h2 style="background-color:white;">Logs</h2>
<div id="log" ></div>
</body>
</html>
The connect event handler is supposed to be used only to decide if a client connection is accepted or rejected. It has to run quickly, because the connection isn't fully established until the connect handler returns.
Move your logic to a normal event, and just use the connect handler for authentication/authorization purposes.