fix(ui): add additional socket event layer to gate handling socket events

Some socket events should not be handled by the slice reducers. For example generation progress should not be handled for a canceled session.

Added another layer of socket actions.

Example:
- `socketGeneratorProgress` is dispatched when the actual socket event is received
- Listener middleware exclusively handles this event and determines if the application should also handle it
- If so, it dispatches `appSocketGeneratorProgress`, which the slices can handle

Needed to fix issues related to canceling invocations.

invokeai/frontend/web/src/services/events/actions.ts

@@ -12,46 +12,153 @@ type BaseSocketPayload = {
   timestamp: string;
 };
 
-// Create actions for each socket event
+// Create actions for each socket
 // Middleware and redux can then respond to them as needed
 
+/**
+ * Socket.IO Connected
+ *
+ * Do not use. Only for use in middleware.
+ */
 export const socketConnected = createAction<BaseSocketPayload>(
   'socket/socketConnected'
 );
 
+/**
+ * App-level Socket.IO Connected
+ */
+export const appSocketConnected = createAction<BaseSocketPayload>(
+  'socket/appSocketConnected'
+);
+
+/**
+ * Socket.IO Disconnect
+ *
+ * Do not use. Only for use in middleware.
+ */
 export const socketDisconnected = createAction<BaseSocketPayload>(
   'socket/socketDisconnected'
 );
 
+/**
+ * App-level Socket.IO Disconnected
+ */
+export const appSocketDisconnected = createAction<BaseSocketPayload>(
+  'socket/appSocketDisconnected'
+);
+
+/**
+ * Socket.IO Subscribed
+ *
+ * Do not use. Only for use in middleware.
+ */
 export const socketSubscribed = createAction<
   BaseSocketPayload & { sessionId: string }
 >('socket/socketSubscribed');
 
+/**
+ * App-level Socket.IO Subscribed
+ */
+export const appSocketSubscribed = createAction<
+  BaseSocketPayload & { sessionId: string }
+>('socket/appSocketSubscribed');
+
+/**
+ * Socket.IO Unsubscribed
+ *
+ * Do not use. Only for use in middleware.
+ */
 export const socketUnsubscribed = createAction<
   BaseSocketPayload & { sessionId: string }
 >('socket/socketUnsubscribed');
 
-export const invocationStarted = createAction<
-  BaseSocketPayload & { data: InvocationStartedEvent }
->('socket/invocationStarted');
+/**
+ * App-level Socket.IO Unsubscribed
+ */
+export const appSocketUnsubscribed = createAction<
+  BaseSocketPayload & { sessionId: string }
+>('socket/appSocketUnsubscribed');
 
-export const invocationComplete = createAction<
+/**
+ * Socket.IO Invocation Started
+ *
+ * Do not use. Only for use in middleware.
+ */
+export const socketInvocationStarted = createAction<
+  BaseSocketPayload & { data: InvocationStartedEvent }
+>('socket/socketInvocationStarted');
+
+/**
+ * App-level Socket.IO Invocation Started
+ */
+export const appSocketInvocationStarted = createAction<
+  BaseSocketPayload & { data: InvocationStartedEvent }
+>('socket/appSocketInvocationStarted');
+
+/**
+ * Socket.IO Invocation Complete
+ *
+ * Do not use. Only for use in middleware.
+ */
+export const socketInvocationComplete = createAction<
   BaseSocketPayload & {
     data: InvocationCompleteEvent;
   }
->('socket/invocationComplete');
+>('socket/socketInvocationComplete');
 
-export const invocationError = createAction<
+/**
+ * App-level Socket.IO Invocation Complete
+ */
+export const appSocketInvocationComplete = createAction<
+  BaseSocketPayload & {
+    data: InvocationCompleteEvent;
+  }
+>('socket/appSocketInvocationComplete');
+
+/**
+ * Socket.IO Invocation Error
+ *
+ * Do not use. Only for use in middleware.
+ */
+export const socketInvocationError = createAction<
   BaseSocketPayload & { data: InvocationErrorEvent }
