The jQuery document ready callback is where we set up the event handler for the HTML slider:
$(document).ready(function(){
// Event listener for Slider value changes.
$("input[type=range].brightnessLevel")
.on('input', function(){
level = $(this).val();
payload = {"level": level};
socket.emit('led', payload); // (6)
});
});
</script>
</head>
On line (6), we see how to emit a message in JavaScript. The call to socket.emit('led', payload) emits a message to the Python server with the brightness level we want to apply to our LED.
It's the Python @socketio.on('led') handler that receives this message and changes the LED's brightness.
If you review this Python handler, you will notice the line:Â emit("led", state, broadcast=True). This...