Skip to content

882104 - Add UG for scaling in collaborative editing #2942

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 10, 2024
Merged
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
45 changes: 42 additions & 3 deletions ej2-asp-core-mvc/document-editor/collaborative-editing.md
Original file line number Diff line number Diff line change
Expand Up @@ -296,7 +296,7 @@ private ActionInfo AddOperationsToTable(ActionInfo action)

#### Add Web API to get previous operation as a backup to get lost operations

On the client side, messages broadcasted using SignalR may be received in a different order, or some operations may be missed due to network issues. In these cases, we need a backup method to retrieve missing records from the database.
On the client side, messages broadcast using SignalR may be received in a different order, or some operations may be missed due to network issues. In these cases, we need a backup method to retrieve missing records from the database.
Using the following method, we can retrieve all operations after the last successful client-synced version and return all missing operations to the requesting client.

```csharp
Expand All @@ -305,7 +305,7 @@ public async Task<ActionInfo> UpdateAction([FromBody] ActionInfo param)
try
{
ActionInfo modifiedAction = AddOperationsToTable(param);
//After transformation broadcast changes to all users in the gropu
//After transformation broadcast changes to all users in the group
await _hubContext.Clients.Group(param.RoomName).SendAsync("dataReceived", "action", modifiedAction);
return modifiedAction;
}
Expand Down Expand Up @@ -338,8 +338,47 @@ private ActionInfo AddOperationsToTable(ActionInfo action)
}

```
## How to perform Scaling in Collaborative Editing.

As the number of user increases, maintaining responsiveness and performance becomes challenging. Scaling tackles this by distributing the workload across resources. You can scale the collaborative editing application using either ```Azure SignalR service or Redis backplane service```

### 1. Scaling with Azure SignalR

Azure SignalR Service is a scalable, managed service for real-time communication in web applications. It enables real-time messaging between web clients (browsers) and your server-side application(across multiple servers).

Below is a code snippet to configure Azure SignalR in an ASP.NET Core application using the ```AddAzureSignalR``` method

```csharp
builder.Services.AddSignalR() .AddAzureSignalR("<your-connection-string>", options => {
// Specify the channel name
options.Channels.Add("document-editor");
});
```

### 2. Scaling with Redis backplane

Using a Redis backplane, you achieve horizontal scaling of your SignalR application. The SignalR leverages Redis to efficiently broadcast messages across multiple servers. This allows your application to handle large user bases 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 = "document-editor";
});
```


Full version of the code discussed about can be found in below GitHub location.

Github Example: [`Collaborative editing examples`](https://github.com/SyncfusionExamples/EJ2-Document-Editor-Collabrative-Editing)
GitHub Example: [`Collaborative editing examples`](https://github.com/SyncfusionExamples/EJ2-Document-Editor-Collabrative-Editing)