996403: UG for Collaborative editing in diagram component.

blazor/diagram/collaborative-editing/overview.md

@@ -0,0 +1,44 @@
+---
+layout: post
+title: Collaborative editing in Blazor Diagram Component | Syncfusion
+description: Checkout and Learn all about collaborative editing in Syncfusion Blazor Diagram component and many more details.
+platform: Blazor
+control: Diagram
+documentation: ug
+---
+
+# Collaborative Editing in Blazor Diagram
+
+Collaborative editing enables multiple users to work on the same diagram at the same time. Changes are reflected in real-time, allowing all participants to instantly see updates as they happen. This feature promotes seamless teamwork by eliminating the need to wait for others to finish their edits. As a result, teams can boost productivity, streamline workflows, and ensure everyone stays aligned throughout the design process.
+
+## Prerequisites
+
+- *Real-time Transport Protocol*: Enables instant communication between clients and the server, ensuring that updates during collaborative editing are transmitted and reflected immediately.
+- *Distributed Cache or Database*: Serves as temporary storage for the queue of editing operations, helping maintain synchronization and consistency across multiple users.
+
+### Real time transport protocol
+
+- *Managing Connections*: Maintains active connections between clients and the server to enable uninterrupted real-time collaboration. This ensures smooth and consistent communication throughout the editing session.
+- *Broadcasting Changes*: Instantly propagates any edits made by one user to all other collaborators. This guarantees that everyone is always working on the most up-to-date version of the diagram, fostering accuracy and teamwork.
+
+### Distributed cache or database
+
+Collaborative editing requires a reliable backing system to temporarily store and manage editing operations from all active users. This ensures real-time synchronization and conflict resolution across multiple clients. There are two primary options:
+
+- *Distributed Cache*: 
+    * Designed for high throughput and low latency.
+    * Handles significantly more HTTP requests per second compared to a database.
+    * Example: A server with 2 vCPUs and 8 GB RAM can process up to 125 requests per second using a distributed cache.
+
+- *Database*: 
+    * Suitable for smaller-scale collaboration scenarios.
+    * With the same server configuration, a database can handle approximately 50 requests per second.
+
+> *Recommendation*:
+    * If your application expects 50 or fewer requests per second, a database provides a reliable solution for managing the operation queue.
+    * If your application expects more than 50 requests per second, a distributed cache is highly recommended for optimal performance.
+
+> Tips to calculate the average requests per second of your application:
+Assume the editor in your live application is actively used by 1000 users and each user's edit can trigger 2 to 5 requests per second. The total requests per second of your applications will be around 2000 to 5000. In this case, you can finalize a configuration to support around 5000 average requests per second.
+
+> Note: The metrics provided are for illustration purposes only. Actual throughput may vary based on additional server-side operations. It is strongly recommended to monitor your application’s traffic and performance and select a configuration that best meets your real-world requirements.

blazor/diagram/collaborative-editing/using-redis-cache-asp-net.md

