A full application using Spring 4 WebSockets and AngularJS to make a real time application.
Switch branches/tags
Nothing to show
Clone or download
Latest commit ff647b7 Mar 9, 2014
Type Name Latest commit message Commit time
Failed to load latest commit information.
src/main Initial commit Mar 9, 2014
.bowerrc Initial commit Mar 9, 2014
.gitignore Initial commit Mar 9, 2014
README.md Updated readme Mar 9, 2014
bower.json Initial commit Mar 9, 2014
pom.xml Updated POM Mar 9, 2014


Building real time applications using Spring, AngularJS and WebSockets

This application demonstrates how you can write real time applications using Spring 4 and AngularJS. The tutorial to build this application can be found at http://g00glen00b.be/spring-websockets.


You need a JSR-356 compliant web container (like Tomcat 8) and at least Java 7. For building the application you need Maven and Bower. For Bower you also have to install Node.js (and NPM).

Building the application can be done by using Maven and Bower. The commands that have to be executed are:

bower install

mvn install


Spring framework

The application is built using Spring 4. Spring 4 offers WebSocket integration using a SockJS compliant WebSocket server.

Spring is also used to to divide our application using the MVC pattern and spring-data-jpa for the data access layer.

Cross cutting concerns like pushing notifications to the client are made using Spring AOP.


Entities and model objects are mapped using Dozer. Dozer allows you to (deep) map objects one to one. In this case it's used to translate our entity to a model object.


Bower is a front-end package manager, in this example I'm using it to import the various front-end libraries we need such as:

  • AngularJS
  • Showdown (markdown rendering)
  • SockJS and STOMP (WebSocket connection)
  • Semantic UI (UI library)


AngularJS allows you to use the MVC pattern on the client (browser) so no DOM interaction is actually needed. It also offers integration with RESTful webservices through the angular-resource project.

Semantic UI

Semantic UI is a UI library (just like the popular Twitter Bootstrap), but in my opinion it has a pretty good naming convention which also makes it easier to understand and remember.