node.js - 使用 RxJs WebSocketSubject 和 Angular Universal 时出现 "ReferenceError: WebSocket is not defined"

Question

我正在设置 angular 6.x univeral project为了利用其 SSR(服务器端渲染)功能。在我的应用程序中，我使用 RxJs 使用 websocket 通信。

更具体地说，我在我的 Angular 通用 6.x 项目中使用 WebSocketSubject 和 webSocket，这在浏览器平台上运行良好。但是，在运行 Node Web 服务器(包含 SSR 内容(服务器端渲染))时，会引发错误:

ReferenceError: WebSocket is not defined

示例代码:

// not actually code from the reproduction repo
import { WebSocketSubject, webSocket } from 'rxjs/webSocket';

const socket: WebSocketSubject<any> = webSocket('wss://echo.websocket.org');
socket.subscribe(msg => doSomething(msg));

请注意，该错误不会发生在应用的浏览器版本上(即ng serve不会抛出错误)，但只会在编译后发生SSR 的东西并运行 Express Web 服务器。要重现错误，必须先运行构建:

# install dependencies
npm install

# build angular bundles for browser and server platforms
npm run build:client-and-server-bundles

# build the webserver
npm run webpack:server

# start the webserver
npm run serve:ssr

# the app is now being served at http://localhost:8081/
# open it in the browser and the error will occur: 'ReferenceError: WebSocket is not defined'

我还设置了 reproduction repo .

我正在使用的环境:

• 运行时:Angular 6
• RxJS 版本:6.2.0、6.2.1、6.2.2(全部测试)

编辑 2018-08-02

我能够更准确地解决问题。看来，这也是一个 webpack 的问题。 Angular Universal 创建了一个 js 包，用于在 Node 服务器上运行 Angular 应用程序，但 Node 上本身没有 websocket 实现。因此，必须手动将其添加为依赖项(npm 包)。我尝试将它添加到 js 服务器包(const WebSocket = require('ws'); 手动，解决了问题(即 ReferenceError 消失了)。但是，当我将其添加到 TypeScript 代码中，该代码稍后会被转编译到 js 包中，它不会工作。

更多详情

• webpack 加载器 ts-loader 用于编译 TypeScript => JavaScript
• 在 package.json 中添加了 websocket 依赖:"ws": "^6.0.0"
• 尝试通过将 const WebSocket = require('ws'); 添加到未编译的 TypeScript 代码来引用 ws 依赖项将无法解决问题。会被编译成js输出文件中的var WebSocket = __webpack_require__(333);，无法解析依赖。
• 手动在编译好的js中修改var WebSocket = __webpack_require__(333); => const WebSocket = require('ws');文件会解决问题，但它当然是一个 hack。

所以，问题是:

• 我可以“强制”webpack编译依赖吗const WebSocket = require('ws'); => const WebSocket = require('ws'); (没有变化)？
• 或者，在 Angular 通用 npm 包中注册此依赖项并创建拉取请求可能是更好的解决方案？

Answer 1

RxJS webSocket 函数可以接收一个 WebSocket 构造函数作为参数。这可以用来在像这样的非浏览器/通用环境中运行 webSocket。

const WebSocketConstructor = WebSocket || require('ws')

const socket: WebSocketSubject<any> = webSocket({
    url: 'wss://echo.websocket.org', 
    WebSocketCtor: WebSocketConstructor,
});


// OR...

import { WebSocket, ...otherStuff... } from 'ws';
import { webSocket, ...otherStuff... } from 'rxjs/webSocket';

const socket$ = webSocket({
  url: 'wss://someplace.com',
  WebSocketCtor: WebSocket,
});