In the last two episodes, we talked about creating a simple IoT-like service, using Kafka to produce and consume messages in real-time and Flask to create a REST API to allow us producing messages via HTTP and consume them using server-sent events (SSE). In the end, we managed to get our messages pushed to clients using SSE, and now it is time to have a closer look at the client code.
Adding this into an HTML document should be enough to see messages you produce with CURL, like we described last time, logged to your browser’s console. But this is not very exciting. You know what would be exciting? If your webpage got updated automatically with new messages. Enter Angular.
This tells Angular that we have an app called “myApp”, and define the the underlying controller. In the controller’s scope, we have a single variable, our list of messages. In our web page, we now have to load Angular, but instead of downloading it, we use an easier path prepared for us by the kind people at Google who host a number of popular libraries for us. Our web page looks like this.
If everything went right, you should now see a list like this in your browser.
Putting Everything Together
Let’s put all the moving parts together. Our modified app will add the messages sent by the server to the list and thus dynamically update the web page with server-sent events.
I hope you’ve enjoyed this episode and stay tuned for the next data adventure.