无法读取angular

Question

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

这是应用程序组件：

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<any>;

  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 ${(<WebSocket.AddressInfo>server.address()).port}`);
});

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

Answer 1

您没有得到任何错误，因为您通过使用空的error回调函数跳过了所有错误：

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

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

  

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

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

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

应该如何解决？

您可以从服务器发送json或提供自定义deserializer：

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