->('socket/invocationError');
+>('socket/socketInvocationError');
 
-export const graphExecutionStateComplete = createAction<
+/**
+ * App-level Socket.IO Invocation Error
+ */
+export const appSocketInvocationError = createAction<
+  BaseSocketPayload & { data: InvocationErrorEvent }
+>('socket/appSocketInvocationError');
+
+/**
+ * Socket.IO Graph Execution State Complete
+ *
+ * Do not use. Only for use in middleware.
+ */
+export const socketGraphExecutionStateComplete = createAction<
   BaseSocketPayload & { data: GraphExecutionStateCompleteEvent }
->('socket/graphExecutionStateComplete');
+>('socket/socketGraphExecutionStateComplete');
 
-export const generatorProgress = createAction<
+/**
+ * App-level Socket.IO Graph Execution State Complete
+ */
+export const appSocketGraphExecutionStateComplete = createAction<
+  BaseSocketPayload & { data: GraphExecutionStateCompleteEvent }
+>('socket/appSocketGraphExecutionStateComplete');
+
+/**
+ * Socket.IO Generator Progress
+ *
+ * Do not use. Only for use in middleware.
+ */
+export const socketGeneratorProgress = createAction<
   BaseSocketPayload & { data: GeneratorProgressEvent }
->('socket/generatorProgress');
+>('socket/socketGeneratorProgress');
 
-// dispatch this when we need to fully reset the socket connection
-export const socketReset = createAction('socket/socketReset');
+/**
+ * App-level Socket.IO Generator Progress
+ */
+export const appSocketGeneratorProgress = createAction<
+  BaseSocketPayload & { data: GeneratorProgressEvent }
+>('socket/appSocketGeneratorProgress');

invokeai/frontend/web/src/services/events/util/setEventListeners.ts

@@ -3,11 +3,11 @@ import { AppDispatch, RootState } from 'app/store/store';
 import { getTimestamp } from 'common/util/getTimestamp';
 import { Socket } from 'socket.io-client';
 import {
-  generatorProgress,
-  graphExecutionStateComplete,
-  invocationComplete,
-  invocationError,
-  invocationStarted,
+  socketGeneratorProgress,
+  socketGraphExecutionStateComplete,
+  socketInvocationComplete,
+  socketInvocationError,
+  socketInvocationStarted,
   socketConnected,
   socketDisconnected,
   socketSubscribed,
@@ -77,21 +77,21 @@ export const setEventListeners = (arg: SetEventListenersArg) => {
    * Invocation started
    */
   socket.on('invocation_started', (data) => {
-    dispatch(invocationStarted({ data, timestamp: getTimestamp() }));
+    dispatch(socketInvocationStarted({ data, timestamp: getTimestamp() }));
   });
 
   /**
    * Generator progress
    */
   socket.on('generator_progress', (data) => {
-    dispatch(generatorProgress({ data, timestamp: getTimestamp() }));
+    dispatch(socketGeneratorProgress({ data, timestamp: getTimestamp() }));
   });
 
   /**
    * Invocation error
    */
   socket.on('invocation_error', (data) => {
-    dispatch(invocationError({ data, timestamp: getTimestamp() }));
+    dispatch(socketInvocationError({ data, timestamp: getTimestamp() }));
   });
 
   /**
@@ -99,7 +99,7 @@ export const setEventListeners = (arg: SetEventListenersArg) => {
    */
   socket.on('invocation_complete', (data) => {
     dispatch(
-      invocationComplete({
+      socketInvocationComplete({
         data,
         timestamp: getTimestamp(),
       })
@@ -110,6 +110,11 @@ export const setEventListeners = (arg: SetEventListenersArg) => {
    * Graph complete
    */
   socket.on('graph_execution_state_complete', (data) => {
-    dispatch(graphExecutionStateComplete({ data, timestamp: getTimestamp() }));
+    dispatch(
+      socketGraphExecutionStateComplete({
+        data,
+        timestamp: getTimestamp(),
+      })
+    );
   });
 };