SignalR

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 &#9584; TX Text Control .NET Server &#9584; JavaScript API &#9584; EditableRegion Object An EditableRegion object represents an editable region in a document. " data-tippy-interactive="true" data-tippy-placement="bottom" data-tooltip-width="wide"

>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 &#9584; TX Text Control .NET Server &#9584; Web.MVC Namespace &#9584; TextControlSettings Class &#9584; UserNames Property Gets or sets a list of names specifying users who have access to editable regions. " data-tippy-interactive="true" data-tippy-placement="bottom" data-tooltip-width="wide"

>User Names 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.

TX Text Control .NET Server

DS Server

Server & Web

Windows Forms

WPF

ActiveX

Core Technologies

Blog

Core Technologies

Blog

Authors

Latest Posts

Support Resources

Documentation

Support

Getting Started

Other Resources

About Us

Industry events

Company

Contact

Newsletter

Legal

Sign in

Create account

Text Control Account

SignalR

Post tagged with SignalR in 2020

Server & Web

Windows Forms

WPF

ActiveX

Core Technologies

​

Latest Posts

​

Support

Getting Started

​

Other Resources

Company

Contact

Newsletter

Legal

Text Control Account

​

​

SignalR

Post tagged with SignalR in 2020 ​

May 2020

Post tagged with SignalR in 2020