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 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 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; }
}

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());
                        });

                });

            }

        });
    });
}

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);
                        });

                    });
                });
            }
        });
    });
});

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.