@@ -0,0 +1,139 @@
+---
+layout: post
+title: Collaborative editing in Blazor Diagram Component | Syncfusion
+description: Checkout and Learn all about collaborative editing in Syncfusion Blazor Diagram component and many more details.
+platform: Blazor
+control: Diagram
+documentation: ug
+---
+
+# Collaborative Editing with Redis in Blazor Diagram
+
+Collaborative editing enables multiple users to work on the same diagram at the same time. Changes are reflected in real-time, allowing collaborators to see updates as they happen. This approach significantly improves efficiency by eliminating the need to wait for others to finish their edits, fostering seamless teamwork.
+
+## Prerequisites
+
+To enable collaborative editing in the diagram component, you need:
+
+* SignalR 
+* Redis 
+
+## SignalR
+
+Real-time communication is the backbone of collaborative editing. It ensures that users can instantly view changes made by others. SignalR provides a reliable framework for real-time data exchange between the client and server, handling complexities such of connection management and offering reliable communication channels.
+
+To make SignalR work in a distributed environment (with more than one server instance), it needs to be configured with either Azure SignalR Service or a Redis backplane.
+
+### Scale-out SignalR using Azure SignalR service
+
+Azure SignalR Service is a fully managed, scalable solution for enabling real-time communication in web applications. It facilitates instant messaging between web clients (browsers) and your server-side application, even when deployed across multiple servers.
+
+To configure Azure SignalR in an ASP.NET Core application, use the **AddAzureSignalR** method:
+
+```csharp
+builder.Services.AddSignalR() .AddAzureSignalR("<your-azure-signalr-service-connection-string>", options => { 
+    // Specify the channel name 
+    options.Channels.Add("diagram-editor");
+ }); 
+```
+
+### Scale-out SignalR using Redis
+
+When you need horizontal scaling without relying on Azure services, Redis backplane is an excellent choice. SignalR uses Redis to broadcast messages across multiple servers, ensuring all connected clients receive updates with minimal latency.
+
+In the SignalR app, install the following NuGet package:
+* `Microsoft.AspNetCore.SignalR.StackExchangeRedis`
+
+Below is a code snippet to configure Redis backplane in an ASP.NET Core application using the ```AddStackExchangeRedis ``` method.
+
+```csharp
+builder.Services.AddSignalR().AddStackExchangeRedis("<your_redis_connection_string>");
+```
+Configure options as needed:
+
+The following example shows how to add a channel prefix in the ConfigurationOptions object. 
+
+```csharp
+builder.Services.AddDistributedMemoryCache().AddSignalR().AddStackExchangeRedis(connectionString, options =>
+  {
+      options.Configuration.ChannelPrefix = "diagram-editor";
+  });
+```
+
+## Redis
+
+Redis is used as a temporary data store to manage real-time collaborative editing operations. It helps queue editing actions and resolve conflicts through versioning mechanisms.
+
+All diagram editing operations performed during collaboration are cached in Redis. To prevent excessive memory usage, old versioning data is periodically removed from the Redis cache.
+
+Redis imposes limits on concurrent connections. Select an appropriate Redis configuration based on your expected user load to maintain optimal performance and avoid connection bottlenecks.
+
+## How to enable collaborative editing in client side
+
+### Step 1: Enable collaborative editing in Blazor Diagram
+To enable collaborative editing, set the `EnableCollaborativeEditing` property to true in the `SfDiagramComponent`. 
+
+When collaborative editing is enabled:
+* Use the `SerializeDiagramChanges` method in the HistoryChanged event to serialize modified diagram data.
+* Send the serialized data to other clients through a SignalR hub.
+* Apply remote changes on the client using the `ApplyRemoteDiagramChangesAsync` method.
+
+```cshtml
+<SfDiagramComponent EnableCollaborativeEditing="true"></SfDiagramComponent>
+```
+
+## Step 2: Configure SignalR to send and receive changes
+
+To broadcast changes made in the diagram and receive updates from remote users, configure SignalR as shown below.
+
+1) **Enable Collaborative Editing in the Diagram Component**
+```cshtml
+<SfDiagramComponent EnableCollaborativeEditing="true"></SfDiagramComponent>
+```
+2) **Initialize SignalR Connections**
+Use the OnAfterRenderAsync lifecycle method to establish the SignalR connection when the component is first rendered.
+
+```cshtml
+protected override async Task OnAfterRenderAsync(bool firstRender)
+{
+     await base.OnAfterRenderAsync(firstRender);
+     if (firstRender)
+     {
+         await InitializeSignalR();
+     }
+}
+private async Task InitializeSignalR()
+{
+    if (connection == null)
+    {
+        connection = new HubConnectionBuilder()
+                    .WithUrl("// Add your server url", options =>
+                    {
+                        options.SkipNegotiation = false;
+                        options.Transports = Microsoft.AspNetCore.Http.Connections.HttpTransportType.WebSockets |
+                                Microsoft.AspNetCore.Http.Connections.HttpTransportType.LongPolling;
+                    })
+                    .WithAutomaticReconnect()
+                    .Build();
+        connection.On<string>("OnConnectedAsync", OnConnectedAsync);
+        connection.On<List<string>>("ReceiveData", async (diagramChanges) =>
+        {
+            await OnReceiveDiagramUpdate(diagramChanges);
+        });
+        await connection.StartAsync();
+    }
+}
+private async Task OnConnectedAsync(string connectionId)
+{
+    if (!string.IsNullOrEmpty(connectionId))
+    {
+        // Join the room after connection is established
+        await connection.SendAsync("JoinDiagram", roomName);
+    }
+}
+private async Task OnReceiveDiagramUpdate(List<string> diagramChanges)
+{
+    await DiagramInstance.ApplyRemoteDiagramChangesAsync(diagramChanges);
+}
+```
+