How to setup Active Query Builder to use SignalR as a communication protocol?
Last modified:
Requirements:
- Net5 and higher,
- web browsers with support for websockets.
Contraindications: It is not suitable for those who are tied to HTTP protocol regarding the work with AQB.
Steps to activate:
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.
Possible pitfall: If you subscribe to AQB events, and access HttpContext in the handler, you get nothing or it will be functionally limited.