Angular CLI: Proxy websocket with proxy.conf.json

Question

I am trying to proxy websockets using ng serve --proxy-config proxy.conf.json with Angular CLI but could'nt get it to work as I am getting this error:

WebSocket connection to 'ws://stream/connect' failed: Error in connection establishment: net::ERR_NAME_NOT_RESOLVED

Here is how I instantiated the websocket and my proxy configuration:

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

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

Am I missing something? It seems to be doable but i can't get it to work correctly!

This closed issue https://github.com/angular/angular-cli/issues/6081 did not helped neither did this stackoverflow answer.

j3ff · Accepted Answer · 2018-02-16 17:52:25Z

54

I figured it out! If it can help anyone...

By default Angular CLI runs the application on port 4200 and proxy is listening on that same port... therefore I should do:

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

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

Hardcoding localhost:4200 in the WebSocket constructor wouldn't work in every deployed environment because the url on which the proxy is listening would differs... so I came up with getting the location host and protocol dynamically and used it in the WebSocket constructor:

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

And BAM ... voilà!! 🎊 🎉 👏

edited Feb 16, 2018 at 17:52

answered Feb 14, 2018 at 21:19

j3ff

6,2098 gold badges46 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ran Lottem Over a year ago

Why is the target switched back to https rather than wss in this answer?

Stefan Over a year ago

"ws": true and target: ws:// ... is the key.

Koray Over a year ago

"ws": true has saved my last hairs.

Shahryar Saljoughi Over a year ago

To guys wondering if this works now too! As of angular 14 @Stefan 's solution works like a charm.

Josef · Accepted Answer · 2021-05-10 21:25:26Z

6

What helped me having both web socket stream and ASP.Net Core controllers was having both "target": "http:yourAppUrl:portToProxyTo" and "ws": true set up in proxy.config.js file.

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

edited May 10, 2021 at 21:25

Josef

3,6522 gold badges26 silver badges27 bronze badges

answered May 10, 2021 at 11:09

CodeSamurai

7135 silver badges7 bronze badges

Collectives™ on Stack Overflow

Angular CLI: Proxy websocket with proxy.conf.json

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related