Node.js &引用；引用错误：未定义WebSocket"；使用RxJs WebSocketSubject和Angular Universal时

我正在设置一个以利用其SSR（服务器端渲染）功能。在我的应用程序中，我使用RxJs使用websocket通信

更具体地说，我正在angular universal 6.x项目中使用

WebSocketSubject

和

webSocket

，该项目在浏览器平台上运行良好。但是，在运行节点web服务器（包含SSR内容（服务器端渲染））时，会引发错误：

ReferenceError:未定义WebSocket

示例代码：

// 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));

我还建立了一个

我使用的环境：

// 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));

• 运行时间：角度6
• RxJS版本：6.2.0、6.2.1、6.2.2（全部测试）

编辑2018-08-02 我能够更准确地解决这个问题。看来，这也是一个网页问题。Angular Universal创建了一个js包，用于在节点服务器上运行Angular应用程序，但在节点上本机没有websocket实现。因此，它必须作为依赖项（npm包）手动添加。我尝试手动将其添加到js服务器包（

const WebSocket=require（'ws'）；

），这解决了问题（即ReferenceError消失）。但是，当我将其添加到稍后转换到js包的TypeScript代码中时，它将无法工作

更多详细信息

• 网页包加载器

  ts加载器
  用于编译TypeScript=>JavaScript

• websocket相关性已添加到包中。json:

  “ws”：“^6.0.0”

• 试图通过将

  const WebSocket=require（'ws'）；

  添加到未编译的TypeScript代码中来引用ws依赖关系将无法解决该问题。它将被编译到js输出文件中的

  var WebSocket=\uuuuuuuu webpack\uuuurequire（333）；

• 在编译的js文件中手动更改

  var WebSocket=\uuuu webpack\u require（333）

  =>

  const WebSocket=require（'ws'）；

  可以解决问题，但这当然是一种攻击

那么，问题是：

// 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));

• 我是否可以“强制”Web包编译依赖项

  const-WebSocket=require（'ws'）；

  =>

  const-WebSocket=require（'ws'）；

  （无更改）
• 或者，在angular universal npm包中注册此依赖项并创建一个pull请求可能是更好的解决方案吗

所需要的就是：

// set WebSocket on global object
(global as any).WebSocket = require('ws');

当然，我们也需要package.json中的

ws

依赖项：

---

npm i ws-s

我使用websockets创建了一个npm包。 为了提供服务器端js和浏览器js的兼容性，我使用以下代码

（注：为打字稿）

if（typeof global！=“未定义”）{
（全局，如有）。WebSocket=require（'ws'）；
}

正如您所提到的，浏览器的全局对象

窗口中已经有一个WebSocket，但节点没有。
由于浏览器没有
global
，因此这个简单的检查很有效

编译代码：

if (typeof global !== 'undefined') {
    global.WebSocket = require('ws');
}

RxJS webSocket函数可以接收webSocket构造函数作为参数。这可用于在非浏览器/通用环境中运行webSocket，如下图所示

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

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

const WebSocketConstructor=WebSocket | | require（'ws'））
常量套接字：WebSocketSubject=webSocket({
网址：'wss://echo.websocket.org', 
WebSocketActor:WebSocketConstructor，
});
在具有ES6或类似功能的nodeJS应用程序中，您必须使用以下功能：

global.WebSocket=require（'ws'）

例如：

import { WebSocketSubject, webSocket } from 'rxjs/webSocket';

global.WebSocket = require('ws'); // <-- FIX ALL ERRORS
const subject = webSocket('ws://...');

从'rxjs/webSocket'导入{WebSocketSubject，webSocket}；
global.WebSocket=require（'ws'）；//检查代码中您是服务器端还是客户端，以便在浏览器中执行代码时使用套接字，这不是一个问题吗？@David关于so（），这建议只在客户端调用websocket，这会使错误消失，但是，这对我来说不是一个解决方案。我真的很想在服务器上执行代码时使用websocket。这就是我的意思。既然代码先在服务器端执行，然后再在客户端执行，为什么需要使用websocket服务器端？@David，这就很简单了也包括在服务器端呈现页面中。如果我对angular应用程序中的任何路由发出http请求，我希望获得该特定路由的完整标记，因此它甚至应该包含websocket数据。您好，我使用angular 7，我希望将其与http一起使用，而不是与ws或wss一起使用。如何实现它。