时间戳

首页 > 解决方案 > 在 Angular (v6) 中，socket.io 'on' 方法的 (socket.on()) 回调函数不会被调用为 'message' 类型

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

问题描述

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

前端：

网络服务器：

后端：

我能够建立 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在下面的片段中添加了指示哪些有效，哪些无效。

应用服务.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'
}

我尝试了几件事来解决这个问题，但没有运气。如果有人熟悉此问题或对我做错了什么有任何想法，请在此处发表评论。任何输入将不胜感激。让我知道是否需要任何其他详细信息。谢谢！

标签： angularflaskwebsocketsocket.ioflask-socketio

解决方案

在检查了自己并在网上浏览了几个示例之后，我发现了我的应用程序的问题。它在后端。

如果您注意到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的文件，我在其中声明了我的应用程序并初始化了实例。我正在使用该实例将事件作为. 这在这里（我发出的方式是问题）。正确的方法是导入这个文件并使用它，如下所示：socketiomain/__init__.pyflasksocketiosocketio.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)

让我知道是否有人在这里有任何意见。我希望它会帮助那些遇到类似问题的人:)

推荐阅读