chapter four

4 Adding order- tracking functionality with SignalR

 

This chapter covers

  • Using SignalR for real-time two-way communication between client and server
  • Using OpenLayers to display interactive maps in the browser
  • Building a system capable of handling delivery drivers’ location updates in real time

In this chapter, we’ll do something interesting with Aspire: build a delivery-tracking app by using SignalR and OpenLayers.

Our app will work similarly to existing popular order-tracking apps, such as Just Eat, Uber Eats, DoorDash, and those used by major e-commerce stores. The user interface will feature a map. The backend of the system will track the delivery driver’s coordinates. As soon as the driver moves, the marker on the map will update. We won’t have to do anything ourselves, such as refresh the screen. The map will be fully interactive and update automatically, just as it would in a real delivery-tracking app.

To bring this real-time tracking feature to life, we have to solve two main challenges: pushing live data from the server to the browser and rendering that data on an interactive map. We'll use two powerful, specialized libraries for this purpose: Microsoft’s SignalR to manage real-time communication and OpenLayers to display the map.

4.1 What is SignalR?

4.2 Introduction to OpenLayers

4.3 Building a delivery-tracking system

4.3.1 Setting up a SignalR hub

4.3.2 Registering a SignalR hub

4.3.3 Simulating location updates

4.4 Building the frontend Map UI

4.4.1 Registering frontend dependencies

4.4.2 Building the interactive UI

4.5 Summary