Persistent Connection / Keep-Alive Requests

[matthewwoop]

Any recommendations on how to achieve a persistent connection between a Next app and an API.

Ideally, open the connection on componentWillMount and close the connection on componentWillUnmount

I have only found solutions that work either on the client (e.g. XMLHttpRequest) or the server (e.g. axios httpAgent), but not universally

[matthewwoop]

Found a semi-solution.

In componentDidMount, one has access to the window object, which in turn exposes XMLHttpRequest.

This allows for something like the following

componentDidMount() {
        this.liveClient = new window.XMLHttpRequest();
        this.liveClient.open('get', url);
        this.liveClient.send();
        this.liveClient.onprogress = function(){
            //do something
        };
}

Going to leave this open for a bit in case any one has better suggestions, or sees pitfalls in this method. Ideally would still like to initiate the connection on componentWillMount, but this will do for now.

[arunoda]

Do not use componentWillMount. It runs on the server too.
You need to do this on the client, so use componentDidMount to start the connection.
Then use componentWillUnmount to close the connection.