angular - 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()”发送消息时，服务器会收到它，所以从客户端到服务器的通信工作正常，但控制台没有显示服务器返回的消息：

Hello! Message From Server!!

为什么会这样？我怎样才能解决这个问题？

标签： angulartypescriptrxjsangular9

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，WebSocketSubjectConfig如本例