socket.io client doens't catch the events from flask-socketio server - flask

Question

I have a very basic setup
flask-socketio app
from flask import Flask, render_template, request
from flask_socketio import SocketIO
logger = logging.getLogger('mainLogger')
level = logging.DEBUG
logger.setLevel(level)
app = Flask(__name__)
socketio = SocketIO(app, manage_session=True, cors_allowed_origins="*")
#app.route('/')
def homepage():
return render_template(
"test.html"
)
# Tfrom flask import Flask, render_template, request
from flask_socketio import SocketIO
app = Flask(__name__)
socketio = SocketIO(app, manage_session=True, cors_allowed_origins="*")
#app.route('/')
def homepage():
return render_template(
"test.html"
)
#app.route('/testMessages', methods=['GET'])
def testMessages():
_session = request.args.get('session')
print(_session)
socketio.emit('message', {'session': _session})
return "OK"est function to validate multiple concurrent calls
#app.route('/testMessages', methods=['GET'])
def testMessages():
_session = request.args.get('session')
print(_session)
socketio.emit('message', {'session': _session})
return "OK"
if __name__ == '__main__':
socketio.run(app)
and the test html with socket.io client
<button id="testMessage" class="float-right btn btn-wok my-2 my-sm-0 btn-sm ml-1 mt-2" type="submit" >Run Test</button>
<footer>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.4/socket.io.js"></script>
</footer>
<script>
var url=document.URL, shortUrl=url.substring(0,url.lastIndexOf("/"));
var sessionId = "1234567890";
function testMessages(){
console.log('TESTMESSAGES')
$.getJSON(
shortUrl + '/testMessages?session=' + sessionId, {}, function(data) {
console.log('WOW')
console.log(data)
}
);
return false;
}
$(function() {
$('#testMessage').on('click', function() {
testMessages();
});
});
$(document).ready(function(){
console.log('DOCUMENT READY')
const socket = io("http://localhost:5000/socket.io");
socket.on("connect", () => {
console.log(socket.disconnected); // false
});
socket.on("disconnect", (reason) => {console.log(`disconnect ${reason}`)})
socket.on('message', function(message) {
console.log("Received message: " + message);
});
console.log(socket);
});
</script>
it's just the button that hits /testMessages endpoint.
What I see:
when I connect to the http://127.0.0.1:5000/ socket says it's properly connected.
'connect' event is properly captured.
when click on the button, that function on server is successfully called.
The issue is that calling socketio.emit(, ) is not seen on the website like at all.
When server is shut down the 'disconnect' event is properly captured.
I'm struggling to understand what is not working
[UPDATE] Server side logs.
127.0.0.1 - - [11/Apr/2021 20:18:49] "POST /socket.io/?EIO=4&transport=polling&t=NZ2A64b&sid=HkWPPEUTctR_6I7TAAAA HTTP/1.1" 200 -
127.0.0.1 - - [11/Apr/2021 20:18:49] "GET /socket.io/?EIO=4&transport=polling&t=NZ2A64c&sid=HkWPPEUTctR_6I7TAAAA HTTP/1.1" 200 -
127.0.0.1 - - [11/Apr/2021 20:18:52] "GET /socket.io/?EIO=4&transport=polling&t=NZ2A6tn HTTP/1.1" 200 -
127.0.0.1 - - [11/Apr/2021 20:18:52] "POST /socket.io/?EIO=4&transport=polling&t=NZ2A6vW&sid=PtEmmdsmPR908dcrAAAC HTTP/1.1" 200 -
127.0.0.1 - - [11/Apr/2021 20:18:52] "GET /socket.io/?EIO=4&transport=polling&t=NZ2A6vY&sid=PtEmmdsmPR908dcrAAAC HTTP/1.1" 200 -
127.0.0.1 - - [11/Apr/2021 20:18:54] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [11/Apr/2021 20:18:55] "GET /socket.io/?EIO=4&transport=polling&t=NZ2A7Q- HTTP/1.1" 200 -
127.0.0.1 - - [11/Apr/2021 20:18:55] "POST /socket.io/?EIO=4&transport=polling&t=NZ2A7SR&sid=IdQeK-qNbpEyBLx7AAAE HTTP/1.1" 200 -
127.0.0.1 - - [11/Apr/2021 20:18:55] "GET /socket.io/?EIO=4&transport=polling&t=NZ2A7SS&sid=IdQeK-qNbpEyBLx7AAAE HTTP/1.1" 200 -
1234567890
message was received!
emitting event "message" to all [/]
client side logs in the browser console
(index):35 DOCUMENT READY
(index):44 Socket {ids: 0, acks: {…}, receiveBuffer: Array(0), sendBuffer: Array(0), flags: {…}, …}
(index):19 TESTMESSAGES