在 Angular (v6) 中，socket.io 'on' 方法的 (socket.on()) 回调函数未被调用为 'message' 类型

Question

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

前端：

Angular(v6)
Socket.io

网络服务器：

Nginx

后端：

烧瓶
Flask-Socketio
uWSGI

我能够建立 WebSocket 连接，也能够 send/receive 从我的网络应用程序发送消息。我可以在 Chrome -> Network -> WS 部分看到消息 sent/received，如下所示。

所以，我正在发送 Hey!! 并接收回 'message', 'my message'。这部分在我看来还不错。问题是现在我想把这个 incoming message 显示在我的应用程序中。但是，我不能能够存储此消息或 console.log() 来自服务器的传入响应，因为 socketio.on('message', callback()) 回调方法未被触发，这基本上具有逻辑处理传入的消息，如下所示：

This is the partial code block from app.service.ts that is not working. Complete code snippet is pasted below.

 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)

因此，我正在从 main/__init__.py 文件中执行 socketio 的 import，我在其中声明了我的 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)

如果有人在这里有任何意见，请告诉我。我希望它能帮助遇到类似问题的任何人:)

在 Angular (v6) 中，socket.io 'on' 方法的 (socket.on()) 回调函数未被调用为 'message' 类型

In Angular (v6), socket.io 'on' method's (socket.on()) callback function is not getting called for 'message' type

websocket

flask

socket.io

flask-socketio

angular