Socket.io 未在客户端接收消息答案

【问题标题】：Socket.io not receiving messages on clientSocket.io 未在客户端接收消息
【发布时间】：2021-05-23 00:43:27
【问题描述】：

我一直在尝试使用 this 教程使用 angular 和 nestjs 测试 websocket。

这是我的 Nestjs 项目的网关。

import {
  SubscribeMessage,
  WebSocketGateway,
  WebSocketServer,
  WsResponse,
  MessageBody
} from '@nestjs/websockets';
import { Server } from 'socket.io';

@WebSocketGateway(3001)
export class EventsGateway {
  @WebSocketServer()
  server: Server;

  @SubscribeMessage('message')
  handleMessage(@MessageBody() data: any): WsResponse<string> {
    return { event: 'response', data: data };
  }

  @SubscribeMessage('broadcast')
  broadcast(@MessageBody() data: any): void {
    this.server.emit('broadcast', 'response')
  }
}

这是我的 Angular 项目中的服务。

import { Injectable } from '@angular/core';

import { io } from 'socket.io-client';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class WebsocketService {
  private url = 'http://localhost:3001';
  private socket;

  connect() {
    this.socket = io(this.url);
  }

  emit(emitName: string, data?) {
    this.socket.emit(emitName, data);
  }

  on(onName: string) {
    let observable = new Observable(observer => {
      this.socket.on(onName, (data) => {
        observer.next(data);
      });

      return () => { this.socket.disconnect(); };
    });
    return observable;
  }
}

但是，结果不是我所期望的。客户端无法检索 websocket 数据。你可以克隆我的仓库here。

请帮忙！

【问题讨论】：

查看您的依赖项，可能是 socket.io 版本不匹配。 Nest（至少在 v8 之前）只支持 socket.io v2，而在客户端你有 socket.io-client v3，它使用 socket.iov3 引擎。这两个引擎不兼容。有一个未解决的问题，并计划在下一个主要版本中修复
@JayMcDoniel 可能是这样。因为我在 Angular 上也有同样的症状。我现在使用了 2 年的非打字 socket.io 代码，它的工作就像这个问题无关紧要。但是，NPM 应该帮助我们选择正确的版本，但它没有。 ??????

标签： angular websocket socket.io nestjs

【解决方案1】：

我已经在互联网上搜索了一段时间来解决这个问题，但我找不到一个可以解决的问题。可能是 Nest 错误，也可能是 socket.io 的打字问题，或者其他任何问题。

因此，我目前解决此问题的最佳方法是使用基本的 express 解决方案并完全忽略 Nestjs 方法。

先卸载 Nest 的 socket.io。

npm uninstall @nestjs/websockets @nestjs/platform-socket.io @types/socket.io

第二次安装express和socket.io

对于这个，我将使用已知的工作版本。

npm install --save express@4.17.1 socket.io@3.0.3

或者你可以使用当前版本

npm install --save express socket.io

第三，我想让 Nestjs 能够与 websocket 通信。所以，我会将套接字放在服务中。下面的代码将在ws目录下创建msg.service.ts文件。

nest g s /ws/msg

最后，我将 websocket 代码放入 msg.service.ts 文件中。

import { Injectable } from '@nestjs/common';

@Injectable()
export class MsgService {

  private readonly PORT = '3030';
  private readonly app;
  private readonly http;
  private readonly io;
  private i: number = 0;

  constructor() {
    this.app = require('express')();
    this.http = require('http').Server(this.app);
    this.io = require('socket.io')(this.http, { cors: { origin: '*', } });

    this.http.listen(this.PORT, () => {
      console.log(`Socket.IO server running at http://localhost:${this.PORT}/`);
      this.loop();
    });
  }

  // Test broadcast every second.
  loop() {
    setTimeout(() => {
      this.i++;
      this.io.emit('broadcast', this.i);
      console.log(this.i);
      this.loop();
    }, (1 * 1000));
  };

}

就是这样。当 Nestjs 代码启动时，websocket 就会运行。

我还不知道会导致什么样的性能问题，但我认为这是值得的，因为我们不再为 Nestjs 未来版本的错误而烦恼。

【讨论】：