Websocket Regression (#1971)

* fix: addresses websocket connection issues

- reverted upgrade to subscriptions-transport-ws
- removed unnecessary websocket resets
- improved websocket reconnection logic

* Update package.json

client/coral-framework/actions/auth.js

@@ -23,7 +23,11 @@ export const checkLogin = () => (
 
       dispatch(checkLoginSuccess(result.user));
       pym.sendMessage('coral-auth-changed', JSON.stringify(result.user));
-      client.resetWebsocket();
+
+      // We don't need to reset the websocket here because if the request
+      // returned that there was a user (which is the case here), then the
+      // original request has already succeeded, or a previous call to a token
+      // set handler has already reset it.
     })
     .catch(error => {
       if (error.status && error.status === 401 && localStorage) {
@@ -49,7 +53,11 @@ const checkLoginSuccess = user => ({
   user,
 });
 
-export const setAuthToken = token => (dispatch, _, { localStorage }) => {
+export const setAuthToken = token => (
+  dispatch,
+  _,
+  { localStorage, client }
+) => {
   localStorage.setItem('exp', jwtDecode(token).exp);
   localStorage.setItem('token', token);
 
@@ -57,6 +65,9 @@ export const setAuthToken = token => (dispatch, _, { localStorage }) => {
   // may not be able to persist the auth token any other way. Keep it in redux!
   dispatch({ type: actions.SET_AUTH_TOKEN, token });
 
+  // Now that we set a token, let's reset the subscriptions.
+  client.resetWebsocket();
+
   dispatch(checkLogin());
 };
 
@@ -79,6 +90,7 @@ export const handleSuccessfulLogin = (user, token) => (
     );
   }
 
+  // Now that we just set a token, set the token!
   client.resetWebsocket();
 
   dispatch({

client/coral-framework/services/client.js

@@ -88,21 +88,23 @@ export function createClient(options = {}) {
   });
 
   client.resetWebsocket = () => {
-    // Close socket connection which will also unregister subscriptions on the server-side.
-    wsClient.close();
+    if (wsClient.client) {
+      // Close socket connection which will also unregister subscriptions on the server-side.
+      wsClient.close(true);
 
-    // Reconnect to the server.
-    wsClient.connect();
+      // Reconnect to the server.
+      wsClient.connect();
 
-    // Reregister all subscriptions (uses non public api).
-    // See: https://github.com/apollographql/subscriptions-transport-ws/issues/171
-    Object.keys(wsClient.operations).forEach(id => {
-      wsClient.sendMessage(
-        id,
-        MessageTypes.GQL_START,
-        wsClient.operations[id].options
-      );
-    });
+      // Re-register all subscriptions (uses non public api).
+      // See: https://github.com/apollographql/subscriptions-transport-ws/issues/171
+      Object.keys(wsClient.operations).forEach(id => {
+        wsClient.sendMessage(
+          id,
+          MessageTypes.GQL_START,
+          wsClient.operations[id].options
+        );
+      });
+    }
   };
 
   return client;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "talk",
-  "version": "4.6.4",
+  "version": "4.6.5",
   "description": "A better commenting experience from Mozilla, The New York Times, and the Washington Post. https://coralproject.net",
   "main": "app.js",
   "private": true,
@@ -201,7 +201,7 @@
     "smoothscroll-polyfill": "^0.3.5",
     "snake-case": "2.1.0",
     "style-loader": "^0.16.0",
-    "subscriptions-transport-ws": "^0.8.3",
+    "subscriptions-transport-ws": "^0.7.2",
     "supports-color": "^4",
     "timeago.js": "^2.0.3",
     "timekeeper": "^1.0.0",