Creating real-time web applications using react and signalR — Part 1
Creating API
Web today has come a long way from being static web pages. Web experience today feels much more interactive, immersive with rich graphics and animations. However, real-time web applications are still not mainstream yet. By real-time I mean a web application which is constantly connected to a server to receive updates so that user doesn’t have to refresh the page.
Let’s take an example of a simple CRUD application which has a dashboard where people can see list of items, a page where people can edit & delete items and a page where people can add items. Most of the business applications have similar functionality. Let’s put this application to test. We open the dashboard on two separate browsers (simulating 2 users). On one browser, you click on add new item, fill all the details and hit save. You come back to dashboard and see the newly added record in the table. The other browser (user) doesn’t know anything about it and still doesn’t have the new item.
In this tutorial we are going to establish a real-time socket connection between browser and server so that server can send signals to the browser. This way the your application is never stale. One could argue that they could keep refreshing the dashboard every few seconds, but hey that’s not as cool as a socket connection. Besides, polling is inefficient and can become messy when you want to make the entire application real-time and not just the dashboard. I have been talking too long, let’s get our hands dirty now.
This is what we are aiming for
We will begin by creating a simple crud api for “Employee” model. The simplest database we can use for this is LiteDb. It’s an embedded database for dotnet. Here’s how the controller looks like:
That’s it for part 1. In the next part, we will create the frontend using react & redux. Once we have a working integration between frontend and api, we will then enhance it to make real-time connection between the two.
