![]() Since our application will show data in a tabular form, we will install a React component that simplifies the task of rendering data into tables: React Table. Our goal is to change the code of this basic React application and replace it with our flight timetable frontend application. In particular, the src subdirectory contains the source code of our brand-new React application. So, let's make sure that we have Node.js installed on our machine and let's type the following command in a terminal window: # installing create-react-app globally npm install -g create-react-appĪfter installing create -react -app in our development machine, let's create the basic template of a React application by typing: create-react-app real-time-sse-appĪfter a few seconds, we will get a new directory called real -time -sse -app with all the files we need inside it. To make things simple, we will use create -react -app to set up our React-based client. Scaffolding a React ApplicationĪs the first step, let's scaffold our React client application. So, let's start coding and discover how the Server-Sent Events standard works. However, one can easily replace this mechanism with more realistic ones on production-ready applications. In our demo application, we are going to simulate the flight state changes using scheduled events. Through this real-time app, we can find the flight arrival timetable and, after implementing Server-Sent Events, we will see automatically updates when the state of flights change. The timetable app will consist of a simple web page showing a list of flights as shown in the following picture: In order to learn how to use Server-Sent Events, we are going to develop a simple flight timetable application (similar to those flight trackers you can find at any airport). Building a Real-Time App with Server-Sent Events So, let's take a look at how to use Server-Sent Events in a realistic application. That is, we can continue to use the standard HTTP protocol. We don't even need any complex and strange protocol. This may suggest using that annoying polling we'd implement to get the progress status from a long server processing but, thanks to SSE, we don't have to implement polling to wait for a response from the server. The answer is yes! We can achieve that by using Server-Sent Events (which is also known as SSE or Event Source), a W3C standard that allows servers to push data to clients asynchronously. But, can we make our servers send data to clients at any time without explicit requests? The typical interactions between browsers and servers consist of browsers requesting resources and servers providing responses. ![]() Tweet This Introducing on Server-Sent Events
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |