Merge pull request #294 from cmu15122/preview

tons of attempted socket fixes

Author: jacksontromero

client/src/services/SocketsService.tsx

@@ -3,43 +3,60 @@ import Cookies from 'universal-cookie';
 
 const cookies = new Cookies();
 
-let socket : Socket;
-const SOCKET_URL = process.env.REACT_APP_PROTOCOL + '://' + process.env.REACT_APP_DOMAIN;
+let socket: Socket;
+const SOCKET_URL =
+  process.env.REACT_APP_PROTOCOL + '://' + process.env.REACT_APP_DOMAIN;
 const SOCKET_PATH = process.env.REACT_APP_SOCKET_PATH;
 
 export const initiateSocket = () => {
   if (socket) {
     return;
   }
 
-  socket = io(SOCKET_URL, {path: SOCKET_PATH});
+  socket = io(SOCKET_URL, {
+    path: SOCKET_PATH,
+    transports: ['polling', 'websocket'],
+    closeOnBeforeunload: true,
+    forceNew: true,
+    tryAllTransports: true,
+    withCredentials: true,
+  });
 
   const userCookies = cookies.get('user');
   if (userCookies != null) {
     socket.emit('authenticate', userCookies.access_token);
   }
 
+  socket.on('connect', () => {
+    const transport = socket.io.engine.transport.name; // in most cases, "polling"
+
+    console.log('Connected with transport:', transport);
+
+    socket.io.engine.on('upgrade', () => {
+      const upgradedTransport = socket.io.engine.transport.name; // in most cases, "websocket"
+      console.log(
+          'Transport upgraded from',
+          transport,
+          'to',
+          upgradedTransport,
+      );
+    });
+  });
+
   socket.on('disconnect', (reason, details) => {
     console.log('Client disconnected, reconnecting', reason, details);
-
-    setTimeout(() => {
-      socket.connect();
-    }, 1000);
+    ensureSocketConnected();
   });
 
   socket.on('connect_error', (error) => {
     console.log('Connection error, reconnecting', error.message);
-    setTimeout(() => {
-      socket.connect();
-    }, 1000);
+    ensureSocketConnected();
   });
-
-  // dumbass brute force so nginx doesn't kill us
-  setInterval(() => {
-    socket.emit('ping');
-  }, 5000);
 };
 
+// use subscriptions when reconnecting to listen for all previous events
+const subscriptions = {};
+
 export const socketSubscribeTo = (emission, callback) => {
   if (!socket) {
     initiateSocket();
@@ -48,6 +65,8 @@ export const socketSubscribeTo = (emission, callback) => {
   socket.on(emission, (data) => {
     callback(data);
   });
+
+  subscriptions[emission] = callback;
 };
 
 export const socketUnsubscribeFrom = (emission) => {
@@ -56,6 +75,8 @@ export const socketUnsubscribeFrom = (emission) => {
   }
 
   socket.off(emission);
+
+  delete subscriptions[emission];
 };
 
 export const ensureSocketConnected = () => {
@@ -66,6 +87,13 @@ export const ensureSocketConnected = () => {
 
   if (!socket.connected || !socket.active) {
     console.log('Existing socket not connected or inactive, reconnecting');
+    socket.close();
+    socket.removeAllListeners();
     socket.connect();
+
+    // re-subscribe to all previous events (don't call socketSubscribeTo to avoid infinite loop)
+    Object.keys(subscriptions).forEach((emission) => {
+      socket.on(emission, subscriptions[emission]);
+    });
   }
 };

server/config/config.js

@@ -1,4 +1,4 @@
-require('dotenv').config()
+require('dotenv').config();
 
 module.exports = {
   GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,
@@ -15,5 +15,7 @@ module.exports = {
   CLIENT_PORT: process.env.CLIENT_PORT,
   TOKEN_KEY: process.env.TOKEN_KEY,
   OWNER_EMAIL: process.env.OWNER_EMAIL,
-  OWNER_ACCESS_TOKEN: ''
-}
+  SOCKET_ADMIN_MODE: process.env.SOCKET_ADMIN_MODE,
+  SOCKET_ADMIN_PASSWORD: process.env.SOCKET_ADMIN_PASSWORD,
+  OWNER_ACCESS_TOKEN: '',
+};