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

Posted 2023-02-16

【中文标题】如何在 Angular 12 中制作一个简单的 rxjs/webSocket 服务？

【英文标题】：How to make a simple rxjs/webSocket service in Angular 12?

【发布时间】：2021-06-09 00:32:43

【问题描述】：

我正在尝试在 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 服务器一起使用。

【参考方案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 之前手动调用一个值

【讨论】：

这让我走上了正轨，谢谢。我认为诀窍是 .asObservable();直到现在才看到使用。