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.

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 {
  GlobalRefService,
  DataTableWebsocketDataFetchService,
  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;

  constructor(private globalRefService: GlobalRefService,
              private dataTableWebSocketDataFetchService: DataTableWebsocketDataFetchService<ExampleData>) {
  }

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

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

  /**
   * Component destroy lifecycle event handler.
   */
  public ngOnDestroy(): void {
    this.dataTableWebSocketDataFetchService.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. Import DataTableResourceModule along with DataTableModule. This module require @angular/http package as a dependency.

@NgModule({
 ...
 imports: [
    ...
    DataTableModule.forRoot(), // Import data table module
    DataTableResourceModule.forRoot() // Import data table resource module
  ]
})

Within the target component use DataTableWebsocketDataFetchService<T> service to get the onDataBind callback implementation.

@Component({
  ...
})
export class ServerSideWebSocketBasicUsageComponent {
  public onDataBind: DataTableDataBindCallback;
  
  constructor(private globalRefService: GlobalRefService,
              private dataTableWebSocketDataFetchService: DataTableWebsocketDataFetchService<ExampleData>) {
  }

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

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

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

Set the callback function to onDataBind input property.

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

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

Custom Data Provider

Server side data binding is handled via onDataBind callback function. 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> 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