Server Side Web Socket Data Binding

This data binding technique creates a live connection with the backend and notify when ever data is required. Unlike Server Side Basic Data Binding this approach allow you to push data from server to client. This can be used to bind dynamic data streams such as traffic, weather, analytics and etc which changes over time. This data binding approach internally use WebSockets to fetch data from server.

What You Will See

Sales Products

IDOrder Method TypeRetailer TypeProduct LineProduct TypeRevenueQuantityGross Margin
import { Component, OnDestroy, OnInit } from '@angular/core';

import { Subscription } from 'rxjs';

import {
  DataTableWebsocketResourceFactoryService,
  DataTableDataBindCallback
} from 'ornamentum';

import { ExampleData } from 'helper-models';

@Component({
  selector: 'app-server-side-web-socket-usage',
  templateUrl: './server-side-web-socket-usage.component.html'
})
export class ServerSideWebSocketUsageComponent implements OnInit, OnDestroy {
  public onDataBind: DataTableDataBindCallback<ExampleData>;
  
  private webSocketProvider: DataTableWebsocketDataFetchService<ExampleData>;
  
  constructor(private resourceFactory: DataTableWebsocketResourceFactoryService) {
    this.webSocketProvider = resourceFactory.getResourceProvider<ExampleData>();
  }

  /**
   * Component initialize lifecycle event handler.
   */
  public ngOnInit(): void {
    // Create web socket connection to support server side rendering.
    this.webSocketProvider.init({
      url: `wss://ornamentum.app` // web socket endpoint
    });

    this.onDataBind = this.webSocketProvider.onDataBind();
  }

  /**
   * Component destroy lifecycle event handler.
   */
  public ngOnDestroy(): void {
    this.webSocketProvider.dispose();
  }
}

Basic Usage

Server side data bind functionality can be integrated via onDataBind callback function input property. Data source associated logic is decoupled from Ornamentum core module to make it data source agnostic.

  1. Import DataTableResourceModule along with DataTableModule.

    @NgModule({
     ...
     imports: [
        ...
        DataTableModule.forRoot(), // Import data table module
        DataTableResourceModule.forRoot() // Import data table resource module
      ]
    })
    
  2. Within the target component use DataTableWebsocketResourceFactoryService to construct an instance of DataTableWebSocketDataFetchService<T> class. Initialize the the newly created instance of DataTableWebSocketDataFetchService<T> by invoking init method and call onDataBind to get the data bind callback function reference within ngOnInit lifecycle event handler or component constructor depending on your preference. Cleanup resources and destroy the established Web Socket connection by invoking dispose method on DataTableWebSocketDataFetchService<T> instance within ngOnDestroy lifecycle event handler.

    @Component({
      ...
    })
    export class ServerSideWebSocketBasicUsageComponent {
      public onDataBind: DataTableDataBindCallback<ExampleData>;
      
      private webSocketProvider: DataTableWebsocketDataFetchService<ExampleData>;
      
      constructor(private resourceFactory: DataTableWebsocketResourceFactoryService) {
        this.webSocketProvider = resourceFactory.getResourceProvider<ExampleData>();
      }
    
      /**
       * Component initialize lifecycle event handler.
       */
      public ngOnInit(): void {
        // Create web socket connection to support server side rendering.
        this.webSocketProvider.init({
          url: `wss://ornamentum.app` // web socket endpoint
        });
    
        this.onDataBind = this.webSocketProvider.onDataBind();
      }
    
      /**
       * Component destroy lifecycle event handler.
       */
      public ngOnDestroy(): void {
        this.webSocketProvider.dispose();
      }
    }
    
  3. Set the callback function reference to onDataBind data table input property.

    <ng-data-table
      ...
      [onDataBind]="onDataBind">
    </ng-data-table>
    

WebSocket server (Your backend WebSocket API) should support following:

  • Service will receive data fetch request messages with DataTableRequestParams object containing request parameters upon pagination, filtering, sorting and any dynamic operation which require data re-fetch.
  • Service should respond follow DataTableQueryResult<T> schema. However, you can pass a custom response mapper callback function to onDataBind and map the response to DataTableQueryResult<T> schema without making changes in backend API response.

Custom Data Provider

Server side data binding is handled via onDataBind callback function input property. Use this callback reference to hook into data bind workflow and provide custom data source. This callback function will get triggered on table initialization and on dynamic data table operations. It receives DataTableRequestParams argument and expect to return RxJS Observable query result DataTableQueryResult<T> object stream. Data returned from this callback function will be directly bound to table assuming that it matches the on demand request context.

Refer DataTableWebsocketDataFetchService<T> API documentation for more details.

Client Side Basic Data Binding
Client Side Stream Data Binding
Server Side Basic Data Binding
API Doc for Server Side Web Socket Data Binding