SocketIO web socket 必须放在 Angular Service 类上答案

【问题标题】：SocketIO web socket must be placed on Angular Service classSocketIO web socket 必须放在 Angular Service 类上
【发布时间】：2021-01-23 14:12:03
【问题描述】：

我正在使用 Angular 和 SocketIO 来构建一个纸牌游戏模拟器。我有一个游戏服务，它使用 Web 套接字从服务器发送和接收消息。

如果我将网络套接字作为服务的私有属性，一切正常。

@Injectable()
export class GameService {
private socket = io(environment.ws_url

playCards(card): {
  this.socket.emit('play_card', card)
}
...

这种方法的问题是我想在多个地方使用这个 GameService。如果我在多个地方使用该服务，那么我会创建不需要的套接字连接。

我尝试将套接字设置为这样的常量

const socket = io(environment.ws_url)

@Injectable()
export class GameService {
  playCards(card): {
    socket.emit('play_card', card)
 }
}
...

这可以确保每个客户端只创建 1 个连接。但是，来自服务器的响应需要超过 5 秒才能被前端接收到，并且 UI 仅从执行该操作的客户端更新。知道为什么吗？

如何确保每个客户端只有一个 Web 套接字，并且仍然在其他组件中重复使用套接字/服务？

我真的很希望能够在多个地方使用这项服务，因为它会让事情变得更容易。

作为一种解决方法，我总是可以将事件从我的组件发送到将成为 GameService 的唯一导入器的根组件。这种方法非常麻烦，我想避免这样做

编辑：我想我的问题来自套接字通信有时是在角度区域之外完成的。使用this.ngZone.run(() => observer.next(data)) 包装套接字响应解决了我的问题，并允许我在多个地方使用该服务而无需创建新连接。

【问题讨论】：

为什么不使用 DI 系统在需要的地方提供值？这里涵盖了各种选项：angular.io/guide/dependency-injection-providers
我正在这样做。问题在于，在第一种情况下（将套接字作为服务的属性）会导致每次注入服务时都会创建一个新的套接字连接。第二种情况，问题是socket的通信时间太长，收到响应时UI不更新

标签： angular sockets socket.io

【解决方案1】：

我可以使用这种方法为每个客户端创建一个连接

const socket = io(environment.ws_url);
@Injectable()
export class GameService {
  constructor(private ngZone: NgZone) {}
  private socket = socket;
  private createObservalble<T>(message: string): Observable<T> {
    const observable = new Observable<T>((observer) => {
      this.socket.on(message, (data: T) => {
        this.ngZone.run(() => observer.next(data));
        // In case of error, disconnect
        return () => this.socket.disconnect();
      });
    });
    return observable;
  }

使用此方法会导致套接字通信发生在角度区域之外，我需要添加行 this.ngZone.run(() => observer.next(data)); 以强制更新 UI

【讨论】：