Слушайте Websockets в приложении Angular 4 с Socket.io - PullRequest
0 голосов
/ 26 февраля 2019

У меня есть приложение Angular 4.x (клиент), и на бэкэнде я использую приложение NestJS (фреймворк, построенный на основе Express), работающее на localhost: 4001 - я вижу, что веб-сокет подключился, как я вижуэто в Chrome DevTools на вкладке Network> WebSockets со следующим ответом:

42["update", {
"accountMessage": {
    "id": 478,
    "text": ""
},
"networksRequireResetting": [7, 8, 4, 9, 21, 49, 100000271, 100000311],
"_id": "5c7401ea28f6c221eca11ff3",
"accountId": 15,
"__v": 0
}]

У меня есть служба Socket и другая служба уведомлений Socket - socket.service.ts и socket -tification.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Observer } from 'rxjs/Observer';
import * as io from 'socket.io-client';
import { UserService } from "../user.service";
import { SocketNotificationService } from "./socket-notification.service";

@Injectable()
export class SocketsService {
public socketPort: number = 4001;
public serverPort: number = 3001;
private socket;
public url: string = 'http://localhost';

 constructor(
   private userService: UserService,
   private socketNotificationService: SocketNotificationService,
 ) {}

 public initSocket(): void {
   this.socket = io(this.url + ":" + this.socketPort, {
     transports: ['websocket'],
     query: {
       token: this.userService.getAuth().__token,
     },
     secure: true
 });

   this.socketNotificationService.init(this.socket); // 
}

public send(msg: any) {
  this.socket.emit('message', { message: msg } );
}

public onMessage() {
  return Observable.create(observer => {
    this.socket.on('message', msg => {
      observer.next(msg);
    });
 });
}

// Импорт уведомлений через сокет {Injectable} из '@ angular / core';

 @Injectable()
 export class SocketNotificationService {
 public socketConnection: any = {};
 public events: any = [];
 public notification: any = [];

 constructor() {

 }

 ngOnInit(): void {

 }

 public init(connection: object) {
   console.log(connection);
   this.socketConnection = connection;
 }

 public listenForEvent(eventName: string, successCallback: any) {

 }

 public disconnect() {
   if (this.socketConnection) {
     try {
      this.socketConnection.disconnect();
     } catch (e) {
      console.log('Error: ', e);
     }
    }
  }
}

В моем компоненте у меня есть следующие функции - как заставить initIoConnection() распознаватьданные json из приведенного выше ответа websocket, чтобы я мог выполнить дополнительную логику в шаблоне html?

// внутри моего компонента

    ngOnInit() {
       this.initIoConnection();
    }

    public initIoConnection() {
       this.socketService.initSocket();

       // subscribe
       this.ioConnection = this.socketService.onMessage().subscribe(msg => {
         console.log('got a socket message'); // i never see this log??
       });
    }

Я console.log из экземпляра сокета и сделать.send («кое-что здесь»), который выполняет генерацию сокета, но обработчик onMessage, кажется, никогда этого не видит - есть идеи, почему это так?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...