socketio emit not working from gpio callback - raspberry-pi

Question

I am pulling my hair out trying to figure out what I am doing wrong.
Server shows emit is being sent, but the browser never gets it. After about a minute, the client disconnects and re-connects.
However, emit after on.connect works perfect. It's almost like the client has to send the server a request and immediately get a response to work.
For some reason, StackOverflow wants me to type more info because it looks like all code, but I'm not really sure what else I can add. I googled and tried different versions and tutorials to get this working, and I believe it should be good. It must be a typo somewhere.
Okay, that still isn't enough detail, so let's go through the entire process.
I have a Raspberry Pi 3 with an SD card, running Bullseye x64 that is up to date.
I am also using a logic level shifter to drive a few 5v transistors that turn on 4 different LEDs on 4 different buttons. The buttons are grounded when pressed, and using the Raspberry Pi's internal pull up resistor. There are also 2 relays that operate solenoid air valves, the relays are separated from the Raspberry Pi/ logic level with an optocoupler.
Essentially, I am trying to use flask-socket io to display a question on a tablet. The answer is then entered using 1 of the 4 colored buttons. If the answer is wrong then relays/transistors are activated to let air out. If the answer is correct then different relays/transistors are activated to trigger the compressor and build pressure again.
The LEDs, buttons presses, and compressors all work. I just can't seem to get socketio to receive emit messages outside of an on event.
As a workaround, I may just have Javascript poll for button status every second, until I can figure out what I'm doing wrong. At least I can get that part to work.
Sorry for the long intro. Maybe it helps, to me it seems like a lot of boring text to read through while I'm sure someone with more knowledge only needed to look at my code to see what was wrong.
Nope, still not enough text.... so let's see. I'm new to Python, and not sure what else to put in here. Actually, I'll write more boring stuff at the bottom so you don't actually have to read any of this.
Raspberry Pi3 Bullseye x64
Dependancies
bidict==0.22.0
cachelib==0.9.0
click==8.1.3
Flask==2.2.1
Flask-Login==0.6.2
Flask-Session==0.4.0
Flask-SocketIO
importlib-metadata==4.12.0
itsdangerous==2.1.2
Jinja2==3.1.2
MarkupSafe==2.1.1
python-engineio
python-socketio
six==1.11.0
Werkzeug==2.2.1
zipp==3.8.1
RPi.GPIO==0.7.1
Python code:
from flask import Flask, render_template, request
from flask_socketio import SocketIO, emit
from random import random
from threading import Lock
from datetime import datetime
import RPi.GPIO as GPIO
import time
"""
define gpio class
this holds all info for pins
"""
class rio:
def __init__(self, label, pin, state, btnPin=None):
self.label = label
self.pin = pin
self.state = state
self.btnPin = btnPin
self.checking = False
self.timeLast = time.time()
GPIO.setup(self.pin, GPIO.OUT)
if (btnPin!=None):
GPIO.setup(btnPin,GPIO.IN,pull_up_down=GPIO.PUD_UP)
GPIO.add_event_detect(self.btnPin, GPIO.FALLING, callback=self.stateChange)
GPIO.output(self.pin, self.state)
def stateChange(self,channel):
global count
duration = time.time() - self.timeLast
self.timeLast = time.time()
print(self.label + " was pressed")
count+=1
print("Sending counter event...")
socketio.emit('updateSensorData', {'value': count, "date": get_current_datetime()})
"""
Define Globals
"""
count = 0
"""
label and define what gpio
we want to use
"""
GPIO.setmode(GPIO.BCM) #enable GPIO BCM Module
yellow = rio("yellow", 22, GPIO.LOW, 14)
green = rio("green", 10, GPIO.LOW, 16)
blue = rio("blue", 9, GPIO.LOW, 20)
red = rio("red", 11, GPIO.LOW, 21)
compressor = rio("compressor", 13, GPIO.LOW)
LogicShift = rio("shifter", 26, GPIO.HIGH)
valve1 = rio("valve in", 27, GPIO.HIGH)
valve2 = rio("valve out", 17, GPIO.HIGH)
"""
create websocket
"""
app = Flask(__name__)
app.config['SECRET_KEY'] = 'donsky!'
socketio = SocketIO(app, cors_allowed_origins='*', logger=True)
"""
Get current date time
"""
def get_current_datetime():
now = datetime.now()
return now.strftime("%m/%d/%Y %H:%M:%S")
"""
Serve root index file
"""
#app.route('/')
def index():
return render_template('index.html')
"""
Decorator for connect
"""
#socketio.on('connect')
def connect():
global thread
print('Client connected')
emit('after connect', {'data':'Lets dance'})
"""
Decorator for disconnect
"""
#socketio.on('disconnect')
def disconnect():
print('Client disconnected', request.sid)
if __name__ == '__main__':
# Access app in all IP not just localhost
socketio.run(app, host="0.0.0.0")
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Synchronized</title>
<link rel="stylesheet" href='/static/style.css' />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<!--script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.3/socket.io.js"></script-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.4/socket.io.js" integrity="sha512-aMGMvNYu8Ue4G+fHa359jcPb1u+ytAF+P2SCb+PxrjCdO3>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// sending a connect request to the server.
var socket = io.connect('http://10.100.180.15:5000');
// An event handler for a change of value
$('#btn1').on('input', function(event) {
console.log('button changed');
socket.emit('Button value changed', {
who:$(this).attr('id'),
data: $(this).val()
});
return false;
});
socket.on('after connect', function(msg){
console.log('After connect', msg);
});
socket.on('update value', function(msg) {
console.log('Slider value updated');
$('#'+msg.who).val(msg.data);
});
socket.on('message', function(msg) {
console.log(msg);
});
socket.on('updateSensorData', function (msg) {
console.log('Received sensorData :: ' + msg.date + ' :: ' + msg.value);
$('#current-count').text(msg.value);
});
});
</script>
</head>
<body>
<h1>Data:</h1>
<div class="">
<h1>Demo</h1>
<form class="mt-5">
<div class="form-group">
<label for"formControlRange">Btn1</label>
<input type="checkbox" class"form-control-range sync" id="btn1" value="{{btn1}}">
</div>
</form>
</div>
<button class="btn-close btn btn-sm">×</button>
<div class="container">
<div class="hero">
<h1 class="title">Real-Time Conveyor Counter Using Raspberry Pi</h1>
<div class="counter">
<h1 id="current-count">0</h1>
</div>
</div>
</div>
</body>
</html>
I tried different dependencies, and different JavaScript versions of socketio, but all of them respond the same way. The browser is Chrome 107.0.5304.110. Safari responds the same way, as well.