fix old WS not open and show subscriptions list

embark-ui/src/components/Communication.js

@@ -10,7 +10,6 @@ class Communication extends Component {
       listenTo: '',
       channel: '',
       message: '',
-      subscribedChannels: [],
       messageList: []
     };
   }
@@ -28,13 +27,6 @@ class Communication extends Component {
 
   listenToChannel(e) {
     e.preventDefault();
-
-    const subscribedChannels = this.state.subscribedChannels;
-    subscribedChannels.push(this.state.listenTo);
-    this.setState({
-      subscribedChannels
-    });
-
     this.props.listenToMessages(this.state.listenTo);
   }
 
@@ -52,11 +44,11 @@ class Communication extends Component {
           <Button color="primary" onClick={(e) => this.listenToChannel(e)}>Start Listening</Button>
         </Form.FieldSet>
 
-        {this.state.subscribedChannels.length > 0 &&
+        {this.props.subscriptions && this.props.subscriptions.length > 0 &&
         <div id="subscribeList">
           <h4>Subscribed channels:</h4>
           <List>
-            {this.state.subscribedChannels.map((item, i) => <List.Item key={i}>{item}</List.Item>)}
+            {this.props.subscriptions.map((item, i) => <List.Item key={i}>{item}</List.Item>)}
           </List>
         </div>
         }
@@ -107,6 +99,7 @@ class Communication extends Component {
 Communication.propTypes = {
   sendMessage: PropTypes.func,
   listenToMessages: PropTypes.func,
+  subscriptions: PropTypes.array,
   channels: PropTypes.object
 };
 

embark-ui/src/containers/CommunicationContainer.js

@@ -34,7 +34,8 @@ class CommunicationContainer extends Component {
         {isEnabledMessage}
         <Communication listenToMessages={(channel) => this.listenToChannel(channel)}
                        sendMessage={(channel, message) => this.sendMessage(channel, message)}
-                       channels={this.props.channels}/>
+                       channels={this.props.channels}
+                       subscriptions={this.props.subscriptions}/>
       </Page.Content>
     );
   }
@@ -45,12 +46,14 @@ CommunicationContainer.propTypes = {
   messageListen: PropTypes.func,
   communicationVersion: PropTypes.func,
   channels: PropTypes.object,
+  subscriptions: PropTypes.array,
   version: PropTypes.number
 };
 
 function mapStateToProps(state) {
   return {
     channels: state.messages.channels,
+    subscriptions: state.messages.subscriptions,
     version: state.messages.version
   };
 }

embark-ui/src/reducers/messagesReducer.js

@@ -16,6 +16,14 @@ export default function messages(state = {channels: {}}, action) {
         }
       };
     }
+    case actions.MESSAGE_LISTEN[actions.REQUEST]: {
+      const subscriptions = state.subscriptions || [];
+      subscriptions.push(action.channel);
+      return {
+        ...state,
+        subscriptions: subscriptions
+      };
+    }
     case actions.MESSAGE_VERSION[actions.SUCCESS]: {
       return {
         ...state,

lib/modules/whisper/index.js

@@ -166,7 +166,7 @@ class Whisper {
         'ws',
         '/embark-api/communication/listenTo/:topic',
         (ws, req) => {
-          listenTo({
+          self.webSocketsChannels[req.params.topic] = listenTo({
             topic: req.params.topic,
             messageEvents,
             toHex: self.web3.utils.toHex,
@@ -175,6 +175,9 @@ class Whisper {
             symKeyID,
             subscribe: self.web3.shh.subscribe
           }, (err, result) => {
+            if (ws.readyState === ws.CLOSED) {
+              return;
+            }
             if (err) {
               return ws.status(500).send(JSON.stringify({error: err}));
             }

lib/modules/whisper/js/communicationFunctions.js

@@ -99,7 +99,8 @@ function listenTo(options, callback) {
         return callback(null, data);
       }
       promise.cb(payload, data, result);
-    });
+    })
+    .catch(callback);
 
   return promise;
 }