4 Adding order- tracking functionality with SignalR
In this chapter, the application is extended into a real-time delivery-tracking experience similar to modern food and e-commerce services. The goal is to show a map in the browser, receive live driver-coordinate updates from the backend, and move a marker automatically without requiring refreshes or manual polling. Aspire provides the distributed application structure, while SignalR and OpenLayers supply the real-time communication and interactive mapping capabilities needed to make the experience feel immediate and dynamic.
The backend portion centers on a SignalR hub that broadcasts location changes to connected clients. The hub is registered in the API service, mapped to an endpoint, and paired with a background worker that simulates a moving driver by sending periodic latitude and longitude updates. This demonstrates how SignalR supports server-to-client pushes, bidirectional communication, and flexible transport options, while also fitting into scalable distributed systems through standard ASP.NET Core infrastructure and service registration.
On the frontend, the web project is configured to use the SignalR client package, JavaScript interop, and OpenLayers to render an interactive map and update it with new markers as messages arrive. The app enables interactive rendering so Blazor can call JavaScript at the right time, then initializes the map, connects to the hub, and listens for coordinate events. When an update arrives, the UI removes the old marker, adds a new one, and re-renders as needed, resulting in a complete end-to-end tracking workflow that connects backend events to a polished browser experience.
Displaying the marker on the map upon receiving the location update
Summary
- In this chapter, we’ve built a fully interactive map where a user interface persistently connected to the back-end server can receive updated locations.
- The persistent connection is managed by SignalR, a library built into ASP.NET Core that facilitates two-way real-time communication between client and server.
- The location is displayed as a marker on an OpenLayers map, which can interact with JavaScript.
- An important point to remember is that for Blazor to manage interactive map updates, it has to render in an interactive mode.
- Interactive updates to an OpenLayers map in Blazor can be managed via Blazor JavaScript interop functionality.
- Any updates to the UI from the Blazor code can be made only after the Razor component has been fully rendered.
Building Distributed Applications that Work ebook for free
