Angular 17 WebSocket 未定义

Question

我有一个 SpringBoot 应用程序，我在其中配置了一个 WebSocket，我可以使用 Postman 连接到它。我把它放在 ws://localhost:8050 上。只有一个命名空间“socket”。

我尝试配置本机 Angular Websocket 和简单的连接，但遇到内部服务器错误。

[]

我尝试像这样创建 WebSocket 连接。

    this.socket = new WebSocket("ws://localhost:8050/socket")

我没有为此构造函数导入任何像“ws”这样的库，它只是本机库。

我收到此错误。

[vite] Internal server error: WebSocket is not defined

我希望能够连接到服务器。

Answer 1

当您使用 SSR 时。您需要阻止服务器端渲染或构建工具执行 WebSocket 代码。

我建议在初始化 WebSocket 之前检查窗口对象是否可用。

if (typeof window !== 'undefined') {
    this.socket = new WebSocket("ws://localhost:8050/socket");
}

这将确保 WebSocket 仅在浏览器环境中创建。

或者您可以使用 platformId 和 isPlatformBrowser。与第一个例子相比，这是一个更好的 Angular 例子，第一个例子更多的是 JS。

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

@Component({
  // Your html, scss etc...
})
export class MyComponent implements OnInit {

    private isBrowser: boolean;

    constructor(@Inject(PLATFORM_ID) private platformId: Object) {
        this.isBrowser = isPlatformBrowser(this.platformId);
    }

    ngOnInit() {
        if (this.isBrowser) {
            // Connect to WebSockets here
        } else {
            // Work without websockets or do nothing
        }
    }
}

通过这种方法，您的 Angular 应用程序应该正确区分服务器和浏览器环境，并且仅在浏览器中尝试使用 WebSocket。