Display Launch Status Updates In the Web Client

PureWeb -

Between the instant when a user clicks on the "play" button in your customized web client, to the first streamed frame being displayed in their browser, there is a lot going on behind the scenes.

The web client ensures that the requested project is deployed and online, users are routed to the closest available region, and are connected to a session immediately, or placed in queue if the experience is currently at capacity and more servers need to be dynamically provisioned to serve the queued requests.

With that in mind, the time it takes to connect a user to an available session can vary. For a better user experience it can be helpful to communicate changing launch requests to the end user. PureWeb makes that incredibly easy through a few modifications to the PureWeb React web client template.

Note: Read "Create a web client" to learn how to get started with the PureWeb template.

By default, the PureWeb template simply displays "Please wait, your session is loading" during the loading process. You can find that around line 126 of the unmodified App.tsx file of the PureWeb React web client template:

<h3>Please wait, your session is loading.</h3>

Possible status updates in relation to a launch request are:

  • unknown - First request, searching for availability
  • accepted - Project found, accepted to create a connection
  • queued - Launch request has been placed in the queue to be routed to a regional provider
  • requested - A regional server has been found, and your model is being provisioned and launched onto the server
  • ready - A free session has been found, the process/executable is launching on the cloud instance
  • serviced - Request has been serviced and connected
  • cancelled - Request has been cancelled
  • modelerror - An issue with the model/project occurred during startup
  • unavailable - An invalid model/project has been requested or the model does not exist

Before we surface the different status messages to the end user, let's convert them into easily readable statements. We can do this by creating a mapping like so:

export interface HumanReadable {
  [propertyName: string]: string;
}

const humanReadableStatus: HumanReadable = {
  unknown: '(1/5) Initializing your connection',
  accepted: '(2/5) Accepted, requesting model',
  queued: '(3/5) In queue',
  requested: '(4/5) Model requested',
  ready: '(5/5) Ready, 3D session launching',
  serviced: 'Viewing model',
  cancelled: 'Cancelled',
  modelerror: 'An issue with the model has occurred',
  unavailable: 'The requested model does not exist'
}

Place this new code near the beginning of your App.tsx file.

Next we want to display our readable statements to the user. Find the line that displays the "Please wait, your session is loading" message around line 123 and replace it with the following line:

<h3>{humanReadableStatus[props.LaunchRequestStatus.status]}</h3>

Now, after pressing the play button, end users will be able to see the human readable string equivalent of the different status messages during the loading process.