Requirements:

• Net5 and higher,
• web browsers with support for websockets.

Pros: More responsive user interface due to the absence of communication delays.

Cons: It is not suitable for those who are tied to HTTP protocol regarding the work with AQB.

Steps to activate SignalR

1. Initialize AQB as usual and add the following lines to the startup.cs file:

services.AddActiveQueryBuilderSignalR();
services.AddSignalR();

app.UseActiveQueryBuilderSignalR();

2. Optionally you can pass the path to the AQB SignalR message handler to the UseActiveQueryBuilderSignalR method. By default AQB uses "/query-builder/handler" path.

3. Implement the IQueryBuilderInstanceFactory to initialize and confugure AQB instances. (Recommedned, but you can also continue using legacy methods.)

4. Create a controller similar to the one that used in the JavaScript demos (just a view, no logic is needed), in the view pass a link to the signalR client (we use this one in our demos: https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/6.0.1/signalr.js)

5. Add regular AQB client initialization to the view, plus start of the singalR conneciton:

        $(function () {
            AQB.Web.UI.QueryBuilder(name, $('#qb'));
            AQB.Web.UI.ObjectTreeView(name, $('#treeview'));
            AQB.Web.UI.SubQueryNavigationBar(name, $('#navbar'));
            AQB.Web.UI.Canvas(name, $('#canvas'));
            AQB.Web.UI.StatusBar(name, $('#statusbar'));
            AQB.Web.UI.Grid(name, $('#grid'), { orColumnCount: 0 });
            AQB.Web.UI.SqlEditor(name, $('#sql'));

            const connection = new signalR.HubConnectionBuilder()
               .withUrl("/query-builder/handler")
               .build();

            connection.start().then(() => {
                AQB.Web.UI.useSignalR(connection);
            });
        });

See the SignalR or Blazor demos for details.

Getting instance of QueryBuilder on the back with Razor

In Blazor application you should generate a different Id for each user session instead of a fixed SessionId. Use the getQueryBuilder method to get QueryBuilder instance on the server side.

private QueryBuilder getQueryBuilder() {
    var storage = new KeyBasedQueryBuilderSessionStorage(ServiceProvider, _sessionId);
    return storage.Get(_sessionId);
}

Possible pitfall: If you subscribe to AQB events, and access HttpContext in the handler, you get nothing or it will be functionally limited.