ngxi4-socket-client

Ngxi4SocketClient

This library was generated by Doan Quoc Cuong ([e-mail])

Install:

Run npm to get service for using.

npm install ngxi4-socket-client --save

Run npm to install include extra javascript.

npm install ngx-device-detector ngx-socket-io --save

npm install ngxi4-dynamic-service --save

# And install all extra of ngxi4-dynamic-service (search for help of this library)
npm install croppie crypto-js exif-js simple-crypto-js --save

npm install ngx-barcode@0.2.4 ngx-image-cropper ngx-qrcode2@0.0.9 ngx-webcam@0.2.6 --save

# version "ng-multiselect-dropdown": "^0.2.10" 
# npm i ng-multiselect-dropdown@latest
npm install @ionic/angular@4.7.1 ng-multiselect-dropdown@0.2.10

npm install @ionic-native/sqlite  --save

# version của angular for event 
# error import { EventHandler } from '@ionic/angular/dist/providers/events'

# npm install angular-webstorage-service@latest
# Error: angular-webstorage-service/src/storage-service.module.d.ts:9:22 - error NG6002: Appears in the NgModule.imports of
# npm un angular-webstorage-service --save
npm i ngx-webstorage-service --save 

npm install ngx-qrcode2@latest

Download JsEncrypt and copy in assets/js/jsencrypt.js

http://travistidwell.com/jsencrypt/

<!-- Save in src/assets/js/jsencrypt.js -->

Add javascript jsencrypt.js in angular.json

{

"projects": {
    "app": {
      // ...
      "architect": {
        "build": {
          // ...
            "scripts": [
              "src/assets/js/jsencrypt.js"
            //   ,"src/assets/js/communicate2Angular.js"
            ]
          // ...
        },
        // ...
      }
    }
  },
  //   ...
}

Use:

1. add in ./app.module.ts

import { Ngxi4SocketClientModule } from 'ngxi4-socket-client'

@NgModule({
  // ...
  imports: [
    // ....
    // add module ngxi4-socket-client
    Ngxi4SocketClientModule.forRoot()

    // or 
    // Ngxi4SocketClientModule.forRoot(
        //  {
        //     APP_NAME: "YOUR-APP-NAME"
        //     , SERVER_URL: "your socket-server"
        //     , SOCKET_PATH: "your socket-path"
        //     , PING_INTERVAL: 1000
        //     , TIME_OUT: 60000
        //     , RECONNECT_DELAY: undefined
        //     , RECONNECT_DELAY_MAX: undefined
        // }
    )

  ]
})

2. add to ./app.component.ts

import { Component } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { ApiSocketService } from './services/api-socket.service';


@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private apiSocket: ApiSocketService
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      this.init();
    });
  }
  init() {
    this.apiSocket.init()    
    // or
    // this.apiSocket.init(
    // server_url?: string
    // , socket_path?: string
    // , ping_interval?: number
    // , time_out?: number
    // , reconnect_delay?: number
    // , reconnect_delay_max?: number
    // , appName?: any     // tên ứng dụng nếu có
    // , extraEvents?: any // sự kiện thêm vào không phải mặc định
    // , callback?: any   
    // )
    // NOTE: if input by this param --> the config in module (1.) is replaced
  }
}

3. add to ./my-home.page.ts

import { Component, HostListener } from '@angular/core';
import { CommonsService } from 'ngxi4-dynamic-service';
import { ApiSocketService } from '../services/api-socket.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  isMobile: boolean = false;
  socketConnection: any;

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.isMobile = event.target.innerWidth < 576;
  }

  constructor(
    private apiCommon: CommonsService
    , private apiSocket: ApiSocketService
  ) { this.init() }

  init() {
    this.isMobile = this.apiCommon.isMobile()
    this.socketConnection = this.apiSocket.getConnection();
  }

  onClickUser() {
    if (this.socketConnection.userInfo) {
      // hiển thị thông tin của userInfo đã kết nối vào
      // view form chứa user info này
      // console.log('Thông tin user', this.socketConnection.userInfo);
      // gửi lệnh lên server kiểm tra có bao nhiêu socket đang nối với user này
      // ở những máy tính nào
      this.apiSocket.sendSocketIo("client-req-command", { command: "GET-MY-USER" })
    } else {
      this.apiSocket.sendSocketIo("client-req-command", { command: "LOGIN" })
    }
  }

  onClickDevice() {
    if (this.socketConnection.device_online) {
      // hiển thị thông tin của userInfo đã kết nối vào
      // view form chứa user info này
      // console.log('Thông tin thiết bị', this.socketConnection.device_id);
      // gửi thông tin lên máy chủ, xem có bao nhiêu socket đang dùng bộ key với device_id này
      // máy chủ trả về form thông tin thiết bị đang nối ở những device nào
      this.apiSocket.sendSocketIo("client-req-command", { command: "GET-MY-DEVICE" })
    }
  }
}