This article describes a new feature in WebMotion: the WebSockets management. We will use the AngularJS Javascript framework for the client side.

To illustrate this feature, we will create a dashboard managing tasks with their states (todo, in progress or done). This dashboard should be shared between several users and refreshs itself automatically.

Reminder, WebMotion is a Java web framework. It uses a mapping file to describe the link between the server and the client. It is based on the JEE API with Servlet 3.

AngularJS is a MVC Javascript framework. It allows to add directives in your HTML document to get your pages dynamic. One of the features is that it updates automatically the model between your controler and your HTML page.

To enable this listener, we have to not forget the listener declaration in the WebMotion mapping file. This file is in the src/main/resources folder. The file is structured by some sections. The section "[config]" allows you to configure your WebMotion application.

View part

The current application will be a single page web application. This page will displays the created tasks in the dashboard. An AngularJS controller is linked to the HTML body to manipulate the DOM corresponding with the model thanks to AngularJS.

<body ng-controller="MainCtrl">...</body>

Concerning Javascript part, the controller is a function. It is the controller which receive the events et manipulate the model.

function MainCtrl($scope) {
}

The page will be divided in two areas. The first one will be the creation form, with an input field. The addTask function will be called while the creation form is submitted.

The second area displays all the created tasks, sorted by their status. The model is got from the controller and is browsed with the "ng-repeat" directive to create a div tag for each task. In the case of deleting or moving a task, a method is called on the controller, i.e. delTask and updateTask.

A AngularJS directive allows to add a behaviour on the DOM. The directives drag-event and drop-event are specefics directives for the project. It allows to handle easily the HTML5 drag n'drop, adding the necessary events on the elements and the callback on the current controller.

Endly, the URL to access the page, is added in the section "action" in WebMotion. An action in the mapping file is composed by the HTTP method, the path and the action to execute. In the following rule, the action is to return the index.html page to the user.

[actions]
GET / view:index.html

Controller part

To manage the WebSocket in the server, we use JSON message send feature provided by WebMotion. This protocol allows to call easly from the client a method in the WebSocket. The JSON object contains the method name and the parameters.

To use it, you must create, like a classical action in WebMotion, a controller which returns the render to the client on method call. The renderer allows you to return pages, data, redirections, ... to navigator. In this cas the render is type of RenderWebSocket.

Don't forget to declare the mapping. The action is declared with the classe name and the method to call :

[actions]
GET /tasksManager TasksManager.createWebsocket

By default, the method return (by the socket) is passed only to the caller connection which sent the JSON object. In this exemple, we would to broadcast all the connections to inform the modification. To do that, you must store all the connections in the context and redefine the method which send the result thus :

Otherwise, you can use a specific factory for your call. The method in the factory is created with the JSON object to return to the server for each call. A callback on the receipt of the message allows to refresh the data on side the client.