Please check the Medium article Building a realtime web app with Angular/Ngrx and Vert.x for more info.
- share and synchronize a common (Ngrx-based) state between multiple connected clients,
- distribute in realtime (Ngrx-based) actions across multiple connected clients (which impact local states/reducers).
Note: @ngrx/store is a RxJS powered state management inspired by Redux for Angular apps. It's currently the most popular way to structure complex business logic in Angular apps.
For the demo, the app uses a simple counter example, with increment, decrement and reset actions.
Running the apps locally
# Clone the repo git clone https://github.com/benorama/ngrx-realtime-app.git
Vertx server app
First, compile and run Vertx app locally.
# Go into core module directory cd ngrx-realtime-app/server # Build project ./gradlew shadowJar # Or gradle shadowJar if you have Gradle installed locally # Run the server app locally java -jar build/libs/server-1.0.1-fat.jar
Angular client app
# Go into Angular app directory cd ../client # Install dependencies (you can get a burger...) npm install # Or yarn # Run the client app locally ng serve
To test the app:
- open the client app in two separate browser windows,
- login with 2 different user names,
- increment/decrement/reset counter
Bugs and feedback
If you have any questions or suggestions to improve the demo app, don't hesitate to submit an issue or a pull request!