Angular 如何在TypeScript中正确键入RXJS WebSocket？

我有一个通过WebSocket与之通信的小型服务器，它向我发送一致的响应，我想正确地键入它。因此，我在Angular中使用WebSocket，我的服务包括：

private socket$: WebSocketSubject<ResponseInterface>;

在这个阶段，上面的代码不会用Typescript编译，因为我试图将PayloadInterface对象传递到socket中，它是用ResponseInterface键入的。 我还有听力：

public listen$(): Observable<ResponseInterface> {
   return this.socket$.asObservable();
}

public listen$（）：可观察{
返回此.socket$.asObservable（）；
}

我的问题是，我不确定应该使用哪种类型/接口来声明套接字本身。它应该是ResponseInterface，因为我正在听它，还是应该是PayloadInterface，因为我想把（

next

）推到它

然后，根据我在1中选择的内容，我仍然会与监听或“nexting”有类型冲突

---

我错过了什么

任何

/

未知

都是不可能的。

建议您在应用程序中使用socket.io-client的类型定义。然后定义一个服务，如下所示：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Observer } from 'rxjs/Observer';
import { Message } from '../model/message';
import { Event } from '../model/event';

import * as socketIo from 'socket.io-client';

const SERVER_URL = 'https://yourserverhost.com';

@Injectable()
export class SocketService {
    private socket;

    public initSocket(): void {
        this.socket = socketIo(SERVER_URL);
    }

    public send(message: Message): void {
        this.socket.emit('message', message);
    }

    public onEvent(event: Event): Observable<any> {
        return new Observable<Event>(observer => {
            this.socket.on(event, () => observer.next());
        });
    }
}

---

不确定我是否理解你：@enno.void谢谢，看来你正确理解了我的问题。将两个接口的字段组合为一个是有趣的，也是我可以考虑的，但它仍然是一个解决办法。我想知道是否有更好的办法。目前我也有：（this.socket$与Subject一样未知）。next（value）；我的socket$被定义为WebSocketSubject

public listen$(): Observable<ResponseInterface> {
   return this.socket$.asObservable();
}

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Observer } from 'rxjs/Observer';
import { Message } from '../model/message';
import { Event } from '../model/event';

import * as socketIo from 'socket.io-client';

const SERVER_URL = 'https://yourserverhost.com';

@Injectable()
export class SocketService {
    private socket;

    public initSocket(): void {
        this.socket = socketIo(SERVER_URL);
    }

    public send(message: Message): void {
        this.socket.emit('message', message);
    }

    public onEvent(event: Event): Observable<any> {
        return new Observable<Event>(observer => {
            this.socket.on(event, () => observer.next());
        });
    }
}

export enum Event {
    CONNECT = 'connect',
    DISCONNECT = 'disconnect'
}
Then subscribe to your service functions from your Angular component:

export class ChatComponent implements OnInit {
  constructor(private socketService: SocketService) { }

   ngOnInit(): void {
    this.initIoConnection();
  }

  private initIoConnection(): void {
    this.socketService.initSocket();

    this.ioConnection = this.socketService.onMessage()
      .subscribe((message: Message) => {
        this.messages.push(message);
      });


    this.socketService.onEvent(Event.CONNECT)
      .subscribe(() => {
        console.log('Connected to the server');
      });

    this.socketService.onEvent(Event.DISCONNECT)
      .subscribe(() => {
        console.log('Disconnected');
      });
  }
}