Writing real time applications using Spring, AngularJS and WebSockets

HTML5 made browsers a powerful alternative to desktop applications. However, network traffic (when using AJAX or by simply loading pages) is always in one direction. The client requests a page from the server, which in turn responds with the proper content. With HTML5 WebSockets that’s a different story, websockets allow you to setup a full duplex channel between server and client, making it possible to send messages in both ways.

In this small tutorial series I’m going to setup a small CRUD application that will update across all clients simultaneous. I’ve chosen not to write the entire application using WebSockets, but rather than that I chose to setup a hybrid solution with RESTful webservices and WebSockets. Each time the RESTful webservice is called to update the datasource, the clients are being notified. Each client will then send an additional REST call to retrieve the data and use it as model.

The reasoning behind this is quite simple: WebSockets are still quite new and not many libraries provide integration with it and certainly not at the same level as they integrate with RESTful webservice. AngularJS for example provides integration with RESTful webservices through the angular-resource project and thanks to it the amount of code necessary to make a REST client is very low. However, it does not have a similar thing with WebSockets which means a bigger setup is necessary.

Frameworks I’m going to use is the recently released Spring 4 and of course the famous front-end MVC-framework AngularJS.

angular-orderby-class

Writing real time applications using Spring, AngularJS and WebSockets

  1. Project setup and configuration
  2. RESTful webservice and WebSockets (Spring)
  3. AngularJS front-end

You can also find the complete code example on Github.

Tagged , , , , , , .

g00glen00b

IT Consultant with a passion for JavaScript. Experienced in the Spring Framework and various JavaScript frameworks.

  • vinit solanki

    libs is folder missing

    • Yes and no. I’m using Bower to install my dependencies, so I didn’t commit the libs folder on GitHub.

  • Beth Tran

    I thought my tcserver 3.0 has tomcat-8 runtime, it does not. So install tomcat 8, and it works. However, the
    buttons delete&new-idea are not display correctly. Not sure why.

  • Beth Tran

    Thanks for posting this very helpful tutorial. I just downloaded the code and run. But my screen looks rather odd (I’m using firefox 35.0.1) – Any idea?

    • That’s weird indeed, but it looks as if you’re running the application without any front-end libraries. Are you using Bower like mentioned in the first part of this series? http://g00glen00b.be/spring-websockets-config/
      If you did, you probably have to execute the following command:

      bower install

      I’m not sure if I mentioned it in the tutorial itself.

  • Richard

    Thank you. Elegant, concise, and works great too. I think I’ll add Spring Security to it. Regards.

  • Anibal Gomez

    Thanks! will try this

  • Nishant

    This is really nice tutorial.I needed it very much.

    one issue though. The controller.js has wrong topic. I modified it to :
    $scope.initSockets = function() {
    $scope.socket.client = new SockJS(‘/notify’);

    • g00glen00b

      Actually, it depends on your context root. If you host your web application at the root of your web container, then it will indeed be `/notify`. But I should make it more clear probably (noticed that some other people had the same issue).

  • Driss Amri

    Why still use a web.xml when you are using javaconfig? Use it all the way 😉 Nice article.

    • g00glen00b

      Well, I actually made a webapp initializer but when I was having trouble setting up my app I removed it to test if it was the cause and later on I never re-implemented it. :p