Angular CLI : Proxy websocket with proxy. conf.json

Question

我正在尝试使用 Angular CLI 使用 ng serve --proxy-config proxy.conf.json 来代理 websockets，但由于出现此错误而无法正常工作:

与“ws://stream/connect”的 WebSocket 连接失败:连接建立时出错:net::ERR_NAME_NOT_RESOLVED

下面是我如何实例化 websocket 和我的代理配置:

// WebSocket instantiation
const ws = new WebSocket('ws://stream/connect');

// proxy.conf.json
"stream/**": {
  "target": "wss://someurl.com:443",
  "secure": false,
  "ws": true
}

我错过了什么吗？这似乎是可行的，但我无法让它正常工作!

这个已关闭的问题 https://github.com/angular/angular-cli/issues/6081没有帮助这也没有stackoverflow answer .

Answer 1

我想通了!如果它可以帮助任何人...

默认情况下，Angular CLI 在端口 4200 上运行应用程序并且代理正在监听同一端口...因此我应该这样做:

// websocket instantiation
const ws = new WebSocket('ws://localhost:4200/stream/connect');

// proxy.conf.json
"/stream/*": {
  "target": "https://someurl.com:443",
  "secure": false,
  "ws": true
}

WebSocket 构造函数中的硬编码 localhost:4200 不会在每个已部署的环境中工作，因为代理正在监听的 url 会有所不同......所以我来了动态获取位置主机和协议(protocol)并在 WebSocket 构造函数中使用它:

// set ws protocol when using http and wss when using https
const protocol = window.location.protocol.replace('http', 'ws');
// get location host
const host = window.location.host;
// websocket instantiation
const ws = new WebSocket(`${protocol}//${host}/stream/connect`);

然后 BAM ... 瞧! 🎊 🎉 👏