У меня есть приложение 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, кажется, никогда этого не видит - есть идеи, почему это так?