Ameya Lokras Ameya Lokras - 1 month ago 16
reST (reStructuredText) Question

How to create reactive UI using Angular 2 and Java Rest services

I am trying to understand how to create reactive UIs using angular 2 and java rest service.

What I am trying to achieve -

Consider a simple single page to-do application.
Multiple users open this same UI, and every one's UI is updated as soon as any one of user add/updates/deletes a to do list item, without having to do any manual refresh or other action.

I searched how one would go about implementing this and mostly found results around RxJS and RxJava. I understood the concept of observables. But what I don't understand is how would the UI subscribe to server data changes. If what I am trying to achieve is not achievable with above mentioned technologies, I am open for any other options, but my server has to be Java based.

If you could provide a working example / exact libraries / links that would be of great help.

Thanks

Answer

If you want to communicate from a java backend server in a realtime manner with your frontend applications, you can do this through sockets. A popular library to do this is using 'socket.io': http://socket.io/.

At startup/login time in your frontend you could open a socket to connect to the backend. Every time a change is made by a specific user, you could send a message over this socket from the java backend to your frontend.

If you are working with redux, you could even send a redux action from your backend to the frontend over the socket. In your socket listener in the frontend you could just dispatch that action to the store so your state is updated.

After a quick internet search I found this article which describes using socket.io (there's a java connector for socket io as well) and redux: http://spraso.com/real-time-data-flow-with-redux-and-socket-io/