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.
Anders
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?
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.
APPLICATION FAILED TO START
Description:
Parameter 0 of constructor in com.example.demo.ServerSentEventController required a bean of type ‘com.example.demo.ProfileCreatedEventPublisher’ that could not be found.
Action:
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
Hi,
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…