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.

You can use Server-Sent-Events (SSE) or Quarkus Reactive Messaging HTTP extension. Follow this guide: https://quarkus.io/guides/resteasy-reactive — zforgo, Feb 20 '23 at 15:36
Looks like I finally got that working using SSE as you suggested, thanks! However I am still struggling with Authorization header, seems like there is no easy way to authorize in endpoint using jwt token — dockitu, Feb 22 '23 at 15:07

score 1 · Accepted Answer · answered Feb 23 '23 at 12:24

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
});

Using SmallRye Mutiny in frontend Vue app

1 Answers1