无法读取angular上的websocket

我正在尝试通过Angular 8应用程序和简单服务器之间的websockets交换信息。奇怪的是，我能够将信息发送到服务器，但是我似乎找不到如何连接应用程序以接收回声的方法。

这是应用程序组件：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  ws : WebSocketSubject;

  ngOnInit() {}

  constructor() {
    this.ws = webSocket('ws://localhost:8999');
    this.ws.subscribe({
      next : (data) => console.log(`Received ${data}`),
      error : (err) => {},
      complete : () => {}
    });
  }

  buttonClick() {
    this.ws.next("test");
  }

}

这是服务器：

import * as express from 'express';
import * as http from 'http';
import * as WebSocket from 'ws';

const server = http.createServer(express());

const wss = new WebSocket.Server({ server });

wss.on('connection', (ws: WebSocket) => {
    // Print and echo
    ws.on('message', (data) => {
      console.log(`received: ${data}`);
      ws.send(`echo: ${data}`);
    })
});

setInterval(() => wss.clients.forEach(ws => ws.send(`ping!`)), 2000);


// Start server
server.listen(process.env.PORT || 8999, () => {
    console.log(`Server started on port ${(server.address()).port}`);
});

用一个简单的工具测试服务器至少可以确认我这一方面正在正常工作

您不会收到任何错误，因为您可以通过使用空error回调跳过所有错误：

this.ws.subscribe({
  next : (data) => console.log(`Received ${data}`),
  error : console.log, <==================================== add this
  complete : () => {}
});

记录错误后，您应该会得到类似以下内容的信息：

SyntaxError：JSON中的意外令牌p在JSON.parse（）的位置0

这似乎是来自您的websocket的响应未正确处理。这是因为rxjs需要json，但是您正在发送纯字符串。rxjs的Websocket实现使用默认配置，如下所示：

const DEFAULT_WEBSOCKET_CONFIG: WebSocketSubjectConfig = {
  url: '',
  deserializer: (e: MessageEvent) => JSON.parse(e.data),
  serializer: (value: any) => JSON.stringify(value),
};

应该如何解决？

您可以从服务器发送json或提供custom deserializer：

this.ws = webSocket({
  url: 'ws://localhost:8999',
  deserializer: e => e.data
});