SignalR enables applications to push update information from the server to connected clients. This sample shows how to synchronize changes in editable regions by broadcasting these changes to all clients.

This concept shows how to enable collaboration concepts to TX Text Control based applications. A document can be locked down for editing with exceptions for specific users. These Editable Regions TX Text Control .NET Server for ASP.NET
JavaScript API
EditableRegion Object
An EditableRegion object represents an editable region in a document.
are exceptions for specific users or user groups. The internal TX Text Control user management concept initializes the editor with a specific user name defined through the UserNames TX Text Control .NET Server for ASP.NET
Web.MVC Namespace
TextControlSettings Class
UserNames Property
Gets or sets a list of names specifying users who have access to editable regions.
property.

Implementing the SignalR Hub

The sample project implements a Hub as the endpoint for SignalR:

Loading...

The SetEditableRegionSync method accepts an EditableRegionSync object that stores the User, the RegionId and the Document as a Base64 encoded string in the internal TX Text Control format. This method broadcasts this object immediately to all connected clients.

Calling the Hub

The JavaScript function updateSection saves the currently modified region and calls the SignalR endpoint:

Loading...

This function is called in a JavaScript interval that is cleared when typing, so that the synchronization happens, if the user is in idle mode.

Listening for the Broadcast

If the ReceiveRegionSync message is received from the SignalR hub endpoint, the region is updated by loading the content:

Loading...

Because of the editable region concept, users cannot change other regions and the document will never be out of sync.

The following screen video shows this concept in action with two authors working on their editable regions that are automatically synchronized when the author stops typing.

Test this on your own and download the sample project from our GitHub repository.