Search code examples
angularspringwebsocketspring-websocket

Spring Backend with Angular Frontend - how to update view when server changes

I don't have much code yet because I first wanted to ask you about your opinion. Maybe you were already confronted with this issue and found a proper solution. So I just searched the Internet a little for now and found some proposals. My frontend is written with Angular 7 and the Backend is done with Spring.

My problem looks like followed:

I have a map that displays charging stations for electric vehicles. Charging stations can be either currently available then they will be shown with a green marker on the map. Otherwise they are unavailable and will be shown represented by a red marker on the map.

Map with markers representing available (green) or unavailable (red) charging stations for eCars

What I want to achieve

Imagine the map shown above is the map displayed to User-A. The charging station in the lower left corner is currently available and shown in green. When User-B reserves the charging station I want to update User-A´s map so the charging station on User-A´s map turns from currently available/green to currently unavailable/ red.

What my code looks like Currently the charging stations are fetched once from the backend when the map is accessed for the first time. This is done in the charging-station.service.js file via a REST call to our backend API using the angular httpClient.

enter image description here

What I already tried

I already google a little bit and stumbled upon two approaches. The first one (that i kind of dislike) is active polling. You send a request every time interval to the server fetching the same charging-stations with potentially new availability status. The thing I dislike about this approach I am putting a lot of unnecessary workload on the backend.

The second approach if found was using web sockets. I never worked with them before. So I wanted to ask you what you, as potentially more experienced developers, would suppose me. Either approach 1, 2 or something completely different.

Solution

  • Long Pooling alone cannot be an effective solution for your problem, You should check SSE. I suppose your messages will only flow from server to client. Web sockets are more useful when your messages are passed on both sides. And never forget that WebSocket comes with a lot of baggage. So if you decide to go with that, be ready to carry that.