Listening to message saved events

Storing the message in the database takes some amount of time and we want to update the UI or reflect the state of the UI after the message is successfully saved into the database. We specify an EventSource and add an EventListener to receive the callback when a new message is stored in the database.

When a new message is saved into the database the callback function of the event listener is called and we then plot the message on the map using ol.Feature:

    /* Reactive: Event listener to get updates when new message is   
     saved */

    var source = new EventSource("/message/subscribe");

    // Callback function called on event update
    source.addEventListener('message', function (e) {
      var message = $.parseJSON(e.data);
      var feature = new ol.Feature({
        geometry: new ol.geom.Point(message.location.coordinates),
         content: message.content
      });
      vectorSource.addFeature(feature);
    }, false);