Angular 17中WebSocket未定义报错，无法连接SpringBoot WebSocket服务

问题原因 #

WebSocket是浏览器原生提供的API，仅在浏览器环境中可用。如果你的代码在Node.js环境（比如Vite服务端编译、Angular SSR渲染阶段）执行，就会触发这个错误——因为Node.js本身没有内置WebSocket构造函数。

解决方案 #

1. 限定代码在浏览器环境执行 #

利用Angular的isPlatformBrowser工具判断当前环境，确保WebSocket连接只在浏览器中初始化。示例代码：

import { Component, OnInit, PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  socket: WebSocket | null = null;

  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  ngOnInit(): void {
    if (isPlatformBrowser(this.platformId)) {
      this.socket = new WebSocket("ws://localhost:8050/socket");
      
      // 绑定连接状态监听
      this.socket.onopen = () => console.log('WebSocket连接成功');
      this.socket.onmessage = (e) => console.log('收到消息:', e.data);
      this.socket.onerror = (err) => console.error('连接出错:', err);
      this.socket.onclose = (e) => console.log('连接关闭:', e);
    }
  }
}

2. 调整代码执行时机 #

如果不需要SSR，也可以把WebSocket初始化逻辑放在组件的ngAfterViewInit钩子中——这个阶段组件已经完成渲染，必然处于浏览器环境：

ngAfterViewInit(): void {
  this.socket = new WebSocket("ws://localhost:8050/socket");
  // 后续监听逻辑同上
}

3. 排查Vite SSR配置（若启用） #

如果项目开启了SSR，需在vite.config.ts中确保WebSocket相关代码不被服务端编译处理：

export default defineConfig({
  ssr: {
    external: ['ws'] // 排除WebSocket相关模块的服务端编译
  }
});

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