在Angular（v6）中，不会为“消息”类型调用socket.io“ on”方法的（socket.on（））回调函数

Question

我正在开发一个演示WebSocket应用。技术堆栈包括以下内容：

前端：

• Angular（v6）
• Socket.io

Web服务器：

• Nginx

后端：

• 烧瓶
• Flask-Socketio
• uWSGI

我能够建立WebSocket连接，也能够从Web应用程序发送/接收消息。我可以在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)

让我知道这里是否有人输入。我希望它能帮助任何陷入类似问题的人：）