title: Using Websocket Subscribe call multiple times?
body: <p>My Web-socket-service.ts</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { OidcSecurityService } from 'angular-auth-oidc-client';
  import { WebSocketSubject } from 'rxjs/observable/dom/WebSocketSubject';
  import { environment } from './../../../environments/environment';
  
  
  
  export class Headers {
    public name = 'Authorization';
    public value = 'Bearer ';
  }
  
  
  export class Request {
    public id: string;
    public method = 'GET';
    public path = 'EmployeeList/';
    public dataFormat = 'application/json';
    public headers: Headers;
    public data: Data;
    constructor(
      id,
      method,
      path,
      dataFormat,
      headers
    ) {
      this.id = id;
      this.method = method;
      this.path = path;
      this.dataFormat = dataFormat;
      this.headers = headers;
    }
  
  }
  @Injectable({
    providedIn: 'root'
  })
  export class WebSocketService {
    public serverMessages = new Array&lt;Request&gt;();
    public id = 12;
    public method = 'GET';
    public path = 'EmployeeList/';
    public dataFormat = 'application/json';
    public headers: Headers;
    public headersArray: Headers[]
  
  
    private socket$: WebSocketSubject&lt;Request&gt;;
  
    constructor(private oidcSecurityService: OidcSecurityService) {
      this.socket$ = new WebSocketSubject('url');
      this.headers = new Headers();
      this.headersArray =[];
  
      this.headers.value = this.headers.value.concat(this.oidcSecurityService.getToken());
      this.headersArray.push(this.headers);
      this.headersArray.push({name : 'request_id',value : Math.round (Date.now()/1000).toString()})
  
    }
  
    GetData() {
      debugger;
      this.path = 'EmployeeList/';
      const message = new Request(this.id, 'GET', this.path, this.dataFormat,  this.headersArray);
      console.log(message);
      message.data = null;
     this.socket$.next(message);
      return this.socket$;
    }
  
    InsertData(newData) {
      const message = new Request('', 'POST', this.path, this.dataFormat, this.headers);
      message.data = newData;
      this.socket$.next(message);
      return this.socket$;
    }
    UpdateData(SimData) {
      const message = new Request('', 'PUT', this.path, this.dataFormat, this.headers);
      message.data = SimData;
      this.socket$.next(message);
      return this.socket$;
    }
    DeleteDatabyID(Id) {
      this.path = `${'EmployeeList'}/${Id}`;
      const message = new Request(Id, 'Delete', this.path, '', this.headers);
      message.data = null;
      this.socket$.next(message);
      return this.socket$;
    }
  
  
    GetEmployeeReportData() {
      this.path = 'EmployeeReports/';
      const message = new Request(this.id, 'GET', this.path, this.dataFormat, this.headers);
      message.data = null;
      this.socket$.next(message);
      return this.socket$;
       }
      }
  </code></pre>
  
  <p>my employeeListComponent.ts</p>
  
  <pre><code>import { Component, OnInit, ChangeDetectorRef } from "@angular/core";
  import { MatSnackBar } from "@angular/material";
  
  import {
    FormGroup,
    FormBuilder,
    FormControl,
    FormArray,
    Validators
  } from "@angular/forms";
  import "rxjs/add/operator/map";
  import "rxjs/add/operator/toPromise";
  import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from "@angular/material";
  import { OidcSecurityService } from "angular-auth-oidc-client";
  import { Subscription } from "rxjs/Subscription";
  import { WebSocketService } from "./../../core/services/web-socket.service";
  import { Data } from "./../../core/services/web-socket.service";
  import { DeleteComponent } from "./../delete/delete.component";
  
  
  
  @Component({
    selector: "app-simulator",
    templateUrl: "./employeeList.component.html",
    styleUrls: ["./employeeList.component.scss"]
  })
  
  export class employeeListComponent implements OnInit {
    emplist;
  
    constructor(
      private socketService: WebSocketService,
      private oidcSecurityService: OidcSecurityService,
      private fb: FormBuilder,
      public snackBar: MatSnackBar,
      private changeDetect: ChangeDetectorRef,
      public dialog: MatDialog,
  
    ) {
  
  
    }
  
    ngOnInit() {
  
      this.GetemployeeList();
  
    }
  
    GetemployeeList() {
      this.socketService.GetData().subscribe(
        response =&gt; {
         this.emplist= response;
        },
        error =&gt; console.log(error)
      );
      this.changeDetect.detectChanges();
    }
  
  
    InsertEmployee() {
      let data = new Data();
      // data.name = "abc"
         ......
  
      this.socketService.InsertData(data).subscribe(
        () =&gt; {
          this.snackBar.open("employee Added Successfully!", "Success", {
            duration: 2000,
            verticalPosition: "top"
          });
        },
        error =&gt; console.log(error)
      );
      this.aviatorForm.reset();
      data = null;
    }
  
    UploadEmployee(empdata,id) {
      let data = new Data();
     // data.name = empdata.name
       .....
      this.socketService.UpdateData(data).subscribe(() =&gt; {
        this.snackBar.open("Simulator Updated Successfully!", "Success", {
          duration: 2000,
          verticalPosition: "top"
        });
      });
    }
  
  
    }
  
  }
  </code></pre>
  
  <p>my employeeReportsComponent.ts</p>
  
  <pre><code>import { Component, OnInit, ViewChild, ChangeDetectorRef } from '@angular/core';
  import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
  import { SelectionModel } from '@angular/cdk/collections';
  import { WebSocketService } from './../../core/services/web-socket.service';
  import { Reports } from './Reports';
  
  @Component({
    selector: 'app-reports',
    templateUrl: './employeeReports.component.html',
    styleUrls: ['./employeeReports.component.scss']
  })
  export class employeeReportsComponent implements OnInit {
    Reports;
  
    constructor(private socketService: WebSocketService) {
  
    }
  
    ngOnInit() {
  
      this.GetReports();
    }
  
    GetReports() {
      this.socketService.GetEmployeeReportData().subscribe((response) =&gt; {
        this.Reports = response;
  
        console.log(this.Reports);
      },
        (error) =&gt; (console.log(error))
      );
      this.changeDetect.detectChanges();
    }
  
  
  }
  </code></pre>
  
  <p>I am following <a href="https://medium.com/factory-mind/angular-websocket-node-31f421c753ff" rel="nofollow noreferrer">this</a> article </p>
  
  <p><strong>Question</strong></p>
  
  <p>When I user multiple subscribed in components then method call multiple times?</p>
  
  <p>example: when i use three subscribed then method call three times.
  Am i doing wrong?</p>
  
  <p>Is the structure i followed right or not? i am new to angular.</p>