Communicating your Flask server and app in real-time
Context
Flask is an extremely convenient tool to host Python scripts on the web, its scope is incredibly broad and a myriad of applications can be easily created with it.
However, it certainly has its limitations if you want to do something more complex. Fortunately for us, open-source has done a great job in overcoming those barriers so that you don’t have to reinvent the wheel.
The Problem
This blog’s topic is about communicating your Flask server and application in real-time, i.e. without strictly submitting anything. See, the conventional way of sending data to our server is to have the user submit some sort of form in our app. Although that’s certainly the easiest way to communicate, it’s inconvenient if you are aiming to send and update values repeatedly.
There are certain instances in which you want to retrieve information about your app in real-time, or maybe you expect a value to be changed in the app constantly; you don’t want to ask the user to hit that ‘submit’ over and over again. Here’s where Network Sockets come into action.
The Solution
In a nutshell, Sockets is the name given to the endpoints of the communication that allows two-way and real-time information exchange between an app and its server. Read more.
Flask uses the flask-SocketIO for this type of communication.
In order to proceed, make sure you have the latest version of Flask downloaded. Then, follow the instructions on how to install flask-SocketIO on your computer. Additionally, try to ensure that you have the respective requirements installed and check the version compatibility chart for reference.
Note: If you encounter any package-related problem during the execution of the code, refer to the aforementioned sources.
Demonstration
Note: This walkthrough does not cover HTML/JS nor Flask concepts.
Let’s demonstrate these ideas. Say we want to create an application that sends the real-time value of a range slider to our server.
An example: Adjust the volume/intensity of a device through your webpage!
Onto Python
Let’s begin by writing our Flask app. Open up your app.py file and initialize a normal Flask app. However, with some extra nuances.
Import the flask-SocketIO library (Line 2). Then initialize your server socket and pass your flask app to it (Line 5). Similar to Line 7–10 which map specific URL’s to the associated function, we need some kind of event listener for our socket. These are known as message listeners.
@socketio.on("message_name")In line 11 we set the listener to an ‘update’ message, which means it will wait for a message named ‘update’ from the application. Once received, it will run its function. This function will have a parameter associated with the information passed. We’ll see this further in a while.
Line 12–13 receive the information from the application in the ‘data’ variable. We’ll just print that value for now. Note that it is a dictionary, we’ll see why in a while.
Ultimately, note that you will run your app through the socket (Line 16).
Onto HTML
Let’s begin with some standard HTML code that includes a Bootstrap’s slider.
Note that we are importing the latest versions of JQuery and the SocketIO dependencies to the code in Lines 8,10.
Now, here comes the SocketIO stuff.
Open a script block right at the end of the body. Then initialize your app’s socket as per Line 2 (this is possible because we imported SocketIO previously).
Now let’s write a function that will send the message ‘update’ (remember?) to the server’s socket through the .emit method. The format is as follows:
var socket = io()
socket.emit("message_name", {data to send in dictionary})Carefully look into the ‘send’ function since it is the backbone of the project. We are emitting from the socket a message named ‘update’ which contains the dictionary {‘value’ : current value of range slider}. Easy!
Note: #myRange1 is the name of the slider. (See the previous snippet!)
Finally, since we want to send this value over and over again, let’s use JavaScript’s setInterval to call the function ‘send’ each 1000ms (i.e. each second).
And…voilà!!
As you can see, we have successfully managed to communicate our app and server in real-time. The things you can create with this are endless. Explore!
Visit my GitHub repo to find the code used in this post.
