pct-cmd

Table of Contents

1. Quick introduction
2. Installation
3. Features
4. Angular
   1. Start connection
   2. Reconnect
   3. On
   4. Off
   5. Post
   6. Get
5. React
   1. Start connection
   2. Reconnect
   3. On
   4. Off
   5. Post
   6. Get
6. Deployment

1. Quick introduction

pct-cmd is a modern npm package provide communication layer to ProconTel web infrastructure.

2. Installation

You can install the latest released JavaScript client from npm with the following command:

npm install @macrix/pct-cmd

3. Features

Table below lists feature available in package @macrix/pct-cmd and compares it with features available in next release.

| Feature | | Next | | :--- |:---: |:---: | | Start connection | ✓ | ✓ | | Reconnect | ✓ | ✓ | | On | ✓ | ✓ | | Off | ✓ | ✓ | | Post | ✓ | ✓ | | Get | ✓ | ✓ |

4. Angular

List of code samples which describes how to integrate @macrix/pct-cmd with angular framework. To run angular sample app run command: docker run --rm -p 3000:80 macrix/pct-ng-app

• Start connection

This is simple example how to start connection with endpoint.

import { EndpointConnection } from '@macrix/pct-cmd';

export class EndpointConnectionFactory {
    public async start(baseUrl: string): Promise<EndpointConnection> {
        const endpointConnection = new EndpointConnection(baseUrl + '/hubs/commands/');
        await endpointConnection.start();
        return endpointConnection;
    }
}

or use existing factory method

import { EndpointConnectionFactory, IEndpointConnection } from '@macrix/pct-cmd';

export class AppComponent implements OnInit {
  endpointConnection: IEndpointConnection;
  constructor(private connectionFactory: EndpointConnectionFactoryr) { }
  async start() {
    this.endpointConnection = this.connectionFactory.create(environment.procontelEndpointUrl);
    await this.endpointConnection.start();
  }
}

• Reconnect

This is simple example how to appropriate handle reconnect process.

IMPORTANT: Always unsubscribe and subscribe during reconnect process.

  this.endpointConnection = this.connectionFactory.create(environment.procontelEndpointUrl);
    this.endpointConnection.onconnected(async id => {
      await this.endpointConnection.off('order_created');
      await this.endpointConnection.on('order_created', (command) => {
        //some business logic
      });
    });

• On

This is simple example how we can subscribe on server push notification.

IMPORTANT: Subscribe on server push notification after connection start established.

  this.endpointConnection = this.connectionFactory.create(environment.procontelEndpointUrl);
  await this.endpointConnection.start();
  await this.endpointConnection.on('order_created', (command) => {
    //some business logic
  });
});

• Off

This is simple example how we can unsubscribe on server push notification.

  await this.endpointConnection.off('order_created');

• Post

This is simple example how we can send POST command. Operation result will be deliver by server push notification.

  await this.endpointConnection.on('order_created', (command) => {
    //some business logic
  });

  this.endpointConnection
    .post('create_order', this.command)
    .then(x => console.log('Command sent.'));

• Get

This is simple example how we can send GET command. Operation result will be deliver as a GET method result.

  this.endpointConnection
    .get('create_order_sync', this.command)
    .then(x => {
      //some business logic
    }));

5. React

List of code samples which describes how to integrate @macrix/pct-cmd with react framework. To run react sample app run command: docker run --rm -p 3000:80 macrix/pct-react-app

• Start connection

This is simple example how to start connection with endpoint.

import { EndpointConnection } from '@macrix/pct-cmd';

export class EndpointConnectionFactory {
    public async start(baseUrl: string): Promise<EndpointConnection> {
        const endpointConnection = new EndpointConnection(baseUrl + '/hubs/commands/');
        await endpointConnection.start();
        return endpointConnection;
    }
}

or use existing factory method

import { EndpointConnectionFactory, IEndpointConnection } from '@macrix/pct-cmd';

export const AppComponent: React.FC = props => {
  const [factory] = React.useState(new EndpointConnectionFactory());
  const [endpointConnection, setEndpointConnection] = React.useState<IEndpointConnection>(null!);
  async start() {
    const connection = factory.create(environment.procontelEndpointUrl);
    await this.endpointConnection.start();
    setEndpointConnection(connection);
  }
}

• Reconnect

This is simple example how to appropriate handle reconnect process.

IMPORTANT: Always unsubscribe and subscribe during reconnect process.

  const connection = factory.create(environment.procontelEndpointUrl);
  connection.onconnected(async id => {
    await connection.off('order_created');
    await connection.on('order_created', (command) => {
      //some business logic
    });
  });
  await connection.start();

• On

This is simple example how we can subscribe on server push notification.

IMPORTANT: Subscribe on server push notification after connection start established.

  const connection = factory.create(environment.procontelEndpointUrl);
  await connection.start();
  await connection.on('order_created', (command) => {
    //some business logic
  });

• Off

This is simple example how we can unsubscribe on server push notification.

  await endpointConnection.off('order_created');

• Pos

This is simple example how we can send POST command. Operation result will be deliver by server push notification.

  await endpointConnection.on('order_created', (command) => {
    //some business logic
  });

  endpointConnection
    .post('create_order', command)
    .then(x => console.log('Command sent.'));

• Get

This is simple example how we can send GET command. Operation result will be deliver as a GET method result.

  endpointConnection
    .get('create_order_sync', this.command)
    .then(x => {
      //some business logic
    }));

<div id='id-deployment'/>

## 6. Deployment

<div id='id-deployment-github'/>

* ### Github
```csharp

• GitLab