ACA Blog

ACA Blog


June 2021
M T W T F S S
 123456
78910111213
14151617181920
21222324252627
282930  

Categories


Alfresco Summit part 6 – Server Sent Events with Alfresco and AngularJS

Dorien JorissenDorien Jorissen

It has been quite an adventure, but all good things must come to an end. To conclude our “Alfresco Summit“-series, we will cover the use of Server Sent events (SSE) with Alfresco and AngularJS. This will allow you to instantaneously push messages to your clients without needing them to refresh the page. This opens the door to infinite possibilities: push new content automatically to relevant clients, send instant notifications to all connected clients, and so on.

 For us developers, it always starts with a library. For our Alfresco Summit app, we decided to create our own little library for facilitating Server Sent Events in Alfresco. The library is small and focused to giving you a simple API to send SSE messages to Alfresco users or groups. The source code is available on GitHub: https://github.com/aca-it/server-sent-events-alfresco. We will use the library in this blog post to implement SSE in our Alfresco app.

Before we start, here’s a reminder of what we achieved with Server Sent Events in our AlfMedia app at Alfresco Summit:

Enabling SSE connections to your clients

To send Server Sent Events to your connected clients, they need an endpoint to establish a persistent connection to the server. This open connection will be used to receive messages from the server. We will provide this endpoint by creating a WebScript. The implementation for this WebScript is already available in the SSE library. You just need to register it to any URL you’d like to use.

First register the bean from the library as a WebScript:

Then we create a descriptor to bind our WebScript to a URL:

Our SSE library also needs some configuration. Add the following configuration to  alfresco-global.properties:

When you start your Alfresco server, a new endpoint is available on http://localhost:8080/alfresco/s/events. We will later use the SSE JavaScript API to use this endpoint to receive messages from the server.

Be aware that every open connection to this endpoint occupies a system thread. We automatically close connections every 60 seconds to free threads for other users (see the config you just created). If users stay connected, their connections are automatically reopened.

Sending messages

Thanks to our WebScript, any client can connect to Alfresco to receive messages. Of course there is nothing to receive if we don’t send any. Let’s send a message to clients when a new media item is added to the repository. To do that, we need to create a behaviour that is triggered when a node is created: 

The init method will be called by Spring when Alfresco starts. It will register our behaviour with Alfresco so that it is called on creation of a node. In the  onCreateNode method we will write the actual logic, namely sending a message to our connected clients. The message will contain the JSON representation of our  MediaItem object (see part 5 of the series). In that way, the client is able to immediately show the newly created node without refreshing the page.
It is important that the transaction is committed, because the client will retrieve the content of the media item directly from the server. Therefore we extend the  TransactionListenerAdapter class to execute our logic after commit:

We use the  ClientEventService class from our SSE library to send a message to every connected client. This service is registered through Spring, so you can inject it in your behaviour. The  Message class is provided by the SSE library as well. The first parameter is the event ID. The client uses this ID to determine how it should handle the message. The second parameter is the content of the message, in our case the JSON representation of our  MediaItem.

We only need to register our behaviour in the Spring context to make this code work:

If you start Alfresco, you now should be able to receive messages when nodes are created. Let’s do something with those events in our AngularJS app.\

Handling Server Sent Events in JavaScript

In our AngularJS spp, add the following code to the MainController:

The code within the MainController is executed on page load. We use the EventSource class in JavaScript to listen for events that are send by our endpoint. In our case, we only listen to messages with the ID newMedia. We register a callback function that receives the message as the only parameter. The message is an object that contains the contents in the data property. This is the JSON representation of our MediaItem class as a string. By using the JSON.parse method, it is converted to a JavaScript object on which we can access properties. We then put the media object in our mediaFeed array so that it is available to the user interface. However, because we are in a callback function AngularJS does not know that the mediaFeed array has been updated. We use the $apply method on $scope to notify AngularJS to update the UI where necessary.

That’s all, folks!

Start Alfresco and open the AlfMedia app in the browser. Add a media item to the repository through Alfresco Explorer. The new media item should be displayed immediately within your app, without refreshing the page! You can extend this app by adding real time notifications of other events, the possibility to upload media through the app, etc. The possibilities are (almost) endless.

This concludes our Alfresco Summit series. We hope you enjoyed it as much as we did. Do not hesitate to contact me or my colleagues or contribute to the SSE library through GitHub. We hope to see you at Alfresco Summit 2014!