Merge pull request #32 from lahsivjar/issue-31

refs #31 Disconnect stomp client on component unmount.

Author: lahsivjar

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-stomp",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "React websocket component with STOMP over SockJS",
   "main": "./dist/client.js",
   "scripts": {

src/client.jsx

@@ -42,15 +42,33 @@ class SockJsClient extends React.Component {
   }
 
   componentWillUnmount() {
-    this.subscriptions.forEach((subid, topic) => {
-      this.unsubscribe(topic);
-    });
+    this.disconnect();
   }
 
   render() {
     return (<div></div>);
   }
 
+  _initStompClient = () => {
+    // Websocket held by stompjs can be opened only once
+    this.client = Stomp.over(new SockJS(this.props.url));
+    if (!this.props.debug) {
+      this.client.debug = () => {};
+    }
+  }
+
+  _cleanUp = () => {
+    this.setState({ connected: false });
+    this.retryCount = 0;
+    this.subscriptions.clear();
+  }
+
+  _log = (msg) => {
+    if (this.props.debug) {
+      console.log(msg);
+    }
+  }
+
   connect = () => {
     this._initStompClient();
     this.client.connect(this.props.headers, () => {
@@ -66,23 +84,26 @@ class SockJsClient extends React.Component {
         this.props.onDisconnect();
       }
       if (this.props.autoReconnect) {
-        setTimeout(this.connect, this.props.getRetryInterval(this.retryCount++));
+        this._timeoutId = setTimeout(this.connect, this.props.getRetryInterval(this.retryCount++));
       }
     });
   }
 
-  _initStompClient = () => {
-    // Websocket held by stompjs can be opened only once
-    this.client = Stomp.over(new SockJS(this.props.url));
-    if (!this.props.debug) {
-      this.client.debug = () => {};
+  disconnect = () => {
+    // On calling disconnect explicitly no effort will be made to reconnect
+    // Clear timeoutId in case the component is trying to reconnect
+    if (this._timeoutId) {
+      clearTimeout(this._timeoutId);
+    }
+    if (this.state.connected) {
+      this.subscriptions.forEach((subid, topic) => {
+        this.unsubscribe(topic);
+      });
+      this.client.disconnect(() => {
+        this._cleanUp();
+        this._log("Stomp client is successfully disconnected!");
+      });
     }
-  }
-
-  _cleanUp = () => {
-    this.setState({ connected: false });
-    this.retryCount = 0;
-    this.subscriptions.clear();
   }
 
   subscribe = (topic) => {

test/client.test.js

@@ -32,4 +32,12 @@ describe("<SockJsClient />", () => {
     connectSpy.restore();
     mountedComponent.unmount();
   });
+
+  it("Connection is closed on unmount", () => {
+    const disconnectSpy = sinon.spy(SockJsClient.prototype, "componentWillUnmount");
+    const mountedComponent = mount(clientTypes.onlyRequired);
+    mountedComponent.unmount();
+    expect(disconnectSpy.calledOnce).to.be.true;
+    disconnectSpy.restore();
+  });
 });