Angular 9 Rx Js Websockets / WebSocketSubject не получает сообщение от сервера

Question

Я использую Angular 9 и пытаюсь заставить работать rx js 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 и Rx js 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'});
  }

}

И, наконец, html на app.component. html:

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

Моя проблема в том, что когда я отправляю сообщение через "sendMessageToServer ( ) "сервер получит его, поэтому связь от клиента к серверу работает нормально, но консоль не показывает сообщение о том, что сервер возвращается:

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 из WebSocketSubjectConfig собственными методами, как в этом примере