# Request and Response

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*](https://github.com/MobilizeNet/WFNetHelloWorld/tree/master/MigratedCode/HelloWorld1).

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 <a href="#id-1-send-the-request" id="id-1-send-the-request"></a>

* 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 <a href="#id-2-process-the-request-and-create-the-response" id="id-2-process-the-request-and-create-the-response"></a>

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` <a href="#id-21-parse-the-json-request-via-formattingservice" id="id-21-parse-the-json-request-via-formattingservice"></a>

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` <a href="#id-22-process-the-request-via-entranceservice" id="id-22-process-the-request-via-entranceservice"></a>

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` <a href="#id-23-create-the-response-via-deliveryservice" id="id-23-create-the-response-via-deliveryservice"></a>

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 <a href="#id-3-process-response-and-refresh-component" id="id-3-process-response-and-refresh-component"></a>

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 <a href="#summary" id="summary"></a>

* 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.