Full Stack Reactive with Spring WebFlux, WebSockets, and React

Full Stack Reactive with Spring WebFlux, WebSockets, and React

This post shows you techniques for talking to your reactive Spring WebFlux API with WebSockets and React.

Owen Williams

I found this guide really useful! Particularly websockets -> Spring WebFlux, I was struggling to find a nice tutorial and this was spot on!

There are a few issues with the steps above (at least for me!)
1. Change ‘SPRING_PROFILES_ACTIVE=demo ./mvnw’ to 'SPRING_PROFILES_ACTIVE=demo ./mvnw spring-boot:run’
Probably obvious to most but confused me (don’t use maven much)
2. The second proxy description resulted in a request to /ws/ws/profiles hence I’d suggest stripping the /ws from first target in package.json i.e.
“proxy”: {
“/ws”: {
“target”: “http://localhost:8080”,
“ws”: true
“/”: {
“target”: “http://localhost:8080
3. And finally I needed to make a small change to make the SSE example to work
Edit ServerSideEventController and add a couple of carriage returns to what is returned, i.e.
return objectMapper.writeValueAsString(pce) + “\n\n”;
I think this flushes the message because without it, I didn’t see the message arrive.

I wasn’t aware of SSE - I’ve used long polling before - SSE is a slight improvement but I suspect most people just go for websockets nowadays.

Anyway, I really appreciate the time you’ve taken to develop and share this tutorial

Matt Raible

Thanks for the feedback Owen. I’ll update this post with your changes in the next few days.

Matt Raible

Hello Owen: I updated this post today to fix the issues you had, and upgrade to the latest releases. Create React App has a different configuration for proxying WebSockets now, so I included that. I wasn’t able to reproduce your issue with SSE, but I added the carriage returns to the example code anyway. Hope this helps!

Tharaka De Silva

@mattraible, awesome tutorial! I got two quick questions for you:
(1) What was the purpose of using a POST for the creation of profiles in your guide rather than utilizing the websocket? Is there any advantages?
(2) If we have the need to use web sockets for multiple domain objects (let’s say comments and chat messages of Facebook), should we use one web socket connection to publish/receive a generic message or should we ideally create separate web sockets for each domain object? This probably depends on the load and such, but is there a go to recommended way of handling this scenario? My generic message structure would look like so:

“type”: “COMMENT”,
“method”: “POST”,
“data”: {
// some comment information here

Matt Raible

Hello Tharaka,

One of the issues I found with WebSockets is I was unable to secure them. Therefore, I used a POST because I was able to secure the HTTP connection. This is noted in the article, along with how I tried to use Socket.IO and RSocket without any luck. I believe RSocket will solve this problem in the future, once Spring supports it. See https://jira.spring.io/brow… for more info.

Tharaka De Silva

That was my bad. I skipped over the authentication part. Do you have anything for (2)?

Matt Raible

I haven’t worked with WebSockets a whole lot, so take my advise with a grain of salt. My guess is that fewer sockets are better. I’d try to use one with an “entity” key (or something similar), then implement logic in your API to handle each different type of entity.

Tharaka De Silva

Awesome! Thank you for the help.


Thanks for the very interesting post! I am completely new to reactive programming, so my question may indicate that I have misunderstood something fundamental but here goes: How does this WebFlux framework go together with the Swagger codegen / OpenAPI codegen? Can the Javascript React client be generated from an OpenAPI annotated RestController endpoint that returns stuff like Mono and Flux? I think REST documentation and codegen is an important aspect of REST so I would hope that it is supported.

Matt Raible

Hello Anders - it looks like there’s an open issue to add WebFlux support to Swagger’s Codegen. Since there doesn’t seem to be much activity on it, the best way to get it implemented is probably to try writing the code yourself. I’m sure if you contribute a PR, many people will be happy to help make it production-ready.

Felipe Matos

Hi Matt Raible,
can you tell me what is this plugin that you use in the video, that autocomplete all code?

Matt Raible

Those are IntelliJ’s Live Templates. I’ve open sourced the ones I use on GitHub.

Jim C

I have just downloed the full-stack version from github and I am getting ProfileCreatedEventPublilsher could not be found for any tests. Any clue what I am missing? PS. I have JDK 11 installed in case it is relevant.



Parameter 0 of constructor in com.example.demo.ServerSentEventController required a bean of type ‘com.example.demo.ProfileCreatedEventPublisher’ that could not be found.


Consider defining a bean of type ‘com.example.demo.ProfileCreatedEventPublisher’ in your configuration.

Matt Raible

You’re right. Running mvn test (on the react-app branch) has failures. Testing isn’t really addressed in this post, so that’s not surprising. I tried running the Spring Boot app with Java 8, 11, and 12 and it starts up OK.

For tests, I’d recommend reading Build Reactive APIs with Spring WebFlux. They should pass up until the point just before you add Spring Security to the mix.

Đặng Quang Tuấn

Nice post.
I have a question relate about Stream need to find solution. If i have 100 records and want to fetch 10 records / second (for reduce traffic data). How can i do that?

Matt Raible

I’m not sure how to do this. With reactive streams, I believe the server and client can send indicators that they can’t handle anymore data, and back pressure measures will be invoked. This seems like it’d be a good question for Stack Overflow, where more people will see it.

Ihanshi Nadkarni

An informative blog for aspiring full stack developers. Thanks for sharing.

for more:https://www.technobridge.in…

Colin Riddell


If you follow this guide after following the previous one that means you’ve created TWO OIDC apps in Okta. To me that doesn’t seem right, is it? One for the back end and one for the front-end?

Matt Raible

You could do everything with one app if you combined them so Spring Boot serves up the React app and did all the OAuth flows on the server. You could also remove login from the server and make it to token validation by only specifying an issuer.

Once our Spring Boot starter has support for PKCE, you can use the same SPA app to configure both.

Follow this issue for updates: https://github.com/okta/okt…