socket bug fix

src/main/api/vmixSocket.js

@@ -16,6 +16,9 @@ export function vmixApi(vmixEvent, mainWindow, windows, connection, vmix) {
         console.log('connected to server!');
       },
       () => {
+        vmixPostReqListener();
+        vmixRequestXmlListener();
+        socketShutdownListener();
         connection.write('SUBSCRIBE ACTS\r\n');
         // console.log('one time connection res');
         let data = { isConnected: true, ip: ip };
@@ -42,11 +45,13 @@ export function vmixApi(vmixEvent, mainWindow, windows, connection, vmix) {
     };
 
     vmixRequestXmlListener = () => {
+      console.log('running xml listener');
       ipcMain.handle('vmix-reqXml', () => {
         requestXmlData();
       });
     };
     vmixPostReqListener = () => {
+      console.log('running xml listener');
       ipcMain.handle('vmix-postFunction', (__, cmd) => {
         vmixPostFunction(cmd);
         functionReqCount = functionReqCount + 1;
@@ -59,10 +64,6 @@ export function vmixApi(vmixEvent, mainWindow, windows, connection, vmix) {
         requestShutdown();
       });
     };
-
-    vmixPostReqListener();
-    vmixRequestXmlListener();
-    socketShutdownListener();
   };
 
   let timeout = null;
@@ -104,14 +105,14 @@ export function vmixApi(vmixEvent, mainWindow, windows, connection, vmix) {
   };
 
   const handleError = (e, connection) => {
-    // console.log(e);
-    // console.log('----error----');
+    console.log('----error----');
     switch (e.code) {
       case 'EPIPE':
         requestShutdown(connection);
         removeIpcListeners();
         initConnectListener();
         mainWindow.webContents.send('socket-error', e.code);
+        mainWindow.webContents.send('vmix-disconnected');
         break;
       case 'ECONNREFUSED':
         requestShutdown(connection);
@@ -125,17 +126,30 @@ export function vmixApi(vmixEvent, mainWindow, windows, connection, vmix) {
 
   const requestShutdown = (connection) => {
     console.log('request shutdown');
-    if (window.length == 0 && connection) {
+    if (windows.length == 0 && connection) {
       console.log('request shutdown check passed');
       connection.end();
     }
   };
 
   const removeIpcListeners = () => {
+    if (
+      vmixPostReqListener == null &&
+      vmixRequestXmlListener == null &&
+      socketShutdownListener == null
+    )
+      return;
+    console.log('removing listeners');
     ipcMain.removeHandler('vmix-connect', initConnectListener);
     ipcMain.removeHandler('vmix-reqXml', vmixPostReqListener);
-    ipcMain.removeHandler('vmix-PostReq', vmixRequestXmlListener);
+    ipcMain.removeHandler('vmix-postFunction', vmixRequestXmlListener);
     ipcMain.removeHandler('socket-shutdown', socketShutdownListener);
+    // initConnectListener = null;
+    vmixPostReqListener = null;
+    vmixRequestXmlListener = null;
+    socketShutdownListener = null;
+
+    console.log(vmixRequestXmlListener, vmixPostReqListener);
   };
 
   initConnectListener = () => {

src/main/preload.js

@@ -41,6 +41,7 @@ contextBridge.exposeInMainWorld('api', {
 messages = [
   'app-isVmixConnected',
   'vmix-connected',
+  'vmix-disconnected',
   'vmix-xmlDataRes',
   'version',
 ];

src/renderer/App.jsx

@@ -6,6 +6,7 @@ import { StoreContext } from './stores/store.context';
 import { IpForm } from './components/ip.app';
 import { Ipc } from './components/ipc.app';
 import { Dashboard } from './pages/dashboard.app';
+import { Toast } from './components/toast.app';
 
 import Grid from '@material-ui/core/Grid';
 import Button from '@material-ui/core/Button';
@@ -27,6 +28,7 @@ const App = observer(() => {
         }}
         justifyContent="space-around"
       >
+        <Toast />
         <Ipc />
         {!vmix.ip && <IpForm />}
         {vmix.ip && <Dashboard />}

src/renderer/components/ip.app.jsx

@@ -6,6 +6,7 @@ import Button from '@material-ui/core/Button';
 import Grid from '@material-ui/core/Grid';
 import Box from '@material-ui/core/Box';
 import Version from './version.app.jsx';
+import { CircularProgress, Typography } from '@material-ui/core';
 
 import { StoreContext } from '../stores/store.context';
 
@@ -55,11 +56,14 @@ export const IpForm = observer(() => {
                 style={{
                   marginTop: 10,
                   marginBottom: 15,
-                  paddingLeft: 30,
-                  paddingRight: 30,
+                  width: 100,
                 }}
               >
-                Set
+                {vmix.isAttemptingConnection ? (
+                  <CircularProgress size={25} />
+                ) : (
+                  <Typography>Set</Typography>
+                )}
               </Button>
 
               <Version />

src/renderer/components/ipc.app.jsx

@@ -14,6 +14,10 @@ export const Ipc = observer(() => {
     vmix.connected();
   };
 
+  const vmixDisconnected = () => {
+    vmix.disconnected();
+  };
+
   const newWindow = () => {
     app.createWindow();
   };
@@ -26,6 +30,7 @@ export const Ipc = observer(() => {
   useEffect(() => {
     window.api.on('app-isVmixConnected', isVmixConnected);
     window.api.on('vmix-connected', vmixConnected);
+    window.api.on('vmix-disconnected', vmixDisconnected);
     window.api.on('vmix-xmlDataRes', vmixDataRes);
     window.api.on('app-newWindow', newWindow);
 

src/renderer/components/toast.app.jsx

@@ -0,0 +1,47 @@
+import React, { useContext } from 'react';
+import { observer } from 'mobx-react';
+
+import Snackbar from '@material-ui/core/Snackbar';
+import MuiAlert from '@material-ui/lab/Alert';
+
+import { makeStyles } from '@material-ui/core/styles';
+import { StoreContext } from '../stores/store.context';
+
+function Alert(props) {
+  return <MuiAlert elevation={6} variant="filled" {...props} />;
+}
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: '100%',
+    '& > * + *': {
+      marginTop: theme.spacing(500),
+    },
+  },
+}));
+
+export const Toast = observer(() => {
+  const classes = useStyles();
+  const { alertState } = useContext(StoreContext);
+
+  const handleClose = (event, reason) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+    setTimeout(alertState.close(), 1500);
+  };
+
+  return (
+    <div className={classes.root}>
+      <Snackbar
+        open={alertState.isOpen}
+        autoHideDuration={alertState.length}
+        onClose={handleClose}
+      >
+        <Alert onClose={handleClose} severity={alertState.severity}>
+          {alertState.text}
+        </Alert>
+      </Snackbar>
+    </div>
+  );
+});

src/renderer/pages/dashboard.app.jsx

@@ -22,8 +22,6 @@ export const Dashboard = observer(() => {
   };
 
   useEffect(() => {
-    lists.addList();
-
     const refresh = () => {
       vmix.requestXml();
       timeout.current = setTimeout(refresh, 1500);

src/renderer/stores/lists.store.js

@@ -7,6 +7,7 @@ export class Lists {
     this.alertState = alertState;
     this.vmix = vmix;
     makeAutoObservable(this);
+    this.addList(this.alertState, this.vmix);
   }
 
   addList() {

src/renderer/stores/vmix.store.js

@@ -9,6 +9,7 @@ export class Vmix {
   connectionTimeout;
   alertStore;
   lists = [];
+  isAttemptingConnection = false;
 
   constructor(alertStore) {
     this.alertStore = alertStore;
@@ -118,6 +119,7 @@ export class Vmix {
   }
 
   attemptVmixConnection(ip) {
+    this.isAttemptingConnection = true;
     this.unconfirmedIp = ip;
     window.api.vmix.connect(ip);
     this.connectionTimeout = setTimeout(() => this.connectError(), 5000);
@@ -129,6 +131,14 @@ export class Vmix {
     clearTimeout(this.connectionTimeout);
     this.alertStore.connectionMadeToVmix();
     this.requestXml();
+    this.isAttemptingConnection = false;
+  }
+
+  disconnected() {
+    this.ip = '';
+    this.unconfirmedIp = '';
+    this.setIsSocketConnected = false;
+    this.alertStore.lostVmixConnection();
   }
 
   setIsSocketConnected(boolean) {
@@ -144,6 +154,7 @@ export class Vmix {
   }
 
   connectError() {
+    this.isAttemptingConnection = false;
     this.alertStore.cannotConnect();
   }