Realtime editing with SignalR

18 Jul 20222 minutes to read

The Rich Text Editor allows, two or more users can edit the same editor by using SignalR services. Which will update the editor value in real-time, when loading it on multiple pages. In the below example create the SignalR HubConnectionBuilder in the OnInitializedAsync method and the editor updated value send to the SignalR message in the ValueChange event.

@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager NavigationManager
@implements IAsyncDisposable

<h3>Realtime value update</h3>

@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor @bind-Value="RTEValue" SaveInterval="100">
    <RichTextEditorEvents ValueChange="@Send"></RichTextEditorEvents>

@code {
    private HubConnection hubConnection;
    private List<string> messages = new List<string>();
    private string messageInput;
    private string RTEValue;
    protected override async Task OnInitializedAsync()
        //Creates a new instance of the HubConnectionBuilder class.

        hubConnection = new HubConnectionBuilder()
        hubConnection.On<string, string>("ReceiveMessage", (value, message) =>
            RTEValue = value;
        await hubConnection.StartAsync();

    // Sending RTEValue to new connection state.

    async Task Send() =>
        await hubConnection.SendAsync("SendMessage", RTEValue, messageInput);
    public bool IsConnected =>
        hubConnection.State == HubConnectionState.Connected;
    public async ValueTask DisposeAsync()
        if (hubConnection is not null)
            await hubConnection.DisposeAsync();


   public class ChatHub : Hub 
        public async Task SendMessage(string value, string message) 
            await Clients.All.SendAsync("ReceiveMessage", value, message); 

SignalR servecies