This chapter will explain in detail what happens when someone triggers a request from the client side and waits for the server side's response. This chapter will be using the HelloWorld Sample.

Say you want to know in detail what happens when a user clicks the Click Me button and the label refreshes the text from My First Sample to Hello World.

A WebMAP request/response passes through the following main steps that are shown as the image below.

So, when the user clicks on the button, front-end prepares the deltas to be synchronized with back-end's observable models and launches a request. Then the back-end processes the request by applying the changes coming from the front-end and calls to the corresponding user code. Then it builds the response and sends it back to the client. Finally, the front-end processes the response and refreshes the label.

Now, let go into detail these main steps.

1. Send the Request

• Click the Click Me button to start the whole process.

• Call WebMAPService to perform the following actions:

  1. Gather the Changed models to be synchronized with the back-end's observable models.

  2. Create and send the HTTP POST event with the gathered deltas.

• The WebMAPService creates the following json and send it to the back-end.

  {
    "Changed" : [],
    "Actions" : [{
      "Arguments" : null,
      "Name" : "Click",
      "ReceiverId" : "a1c4236c-ca1e-4550-9789-2c17d12e6f50"
    }]
  }

  1. Changed array: since there is no models that were modified, the array is empty.

  2. Actions array: contains the list of actions that should be processed on the back-end.

2. Process the Request and create the response

Now that the request has arrived at the back-end, it will pass through some middlewares orderly.

The request passes through ExpiredSessionMiddleware to verify if the session has already expired, then RequestQueueMiddleware to enqueue the request if the server is already processing some other requests coming from the same session; if no requests are in the queue, then it will proceed to the next middleware. The CoreServicesMiddleware initializes all the services required to process a request. And finally,InboundMiddleware will process the request and create the response for the request.

The InboundMiddleware is the key responsible for processing any kind of request coming from the client side, so let's expand in detail about this middleware.

2.1 Parse the JSON request via FormattingService

First of all, the InboundMiddleware gets the information of the request, decodes this information and creates a Request object that contains the list of list of Changed DTO models and the list of Action. Then, this Request will be used by the EntranceService.

2.2 Process the request via EntranceService

The EntranceService will process the list of Changed DTO models and the list of Action. An is an action sent to the server in a request to be executed. Each Action contains a ReceiverId (the Identifier of the sender), Name (the Event Name) and Arguments (the arguments of the event).

1. Process the Changed DTO models: In order to synchronize the list of Changed DTO models with the corresponding observable models, the service use MapperService to invoke ApplyChanges of each Mapper associated with the Changed model.

2. Process the list of Action: In this case of clicking a button, the ReceiverId is the id of the Button, the Name is "Click" and with no arguments. Given this Click Action, the service will invoke the following user code:

   private void button1_Click(object sender, System.EventArgs e)
   {
     this.label1.Text = "Hello World";
   }

3. While the action is executing, the TrackingService is tracking all the Observable Models. If an observable's property has been modified, the TrackingService will register the observable into the trackable array. In this example code above, the label1 will be registered.

2.3 Create the response via DeliveryService

The DeliveryService creates the response back to the client side by means of the next steps:

1. The TrackingService retrieves all the tracked observable models.

2. The MappingService takes those models and instantiates the corresponding Mapper to start calling one by one the Map method. For example, in this case, since label1 has been modified. The MappingService instantiates LabelMapper, calls the Map method and returns the Mobilize.Web.DataTransfer.Label.

3. The DeliveryService will finally, create the Response object. And populates the objects Added, Changed, Removed properties array. For example, the label1's new modified text should be inside the Changed array.

4. Finally, the FormattingService will format the Response into a JSON object.

3. Process response and refresh component

Now, that the response has arrived back to the client-side.

{
  "Added" : [],
  "Changed" : [
  {
    "Text" : "Hello World",
    "Visible" : true,
    "Id" :  "a2fb1871-2576-4dbe-9203-17dc4b13427a",
    "MapperId" : "lbl",
    "References" : {}
  }
  ],
  "Removed" : [],
  "Actions" : []
}

The WebMAPService will process the json above, and synchronize the front-end observable models with each of the models in the Changed array. And finally, the components should be refreshed and show the new Hello World text.

Summary

• You leaned in detail what happens when someone triggers a request from the client side and waits for the server side response.

• You learned how WebMAP Back-end services process the request.

• You learned how WebMAP Back-end services create the response.