Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 61 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,67 @@
# Make Real-time Updates in a Blazor WebAssembly Application using SignalR
A quick-start Blazor WebAssembly application that is pre-configured with SignalR connection to perform real-time appointment updates on a Blazor Scheduler of Syncfusion.
# Real-time Updates in Blazor WebAssembly App using SignalR

A full-stack Blazor WebAssembly application demonstrating real-time appointment scheduling with instant synchronization across multiple clients using [SignalR](https://learn.microsoft.com/aspnet/core/signalr) and [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) components.

![Blazor Scheduler with SignalR working](blazor-scheduler.gif)

## Overview

This sample application showcases how to build a collaborative scheduling experience in Blazor WebAssembly with real-time updates. When one user creates, edits, or deletes an appointment, all connected clients instantly receive and display the changes through a SignalR hub connection. The application uses the Syncfusion Scheduler component to provide a rich, interactive calendar interface.

**Key capabilities:**

- Multi-user real-time synchronization via SignalR
- CRUD operations on appointments (create, read, update, delete)
- Syncfusion Scheduler component with built-in drag-and-drop and inline editing
- Separated architecture with Client (WebAssembly), Server (ASP.NET Core), and Shared projects

## Features

- **Real-time Synchronization**: All connected clients receive instant updates when appointments are changed
- **Interactive Scheduler**: Built on Syncfusion's Scheduler component with week view, inline editing, and drag-and-drop support
- **SignalR Integration**: Bidirectional communication between clients and server
- **Clean Architecture**: Organized into Client, Server, and Shared projects for maintainability
- **Activity Tracking**: Display notifications showing which user made what changes

## Architecture

The solution follows a three-project structure:

- **Client** (Blazor WebAssembly): The interactive UI running in the browser, featuring the Scheduler component and SignalR client logic
- **Server** (ASP.NET Core): Hosts the SignalR hub, serves static files, and provides REST API endpoints for appointment data
- **Shared**: Contains common models like `AppointmentData` shared between client and server

**Real-time Flow:**

1. User interacts with the Scheduler (creates, edits, or deletes an appointment)
2. Client sends changes via SignalR to the `SchedulerHub`
3. Hub broadcasts changes to all connected clients except the sender
4. All clients receive and apply the changes instantly

## Prerequisites
* Visual Studio 2022
* .NET latest version installed in your system

## How to run the project
- [.NET SDK 10.0](https://dotnet.microsoft.com/download/dotnet/10.0) or later
- [Visual Studio 2022](https://visualstudio.microsoft.com/downloads/) or later
- [Visual Studio Code](https://code.visualstudio.com/)

## Getting Started

### Clone the repository

```bash
git clone https://github.com/SyncfusionExamples/real-time-updates-in-a-blazor-webassembly-application-using-signalr.git
cd real-time-updates-in-a-blazor-webassembly-application-using-signalr
```

### Run with Visual Studio

1. Open the solution file using Visual Studio 2022 or later.
2. Restore the NuGet packages by rebuilding the solution.
3. Build the project to ensure there are no compilation errors.
4. Run the project.

## References

* Checkout this project to a location in your disk.
* Open the solution file using the Visual Studio 2022.
* Restore the NuGet packages by rebuilding the solution.
* Run the project.
- [SignalR documentation](https://learn.microsoft.com/aspnet/core/signalr)
- [Syncfusion Blazor Scheduler documentation](https://www.syncfusion.com/blazor-components/blazor-scheduler)
- [Real-time ASP.NET Core applications with SignalR](https://learn.microsoft.com/aspnet/core/signalr/introduction)