Angular 9 RxJs Websockets / WebSocketSubject 没有收到来自服务器的消息

Question

我正在使用 Angular 9，我正在尝试让 rxjs websocket 工作，所以首先我创建了一个简单的 nodejs 服务器来接收和发送消息。

这是服务器的代码：

// server.js

const WebSocket = require('ws')

const wss = new WebSocket.Server({ port: 8000 })

wss.on('connection', ws => {
  ws.on('message', message => {
    console.log(`Received message => ${message}`)
  })
  ws.send('Hello! Message From Server!!')
})

现在，对于客户端，我正在使用 Angular 9 和 Rxjs websockets。

所以这里是 app.component.ts 的代码：

import { Component } from '@angular/core';
import {webSocket, WebSocketSubject} from 'rxjs/webSocket';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  myWebSocket: WebSocketSubject<any> = webSocket('ws://localhost:8000');

  constructor() {
    this.myWebSocket.subscribe(
      msg => console.log('message received: ' + msg),
      // Called whenever there is a message from the server
      err => console.log(err),
      // Called if WebSocket API signals some kind of error
      () => console.log('complete')
      // Called when connection is closed (for whatever reason)
   );
  }

  sendMessageToServer() {
    this.myWebSocket.next({message: 'some message'});
  }

}

最后是 app.component.html 上的 html：

<button (click)="sendMessageToServer()">Send Message To Server</button>

我的问题是，当我通过 "sendMessageToServer()" 发送消息时，服务器会收到它，因此从客户端到服务器的通信工作正常，但控制台没有显示服务器 returns返回：

Hello! Message From Server!!

为什么会这样？我该如何解决这个问题？

Answer 1

rxjs/webSocket 将每条消息都作为有效的 JSON 字符串处理，因此您需要从服务器发送同样有效的 JSON 字符串。为此，只需像这样使用 JSON.stringify()：

wss.on('connection', ws => {
  console.log('new connection');
  ws.on('message', message => {
    console.log(`Received message => ${message}`)
  })
  ws.send(JSON.stringify('Hello! Message From Server!!'));
});

在客户端你什么都不用做

预期输出：

更新您也可以使用自己的方法覆盖 serializer 和 deserializer of WebSocketSubjectConfig example

Angular 9 RxJs Websockets / WebSocketSubject 没有收到来自服务器的消息

Angular 9 RxJs Websockets / WebSocketSubject not recieving message from server

rxjs

typescript

angular

angular9