如何在 Angular 12 中制作一个简单的 rxjs/webSocket 服务？

Question

我正在尝试在 Angular 12 中创建一个非常简单的 websocket 服务，但我似乎找不到任何工作示例。我尝试了许多教程，包括this 最近的一个，但即使他们给出的示例似乎也不适用于我（我尝试自己实现它，并且还尝试 git clone 他们的示例。两者都没有工作）

我正在尝试通过移植一个旧的 AngularJS 应用程序来学习 Angular 12，在该应用程序中我使用了 websockets 和 ng-websocket 包。 RxJS 似乎是用于 websockets 的更流行的库之一，所以我选择了它。到目前为止，我只能使以下示例正常工作：

// app.component.ts
import { webSocket } from 'rxjs/webSocket';
import {environment} from '../environments/environment';
...

const subject = webSocket(environment.backendWebsocketEndpoint)
subject.subscribe(msg => {
    console.log('Message from server?', msg)
  },
  err => {
    console.log('Error with websocket connection:', err)
  },
  () => {
    console.log('complete')
  }
)
subject.next('my message');

如何将这个简单的示例转化为可以在组件中使用的服务？我不想经常创建主题变量并在它们上调用.subscribe，因为这会打开一个新的 websocket 连接，整个应用程序可能只需要 1 个共享连接即可工作。

// I'm also having trouble sending JS objs as the data as well. They should be getting JSON.parsed
// and sent but doing something like this gives an error:
//
// var payload = {"action": "whatever", "message": "my message"}
// console.log(payload)
// console.log(JSON.stringify(payload)) // Do I have to stringify first????
// subject.next(payload);
// ^ GIVES ERROR
// Error with websocket connection: SyntaxError: Unexpected token m in JSON at position 0
// adding deserializer: msg => msg to the subject config fixes this but idk why. 

关于更多上下文，我使用 AWS api gateways websocket 作为我的后端，尽管我认为这个 rxjs 库可以与任何 websocket 服务器一起使用。

Answer 1

我认为最简单的例子应该是这样的：

export class WebSocketService {
  private socket$  = new webSocket(url);
  public messages$ = this.socket$.asObservable();

  public sendMessage(msg: any) {
    this.socket$.next(msg);
  }
}

解决您的问题：

...因为这会打开一个新的 websocket 连接，而整个应用程序可能只需要 1 个共享连接即可工作。

这不是问题，RxJs webSocket 只会使用单个连接。来自the docs：

当 WebSocketSubject 被订阅时，它会尝试建立一个套接字连接，除非已经建立了一个。这意味着许多订阅者将始终在同一个套接字上侦听，从而节省资源

是的，您需要在发送消息之前进行字符串化：

...请记住，此值不会事先序列化。因此，JSON.stringify 必须在调用 next 之前手动调用一个值