Display Real Time Updates Using Python, Flask and Websocket

hi welcome to Don's key Tech I'm here to show you how I created my real-time display of sensor values using python plus and websockets but you can see these sensor values are coming from my plus websocket server using the black socket i o package I am using at JS in displaying my dummy temperature values and I have configured my server to send websocket messages every one second but nothing would stop you from sending it on a millisecond basis as I am using websocket so there is Middle overhead if we take a look at the console log right then you would see the locks of the websockets messages that I am displaying let us go over the code if you'd like to know how I did this let's proceed now to inspecting the code the code for my project is which you can see also in the description of this video you can either download or clone this Repository and open it with your favorite IDE I have used Visual Studio code in developing this project let's go over each line of the code for you to understand how this works by the way the steps on how to run from the project is in this page also so you can go over it so that you can follow or set up a project so if I open my visual studio code then you would see there are only a handful of files to look at the very first one that you will take a look is the most important which is the sensor of the UI file horse answer app that play file actually contains the Plus application and the websocket server configuration using the plus library but you can see we are running our project using socket IO that run inside the visual Plus application run configuration also there are decorate decorators associated with our plastic plus socket IO which is in the connect and in the disconnect a metal but you can create your own as well so but for this project we don't need additional decorators that we will just be pushing our sensor values into our HTML page everything is encapsulated in this background test Luke runs the very first time a websocket client has connected if we take a look at this background thread you would see that it does Generate random values and then after generating it calls the socket IO that emits using this particular name which is a Bluetooth sensor data now this this update sensor data is important for us to know how the website client will respond and then after which it will sleep for one second and that's all for how our heads are up that line works so let's now proceed with the inspection of the index.html page if we take a look at the index that each HTML page you would see that I'm using the parving libraries in making this HTML page works I have the jQuery for the JavaScript and then the socket IO JavaScript library also and for the charting mechanism I'm using the chart.js I have used this minimal Library called the min.css for The Styling purposes and the most important part of this uh index HTML page is this particular V but you can see there is just one element which is an HTML pipe canvas which is used to display the line chart of our project and that's all about regarding the index.html page if we take a look at the app.js it is the part of the application that encapsulates the logic of retrieving the websocket messages coming from our website and server so let's take a look first on how this code works so uh I have here the Declaration of my chart.js so I have just one data set which is for the temperature and some option configurations like the border with and the Border collar and then I have functions that manipulate our data inside our data cells which is the hard data and the remove First Data so the reason there is a remove First Data in here is that we are limiting the number of our bank account to add only at least 10. so if there is an 11 value or our 11th websocket based message that comes in then the first value will be dropped so that's why there is a remove data here and then in the add data with the AC what we call as the my chart that update which updates our fat.js line so and then this one is the important part in the socket Connection in the side connection we just connect to our websocket server and as I have mentioned before the important name of our message 360 update sensor data which you can find here in the background thread the update sensor data so once we receive the the message in the update sensor data we just and then we check if the data is exceeds the number which is 10 if it sits then then we remove the first data and then after which we just call the add data and that's all about how actually the code works the app.css file that you're seeing is here is just for styling purposes so that the width of power container will not exceed the maximum width yep that we fix the 800 pixels and that's basically how our real time better display Works using plus Python and websockets I hope you learned something happy exploring hi if you like the videos that I have created then please consider subscribing to my YouTube channel and other social media channels hit the notification button so that you will get notified for new contents please do comment like and share happy exploring

Channel: DonskyTech

Views: 9,702

Keywords: flask, flask-socketio, websocket, python

Id: dPhr1YCQTU4

Length: 7min 17sec (437 seconds)

Published: Thu Sep 15 2022