Concurrent promise actor invocations

[chandirag]

I am trying to create a state machine which connects to and maintains a WebSocket connection with a sever. For this I have an external service which connects and handles the WebSocket connection and which returns a promise. I use this method to create a promise actor (in XState v5) to establish connection with the server.

However, the goal is for the client to reestablish connection if it gets disconnected from the server. I have something like this so far:

const coreStateMachine = setup({
			types: {
				// ...
			},
			actions: {
				resetSocket: assign({
					socket: null,
				}),
			},
			actors: {
				ConnectToServer: fromPromise<WebSocket, ConnectToServerServiceInput>(async ({ input }) => {
					const socket = await this.connectToServerService.connect(input.parent, input.pendingCalls);
					return socket as WebSocket;
				}),
			},
			guards: {
				isSocketConnectionActive: function ({ context }) {
					if (context.socket !== null) return true;
					else return false;
				},
			},
		}).createMachine({
			id: 'CoreStateMachine',
			initial: 'Connecting',
			context: {
				socket: null,
				pendingCalls: new Map<string, any>(),
			},
			states: {
				Connecting: {
					id: 'Connecting',
					invoke: {
						id: 'ConnectToServer',
						src: 'ConnectToServer',
						input: ({ context, self }) => ({
							parent: self,
							pendingCalls: context.pendingCalls,
						}),
						onDone: {
							target: '#Connected',
							actions: assign({
								socket: ({ event }) => event.output,
							}),
						},
						onError: {
							target: '#Disconnected',
							actions: assign({ socket: null }),
						},
					},
				},
				Connected: {
					id: 'Connected',
					description: 'Established socket connection to Server',
					on: {
						DISCONNECT: {
							actions: 'resetSocket',
							target: '#Disconnected',
						},
					},
					always: {
						target: 'OtherStateWhereSocketConnectionShouldBeMaintained',
					},
				},
				Disconnected: {
					id: 'Disconnected',
					after: {
						5000: {
							target: '#Connecting',
						},
					},
				},
				OtherStateWhereSocketConnectionShouldBeMaintained: {
					id: 'OtherStateWhereSocketConnectionShouldBeMaintained',
					type: 'parallel',
					states: {
						NetworkConnectivityStatus: {
							initial: 'CheckingConnectivity',
							states: {
								CheckingConnectivity: {
									always: [
										{
											target: 'Connected',
											guard: 'isSocketConnectionActive',
										},
										{
											target: 'Reconnecting',
										},
									],
								},
								Connected: {
									on: {
										DISCONNECT: {
											target: 'CheckingConnectivity',
											actions: {
												type: 'resetSocket',
											},
										},
									},
								},
								Reconnecting: {
									invoke: {
										id: 'ConnectToServer',
										src: 'ConnectToServer',
										input: ({ context, self }) => ({
											parent: self,
											pendingCalls: context.pendingCalls,
										}),
										onDone: {
											target: 'CheckingConnectivity',
										},
										onError: {
											target: 'Reconnecting',
										},
									},
									after: {
										5000: 'CheckingConnectivity',
									},
								},
							},
						},
						CoreStateMachineStatus: {
							id: 'CoreStateMachineStatus',
						},
					},
				},
			},
		});

Without the state OtherStateWhereSocketConnectionShouldBeMaintained connection/disconnection is handled as expected. However once the connection is established the first time and the current state is OtherStateWhereSocketConnectionShouldBeMaintained.NetworkConnectivityStatus.Connected, and a disconnect event is fired (from within the ConnectToServer function. The promise actor which was first invoked still remains in the background resulting in two concurrent connections to the server, which is not what I need.

What's the best way to handle this? I've tried stopping the promise actor but the documentation doesn't give a lot of examples. Calling stopChild('ConnectToServer') on DISCONNECT events didn't work.

Appreciate any help I can get to get this working.