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:

public class CollabHub : Hub
{
public async Task SetEditableRegionSync(EditableRegionSync editableRegionSync)
{
await Clients.All.SendAsync("ReceiveRegionSync", editableRegionSync);
}
}
public class EditableRegionSync
{
public string User { get; set; }
public int RegionId { get; set; }
public string Document { get; set; }
}
view raw test.cs hosted with ❤ by GitHub

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:

function updateSection(region) {
// check flags
if (_updating === true || _dirtyFlag === false)
return;
TXTextControl.editableRegions.forEach(function (er) {
// find region by id
er.getID(function (id) {
if (region.editableRegion.id == id) {
// save the region content
er.save(TXTextControl.StreamType.InternalUnicodeFormat,
function (doc) {
// create sync object
var regionSyncObject = {
User: region.editableRegion.userName,
RegionId: id, Document: doc.data
};
// call signalr hub with sync object
_connection.invoke("SetEditableRegionSync",
regionSyncObject).catch(function (err) {
return console.error(err.toString());
});
});
}
});
});
}
view raw test.js hosted with ❤ by GitHub

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:

// connect to signalr hub
_connection = new signalR.HubConnectionBuilder().withUrl("/collabHub").build();
_connection.start();
_connection.on("ReceiveRegionSync", async function (syncRegion) {
// set flag to avoid infinite loops
_updating = true;
TXTextControl.editableRegions.forEach(function (er) {
// find editable region by id
er.getID(function (id) {
if (syncRegion.regionId == id) {
er.getStart(function (start) {
er.getLength(function (length) {
TXTextControl.inputPosition.getTextPosition(function (sp) {
// select editable region
var sel = TXTextControl.selection;
var bounds = { "start": start - 1, "length": length };
sel.setBounds(bounds);
//sel = TXTextControl.selection;
// load synchronized content
sel.load(TXTextControl.StreamType.InternalUnicodeFormat,
syncRegion.document);
// reset input position
var bounds = { "start": sp, "length": 0 };
sel.setBounds(bounds);
// reset flags
setTimeout(function () {
_updating = false;
_dirtyFlag = false;
}, 100);
});
});
});
}
});
});
});
view raw test.js hosted with ❤ by GitHub

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.