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

Question

我试图在Angular 12中制作一个非常简单的websocket服务，但似乎找不到任何可用的示例。我尝试了很多教程，包括最近的一个，但即使是他们给出的例子似乎也不适合我(我试着自己实现它，也试着git克隆他们的例子。两者都不起作用(

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

// 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连接，整个应用程序可能只需要一个共享连接就可以工作。

// 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网关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连接，整个应用程序可能只需要一个共享连接就可以工作。

这不是问题，RxJs的webSocket将只使用单个连接。来自文档：

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

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

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