How to match a synchronous request from frontend to WebAPI and an asynchronous request from WebAPI to microservices, and then return the response to frontend?

Question

Service Oriented Architecture

I did not find an understandable pattern for implementing interaction between the components of a microservice system. In particular, an example of how to implement a connection between a synchronous call from the client and its asynchronous processing. Let me explain.

There is an application built on microservices. There are:
- frontend (client on React, Vue, whatever),
- public backend (WebAPI), processing requests from the frontend, + possibly some additional public microservices,
- a set of internal microservices that accept requests from the backend through a message broker ( kafka, RabbitMQ, whatever).

If I understood correctly from many articles on the Web, one of the popular interaction schemes is this: requests from the frontend to the backend (WebAPI, first-level public services) are synchronous, and requests from WebAPI to internal microservices are asynchronous. Something like this:

The frontend makes a SYNCHRONOUS request to the backend, and waits for a response. The request can be of the asynchronous type, i.e. using Async AJAX, but in fact it still keeps the connection with the server, because you need to save the channel through which the response will be returned. The backend, having received a request, sends it to the asynchronous environment, and in fact sends a message to the message broker. At this point, the backend does not have a direct connection to the worker microservice, it just has to wait for a response from the broker. But he has a connection with the frontend, through which he will send a response that he will receive (or never receive) from the broker. Those. the backend must keep a connection with the frontend, and at the same time wait for a response from the broker. How is it implemented physically?