Angular 通用服务器渲染 WebSocket

Posted 2023-02-19

【中文标题】Angular 通用服务器渲染 WebSocket

【英文标题】：Angular Universal server rendering WebSocket

【发布时间】：2017-06-01 17:01:49

【问题描述】：

是否有任何带有 WebSockets 的 Angular Universal 示例？

在我的情况下，服务器端渲染不知道 WebSocket 对象是什么。如果我使用 socket.io，节点服务器会在尝试建立连接时挂起。

有关该问题的一些附加信息：

我从 github 下载了 angular-universal-starter：https://github.com/angular/universal-starter 运行“npm install”和“npm start”的开箱即用效果很好

但是在我将以下代码添加到 AppComponent 之后

   export class AppComponent implements OnInit 
       ngOnInit() 
           let webSocket = new WebSocket("----server url----")
       
   

我的 NodeJs 服务器控制台出现以下错误：

EXCEPTION: WebSocket is not defined
ORIGINAL STACKTRACE:
ReferenceError: WebSocket is not defined
    at AppComponent.ngOnInit (/Volumes/Development/cacadu/website/universal-starter-master2/dist
/server/index.js:41725:29)

【问题讨论】：

你能展示一些你现在拥有的示例代码，并发布一些可能出现的错误/调试信息吗？

在下面查看我的评论

【参考方案1】：

尝试只在客户端调用websocket，例如你可以通过这些导入来检测是浏览器还是服务器

import  isPlatformBrowser  from '@angular/common';
import  Inject, PLATFORM_ID  from '@angular/core';

然后在你的代码中使用它们，这也许可以解决问题！

@Component( ... )
export class AppComponent implements OnInit 

    private isBrowser: boolean = isPlatformBrowser(this.platformId);

    constructor(
       @Inject(PLATFORM_ID) private platformId: Object
    ) 
        if (isBrowser) 
            let webSocket = new WebSocket("----server url----");
        
    

【讨论】：

谢谢，我试过 import isBrowser, isNode from 'angular2-universal/browser';但这当然是错误的……现在看来一切正常！

如果我也想在服务器上调用它怎么办？如果我想使用一些 websocket 数据进行 s-s-r 渲染怎么办？

在这种情况下，您需要使用 DI 来为 s-s-r 提供​​节点 websocket 实现，并确保在服务器将您的应用程序呈现为字符串时立即断开连接，然后重新连接浏览器端。 @浪人

我也更新了答案以使用所需的最新平台服务器导入，angular2-universal 早已被弃用

很好。在尝试解决该问题两天后，您救了我。你是传奇