Angular CLI：使用 proxy.conf.json 的代理 websocket答案

【问题标题】：Angular CLI: Proxy websocket with proxy.conf.jsonAngular CLI：使用 proxy.conf.json 的代理 websocket
【发布时间】：2018-02-14 17:36:42
【问题描述】：

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

WebSocket connection to 'ws://stream/connect' failed: Error in connection establishment: 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 也没有帮助。

【问题讨论】：

标签： angular websocket proxy angular-cli

【解决方案1】：

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

默认情况下，Angular CLI 在port 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 会有所不同......所以我想出了动态获取位置主机和协议并使用它在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 ...瞧！！ ? ? ?

【讨论】：

为什么在这个答案中target 切换回https 而不是wss？
"ws": true 和 target: ws:// ... 是关键。
"ws": true 拯救了我最后的头发。

【解决方案2】：

帮助我同时拥有 Web 套接字流和 ASP.Net Core 控制器的是在 proxy.config.js 文件中设置了 "target": "http:yourAppUrl:portToProxyTo" 和 "ws": true。

{
    "/": {
        "target": "http://someurl.com:443",
        "secure": false,
        "ws": true,
        "logLevel": "debug"
    }
}

【讨论】：