Список пользователей не загружается из бэкэнда в Ionic 3

Question

Когда мы используем локальный сервер, он выбирает список пользователей, но когда мы подключаем его к развернутому бэкэнду, это не так. Дело в том, что это не проблема бэкэнда, потому что та же самая маршрутизация работает с Angular штрафом. Эта проблема происходит только на Ionic. Вот код:

constructor(public navCtrl: NavController,
    public navParams: NavParams,
    private usersProvider: UsersProvider,
    private ref: ChangeDetectorRef,
    private tokenProvider: TokenProvider) {

    this.socket = io('URL');
    console.log(this.groupFilters);
  }

  ngOnInit(): void {
    this.tokenProvider.GetPayload().then(value => {
      this.noMoreAvailable = false;
      this.token = value;
      this.Dataload = 1;
      this.page = 0;
      this.filter = '';
      this.filteredUsers = [];
      this.GetUsers(this.token.username);

    });

    this.socket.on('refreshPage', () => {
      console.log('refreshing page')
      this.tokenProvider.GetPayload().then(value => {
        this.noMoreAvailable = false;
        this.token = value;
        this.Dataload = 1;
        this.page = 0;
        this.filter = '';
        this.filteredUsers = [];
        this.GetUsers(this.token.username);

      });
    });
  }


  ngOnChanges(): void {
    if (this.groupFilters) this.filterUserList(this.groupFilters, this.users);
  }



  filterUserList(filters: any, users: any): void {
    console.log(filters)
    this.isEmptyObject = false
    for (var name in filters) {
      this.isEmptyObject = true
    }
    this.noMoreAvailable = true;
    this.page = 0;
    this.Dataload = 1;
    this.filteredUsers = [];
    this.filter = this.isEmptyObject == true ? JSON.stringify(filters) : '';
    this.GetUsers(this.token.username);
  }

  GetUsers(name) {
    this.usersProvider.GetAllUsersPagging(name, this.page, this.filter).subscribe(
      data => {
        console.log(data)
        // _.remove(data.result, { username: name });
        this.users = data.result;
        // this.filteredUsers = this.filteredUsers.length > 0 ? this.filteredUsers : this.users;
        if (data.result.length == 0) {
          this.Dataload = 0;
        } else {
          this.filteredUsers.push.apply(this.filteredUsers, this.users);
        }
        this.page = parseInt(this.page) + 1;


      },
      err => console.log(err)
    );
  }

  doInfinite(infiniteScroll) {
    console.log("CALLEDInfinit")
    console.log('Begin async operation', this.Dataload);
    setTimeout(() => {
      if (this.Dataload == 0) {
        this.noMoreAvailable = true;
      }
      else {
        this.GetUsers(this.token.username);
      }
      console.log('Async operation has ended', this.filteredUsers);
      infiniteScroll.complete();
    }, 500);
  }

  ViewProfile(value) {
    this.navCtrl.push('ViewProfilePage', { userData: value });
    this.usersProvider.ProfileNotifications(value._id).subscribe(
      data => {
        this.socket.emit('refresh', {});
      },
      err => console.log(err)
    );
  }
}

HTML

<div class="group">
  <ion-grid>
    <ion-row>
      <ion-col col-6 col-md-4 col-lg-3 col-xl-2 class="created_group"
        *ngFor=" let user of filteredUsers | filter: searchByKeyword: 'name'" (click)="ViewProfile(user)">
        <div class="container">
          <div class="imgs">
            <img class="imgBg" style="box-shadow: 0 0 5px grey;"
              src="http://res.cloudinary.com/dfg5p1pww/image/upload/v{{user.picVersion}}/{{user.picId}}">
          </div>
          <p ion-text color="dark">{{user.firstName}} {{user.lastName}}</p>
          <p ion-text color="dark">
            {{user.age}}
          </p>
          <p ion-text color="dark" class="country">
            {{user.country}},{{user.city}}
          </p>
        </div>
      </ion-col>
    </ion-row>
    <ion-infinite-scroll (ionInfinite)="doInfinite($event)" *ngIf="!noMoreAvailable">
      <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </ion-grid>
</div>

Показывает Не удалось загрузить ресурс: net :: ERR_CONNECTION_REFUSED в консоли. В чем проблема, что он не извлекается из реального бэкэнд API?

Answer 1

Как я понял из вашего кода, я думаю, что вы делаете следующее:

import * as io from 'socket.io-client';
socket:any;
socketURL:any;
   constructor(public navCtrl: NavController) {
      this.socketURL = "URL";
      this.socket = io(this.socketURL);    
  }

В одном из моих приложений, который отлично работает, у меня есть

import { Socket } from 'ng-socket-io';

export class Home {
 constructor(private socket: Socket) {
  this.socket.connect();
  this.socket.emit('value', 123);
  }
}

А в app.module.ts

import { SocketIoModule, SocketIoConfig } from 'ng-socket-io'; 
const config: SocketIoConfig = { url: 'http://localhost:3001', options: {} }; 


@NgModule({ 
imports: [ …. SocketIoModule.forRoot(config) …. ] 
})

Так что попробуйте сделать, как в примере выше.

Я использую этот ресурс . Не стесняйтесь взглянуть на него и сравнить его с вашей работой.