Angular监听WebSocket消息：连接失败及栈溢出问题求助

理论可行性 #

完全可行。Angular支持通过原生WebSocket API或RxJS的webSocket工具实现WebSocket客户端，只要你的NodeJS服务器正常监听ws://localhost:8080端口，Chrome插件Smart Websocket Client发送的消息，Angular客户端完全可以正常接收，二者的通信逻辑互不冲突。

报错1：RangeError: Maximum call stack size exceeded #

问题原因 #

1. 将RxJS的webSocket Subject定义在组件类外部（全局变量），可能导致重复创建连接或重复订阅
2. 直接拼接消息对象到字符串（'message received: ' + msg），若消息是包含循环引用的复杂对象，toString()会触发栈溢出

修正代码（RxJS方式） #

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
   title = 'angular';
   private socketSubject;

   ngOnInit(): void {
     console.log("***");
     // 将Subject移到组件内部作为实例属性，避免全局重复初始化
     this.socketSubject = webSocket('ws://localhost:8080');
     this.socketSubject.subscribe({
       next: msg => console.log('message received: ', JSON.stringify(msg)), // 用JSON.stringify规避循环引用问题
       error: err => console.log(err),
       complete: () => console.log('complete')
      });
   }
}

报错2：WebSocket connection to 'ws://localhost:8080/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED #

问题原因 #

1. NodeJS服务器未启动，或未监听8080端口
2. WebSocket实例在服务构造函数中提前创建，连接时机过早或重复创建连接
3. 服务器未配置允许Angular客户端所在端口（默认4200）的跨域WebSocket连接

排查与修正步骤 #

1. 确认服务器状态：启动你的NodeJS服务器，确保它正在监听ws://localhost:8080，先用Chrome插件测试连接是否正常
2. 修正WebSocket服务代码：将WebSocket实例的创建移到openWebSocket方法中，避免在构造函数中提前初始化：

// web-socket.service.ts
export class WebSocketService {
    webSocket: WebSocket;

    constructor() { 
        // 不在构造函数中创建WebSocket实例
    }
  
    public openWebSocket(){
        // 在方法内创建连接，确保时机合理
        this.webSocket = new WebSocket('ws://localhost:8080');
        
        this.webSocket.onopen = (event) => {
            console.log('open: ', event);
        }

        this.webSocket.onmessage = (event) => {
            console.log('received data: ', event.data);
        }

        this.webSocket.onerror = (error) => {
            console.error('WebSocket error: ', error);
        }

        this.webSocket.onclose = (event) => {
            console.log('WebSocket closed: ', event);
        }
    }
}

3. 检查跨域配置：如果你的NodeJS服务器使用ws库，需配置允许来自http://localhost:4200的连接，示例配置：

// NodeJS服务器端示例（ws库）
const WebSocket = require('ws');
const wss = new WebSocket.Server({ 
    port: 8080,
    // 允许Angular客户端的来源
    verifyClient: (info, done) => {
        const origin = info.origin;
        if (origin === 'http://localhost:4200') {
            done(true);
        } else {
            done(false, 403, 'Forbidden');
        }
    }
});

内容的提问来源于stack exchange，提问作者Antilope