Using SmallRye Mutiny in frontend Vue app

Question

I am using Java Quarkus application together with SmallRye Mutiny based on Quarkus guide: https://quarkus.io/guides/mutiny-primer

I created Rest endpoint as below:

@GET
    @Path("/data")
    @APIResponse(
      responseCode = "200",
      description = "Return data",
      content = @Content(
        mediaType = MediaType.APPLICATION_JSON,
        schema = @Schema(type = SchemaType.OBJECT, implementation = HashMap.class)
      )
    )
@Produces(MediaType.APPLICATION_JSON)
@Consumes(MediaType.APPLICATION_JSON)
    Multi<Map> data();

I am using Vue framework on frontend together with axios, I managed to get the data from backend as array of Maps, but data are being returned only when the process is complete. I would like to have them on frontend straight after something being pushed to Multi like a subscriber. Any idea how to achieve that?

I am not sure how to handle that. I tried with rxjs and vue-socket.io but with no luck, not sure if this is not applicable solution or just could not configure it properly.

Answer 1

For future answer-seekers here is how to make it work:

IN Java:

@GET
@Path("/data")
@APIResponse(
        responseCode = "200",
        description = "Return data",
        content = @Content(
                mediaType = MediaType.APPLICATION_JSON,
                schema = @Schema(type = SchemaType.OBJECT, implementation = Multi.class)
        )
)
@Produces(MediaType.SERVER_SENT_EVENTS)
@RestStreamElementType(MediaType.APPLICATION_JSON)
@RolesAllowed(Tenant.DEFAULT_ROLE)
Multi<Map> data(@Context SecurityContext ctx);

IN Vue:

Use event-source-polyfill, and then:

import { EventSourcePolyfill } from "event-source-polyfill";
const eventSource = new EventSourcePolyfill(`localhost:8080/data`, {
   headers: { Authorization: "Bearer " + "YOUR_TOKEN" }
});
eventSource.addEventListener("message", event => {
   //consume message
});