В Angular (v6) функция обратного вызова метода socket.io (socket.on ()) не вызывается для типа «сообщение»

Question

Я работаю над приложением Demo WebSocket.Технический стек состоит из следующих компонентов:

Внешний интерфейс:

• Angular (v6)
• Socket.io

Веб-сервер:

• Nginx

Бэкэнд:

• Колба
• Колба-розетка
• uWSGI

Я могу установить соединение через WebSocket, а также отправлять / получать сообщения из моего веб-приложения.Я вижу сообщение об отправке / получении в разделе Chrome -> Network -> WS, как показано ниже.

Итак, я отправляю Hey!! и получаюназад 'message', 'my message'.Эта часть выглядит хорошо для меня. проблема заключается в том, что теперь я хочу взять incoming message и отобразить его в своем приложении.Однако я не могу сохранить это сообщение или console.log() входящий ответ от сервера, так как метод обратного вызова socketio.on('message', callback()) не запускается, что по сути имеет логику для обработки входящего сообщения, как показано ниже:

Это блок частичного кода из app.service.ts, который не работает.Полный фрагмент кода вставлен ниже.

 public onMessage(): Observable<any> {
return new Observable<any>(observer => {
  console.log('hereeee');// This console happens
  // This below method is not firing
  this.socket.on('message', (data: any) => {
    console.log('Received a message from websocket service');
    observer.next(data);
  });
});

}

Я вставляю полные фрагменты кода сервера и клиента ниже.

Сервер:

@socketio.on('message', namespace='/websocket_test')
def msg(msg):
    socketio.emit('message', 'my message', room=request.sid)

Клиент:

Я использую Angular + RxJS для определения моих socket.io методов обслуживания.Кроме того, я добавил comments во фрагментах ниже, чтобы указать, что работает, а что нет.

app.service.ts

import {HttpClient} from '@angular/common/http';
import {Injectable} from '@angular/core';
import {Observable} from 'rxjs';
import * as socketIo from 'socket.io-client';

export enum Event {
  CONNECT = 'connect',
  DISCONNECT = 'disconnect'
}
     @Injectable()
        export class AppService {
      constructor(private http: HttpClient) {
      }

      private socket;

      public initSocket(): void {
        this.socket = socketIo('/websocket_test');
      }

      // This method is used to send message to backend
      public sendMe(message: any): void {
        this.socket.emit('message', {data: message});
      }

      public onMessage(): Observable<any> {
        return new Observable<any>(observer => {
          console.log('hereeee'); // This console happens
          // This below method is not firing
          this.socket.on('message', (data: any) => {
            console.log('Received a message from websocket service');
            observer.next(data);
          });
        });
      }

      // This gets called on connect and disconnect event.
      public onEvent(event: Event): Observable<any> {
        return new Observable<Event>(observer => {
          this.socket.on(event, () => observer.next());
        });
      }

    }

app.component.ts

import {Component, OnInit} from '@angular/core';
import {AppService} from './app.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent implements OnInit {
  messages = [];
  isConnected: boolean;

  constructor(private appService: AppService) {
  }

  ngOnInit() {
    this.initIoConnection();
  }

  private initIoConnection(): void {
    this.appService.initSocket();

    // This happens
    this.appService.onEvent(Event.CONNECT)
      .subscribe(() => {
        this.isConnected = true;
        console.log('connected');
      });

    this.appService.onMessage()
      .subscribe((message: any) => {
        // not getting called
        console.log('Message', message);
        this.messages.push(message);
        // console.log(this.messages);
      });

    this.appService.onEvent(Event.DISCONNECT)
      .subscribe(() => {
        this.isConnected = false;
        console.log('disconnected');
      });
  }

  public myMessage(message: string): void {
    if (!message) {
      return;
    }

    this.appService.sendMe({
      from: this.user,
      content: message
    });
    this.messageContent = null;
  }
}

export enum Event {
  CONNECT = 'connect',
  DISCONNECT = 'disconnect'
}

Я пробовал несколько вещей, чтобы выяснить проблему, но безуспешно.Если кто-то знаком с этой проблемой или имеет представление о том, что я делаю неправильно, пожалуйста, прокомментируйте здесь.Любой вклад будет оценен.Дайте мне знать, если понадобятся какие-либо дополнительные детали.Спасибо!

Answer 1

После проверки себя и просмотра нескольких примеров в Интернете я выяснил проблему с моим приложением.Это было на бэкэнде.

Если вы заметили фрагмент кода server, которым я поделился в приведенном выше вопросе, я определяю событие socketio следующим образом:

from server.main import socketio

@socketio.on('message', namespace='/websocket_test')
def msg(msg):
    socketio.emit('message', 'my message', room=request.sid)

Итак, я делаю import из socketio из main/__init__.py файла, где я объявил свое приложение flask, а также инициализировал экземпляр socketio.И я использую этот экземпляр для отправки событий клиенту как socketio.emit('message', 'my message', room=request.sid).Это здесь (способ, которым я излучаю, был проблемой) .Правильный способ - импортировать emit в этот файл и использовать его, как показано ниже:

from server.main import socketio
from flask_socketio import emit

@socketio.on('message', namespace='/websocket_test')
def msg(msg):
    emit('message', 'my message', room=request.sid)

Дайте мне знать, если у кого-нибудь есть здесь какие-либо входные данные.Я надеюсь, что это поможет любому, кто застрял на подобной проблеме:)