From 34282ef9d5e21f2ceccd563ac4a40bafe6013195 Mon Sep 17 00:00:00 2001 From: Backiaraj Date: Tue, 12 May 2026 12:47:30 +0530 Subject: [PATCH 1/2] Updated readme file --- README.md | 70 ++++++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 61 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 50b50b6..2f50228 100644 --- a/README.md +++ b/README.md @@ -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® 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) From 9f720e2a03a12b8380f33b8a5b8afdda78ec848e Mon Sep 17 00:00:00 2001 From: Backiaraj Date: Mon, 1 Jun 2026 14:29:16 +0530 Subject: [PATCH 2/2] Updated readme file --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 2f50228..fb58b7b 100644 --- a/README.md +++ b/README.md @@ -1,24 +1,24 @@ # 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® Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) components. +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 [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. +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 Blazor 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 +- Blazor 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 +- **Interactive Scheduler**: Built on Blazor 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 @@ -63,5 +63,5 @@ cd real-time-updates-in-a-blazor-webassembly-application-using-signalr ## References - [SignalR documentation](https://learn.microsoft.com/aspnet/core/signalr) -- [Syncfusion Blazor Scheduler documentation](https://www.syncfusion.com/blazor-components/blazor-scheduler) +- [Blazor Scheduler documentation](https://blazor.syncfusion.com/documentation/scheduler/getting-started-webapp) - [Real-time ASP.NET Core applications with SignalR](https://learn.microsoft.com/aspnet/core/signalr/introduction)