When the state is changed, I would like to close and reconnect using the new state. How do I do that?

[abdu997]

Hello,

I would like to close a socket connection when my this.state.chartSymbol changes, and reconnect with a new WS url using the new this.state.chartSymbol. The image attached is what I have so far, I know its wrong, but I dont know why.

Thank you

[lukeed]

Hey,

When you call reconnect (which is a function btw), it reconnects to the existing / current URL. You need to recreate a new ws entirely by calling binanceSocket (or extracting the Sockette portion to a helper function).

[abdu997]

binanceSocket is initially called in componentWillMount. Even when symbolChanger calls binanceSocket(), it maintains the old connection and the new connection. How do I stop the old connection?

[lukeed]

This should do the trick for you 👍

Closing as it's not related to Sockette anymore, but lemme know how it goes~!

class Foobar extends Component {
    state = {
        symbol: ''
    };

    binanceSocket() {
        this.ws = new Sockette(`ws://.../ws/${this.state.symbol}@kline`, {
            // ...
        });
    }

    componentWillMount() {
        this.binanceSocket();
        // now `this.ws` exists
    }

    // You can also do this in:
    // - componentWillReceiveProps
    // - // etc, depends on your app
    componentDidUpdate(_, prev) {
        let now = this.state;
        if (prev.symbol !== now.symbol) {
            // We now have a NEW symbol; update the socket
            this.ws.close(); // graceful shutdown of old socket
            this.binanceSocket(); // NEW websocket is now created
        }
    }
}