How Clients Connect and Disconnect

Handling Client Connection and Disconnection in VaahShare

VaahShare is built on Electron.js, which has a main process and a renderer process. In the context of VaahShare, the renderer process uses Vue.js and can be found in the src directory, while the main process is located in the electron directory.

When the app loads, the main process starts and creates a new window to load the renderer. Once the renderer process is loaded, socket event handling is managed by the store, which can be found in the src/store/root.js file.

Client Connection and Disconnection on the Client-Side

When the onLoad method is called, it invokes handleSocketEvents. The handleSocketEvents function is responsible for managing all the socket events that occur within the VaahShare application. It handles connection, disconnection, and various custom events related to video streaming and processing.

1. Handling Connection (connect event)

• Connect Event: When the client successfully connects to the server, it logs the connection and sets a flag (is_socket_url_set) to indicate the socket URL is valid.
• Machine Info: It retrieves the machine info using ipcRenderer and updates the window title.
• Emit Event: It emits a client-connected event to the server with machine info and company ID.
• Auto Record: If auto_record is enabled, it stops any current recording, starts streaming, and sets flags accordingly.
• Reconnection: Resets the is_reconnecting flag.

2. Handling Successful Client Connection (client-connected-success event)

• Client Connected Success: When the server acknowledges the client connection, it stops any loading indicators and checks for any local sessions that need to be uploaded.

3. Handling Client Disconnection (client-disconnected event)

• Client Disconnected: Logs the disconnection event.

Handling Client Connection and Disconnection on the Server (Fastify)

The server-side code manages client connections by handling the client-connected event and processing the connection details through the handleClientConnection function. Below is a detailed explanation of how this works:

1. Handling client-connected Event

• Client Connected Event: When a client connects and sends the client-connected event, the server logs the connection.
• Logging: Logs the client's socket ID using logger.logInfo.
• Handle Client Connection: Calls the handleClientConnection function with the client's socket, Fastify instance, and connection data.
• Success Callback: Upon successful handling, emits a client-connected-success event to the client to confirm the connection.

2. handleClientConnection Function

• Log Client Connection: Logs the client's socket ID.
• Track App Closed: Initializes trackAppClosed for the client, setting it to false. This keeps track of whether the client disconnected by closing the app or due to a network issue.
• API Call: Calls clientsApi.createItem to store the client's connection details in the server's database or any persistent storage. The data includes:
  • socket_id: The unique ID of the client's socket connection.
  • meta: The client's machine info (username, hostname, etc.) in JSON format.
  • user_host: The user's host name.
  • company_id: The client's company ID.
  • is_connected: A flag indicating the client is connected.
  • is_reconnecting: A flag indicating whether the client is reconnecting.
• Clear Timeout: Clears any existing timeout for the user's host if present.
• Broadcast Client Connection: Emits a client-connected event to all other connected clients to notify them of the new connection.
• Callback: Executes the callback function to signal the completion of the connection handling.

3. Handling Client Disconnection

• The disconnect event is triggered when a client disconnects from the server. The server logs the disconnection, updates the client's status, and manages reconnections.
  • Log Disconnection: Logs the disconnection event using logger.logInfo.
  • Handle Disconnect: Calls the handleDisconnect function to manage the disconnection process.

4. handleDisconnect Function

• The handleDisconnect function updates the client's status, handles video buffers, and manages reconnection timeouts.
• Check App Closed: If the app was closed by the client, no reconnection is needed. Deletes the entry from trackAppClosed.
• Update Client Status: Sets is_streaming to false and is_reconnecting to true, then calls handleVideoBuffers.
• Broadcast Reconnection: Notifies other clients that the client is reconnecting.
• Log Reconnection: Logs the reconnection attempt.
• Set Reconnection Timeout: Sets a timeout to update the client's status to disconnected if they do not reconnect within 60 seconds.

5. Handling App Closure

• Log App Closure: Logs the app closure event using logger.logInfo.
• Handle App Closure: Calls the handleAppClosed function to manage the closure process.

6. handleAppClosed Function

• Log App Closure: Logs the app closure event.
• Track App Closed: Sets the trackAppClosed flag to true for the client's socket ID.
• Update Client Status: Sets is_streaming and is_connected to false.
• Broadcast Disconnection: Notifies other clients that the client has disconnected.

Handling Client Connection and Disconnection in the Backend (VaahBackend)

The client handling is managed from the store in the backend. The store is located at VaahCMS/store/root.js file. The store is responsible for managing the state of the application and handling socket events. The handleSocketEvents function is called when the application is loaded and sets up the necessary event listeners for socket communication.

1. initSockets Method

• Socket Initialization: Checks if the socket is not already initialized.
• Log Socket URL: Logs the socket URL for debugging purposes.
• Create Socket: Initializes the socket connection using the provided URL and a query parameter to specify the app type.
• Binary Type: Sets the binary type for the socket connection to "arraybuffer".
• Handle Socket Events: Calls the handleSocketEvents method to set up event listeners for the socket.

2. Socket Event Handlers

• client-connected Event
  • Log Connection: Logs the client-connected event data.
  • Find Existing Item: Searches for an existing item in the list by user_host.
  • Add New Item: If the item doesn't exist, it adds the new data to the list.
  • Update Existing Item: If the item exists, it updates the connection status, socket ID, and reconnection status.
  • Update Live Count: Increments the live count in the root store.
• client-reconnecting Event
  • Log Reconnection: Logs the client-reconnecting event data.
  • Find Existing Item: Searches for an existing item in the list by user_host.
  • Update Reconnection Status: If the item exists, it sets the is_reconnecting flag to true.
  • Update Live Count: Decrements the live count in the root store if it's greater than zero.
• client-disconnected Event
  • Log Disconnection: Logs the client-disconnected event data.
  • Find Item Index: Searches for the index of the item in the list by user_host.
  • Remove or Update Item: If the item exists:
    • Removes the item from the list if the current route is clients.sessions.live.
    • Otherwise, sets the item's is_connected flag to false.
  • Update Live Count: Decrements the live count in the root store if it's greater than zero.