Tips for creating a binding between an HTTP service and a variable in AngularJS that adjusts when the server data is modified

Question

Tips for creating a binding between an HTTP service and a variable in AngularJS that adjusts when the server data is modified

Using an http get request in angular to extract data into an object with the users currently connected to my app requires refreshing the information every time for binding to the scope. To achieve this, I implemented a method to refresh the data from the array in the get request every 3 seconds:

index.jade

a(ng-repeat="item in room.connected")
img(src="/images/{{item.avatar}}")

controller.js

ngApp.controller('controller', function(){

   var vm = this;  vm.connected;

   $interval(function(){
   //The Get request returns an array like->[{"username":"cesarodriguez4","avatar":"icon-user-man-1.png"}]
   $http.get('http://localhost:3000/get-classroom-viewers/user')
   .then(function(response){
         vm.connected = response.data;
         },function(error){
         console.log(error);
        });
     }, 3000);
   //Executes the GET request every 3 seconds.
   });

While this solution works, it may not be optimal as the terminal shows the get request execution message every time. Is there a better method to refresh the data only when the server updates its information? I attempted using $scope.$watch but encountered issues.

javascript angularjs

Answer 1

Answer №1

To ensure real-time updates from the server, it is recommended to utilize websockets. By implementing websockets, any changes on the server side can be pushed to sockets which in turn can update the scope variable. This approach is more efficient than constantly looping or making server requests every few seconds, as it puts less strain on the server.

Implementing SockJS Angular Client

angular.module('myApp')
.service('PushNotificationService', ['$q', '$timeout', function($q, $timeout) {

   var service = {}, listener = $q.defer(), socket = {
      client: null,
      stomp: null
    };

    service.RECONNECT_TIMEOUT = 30000;
    service.SOCKET_URL = 'your socket Url'; // like '/chat'
    service.CHAT_TOPIC = 'topic url'; // like '/getMessage/chat'  

    service.receive = function() {
      return listener.promise;
    };

    var reconnect = function() {
      $timeout(function() {
        initialize();
      }, this.RECONNECT_TIMEOUT);
    };


    var startListener = function() {
      socket.stomp.subscribe(service.CHAT_TOPIC, function(data) {                 
          var jsonObj = JSON.parse(data.body);
        listener.notify(jsonObj);
      });
    };

    var initialize = function() {
      socket.client = new SockJS(service.SOCKET_URL);
      socket.stomp = Stomp.over(socket.client);
      socket.stomp.connect({}, startListener);
      socket.stomp.onclose = reconnect;
    };

    initialize();
    return service;
}]);

Incorporate the following code in your controller:

angular.module('myApp').controller('myCtrl', function($scope, PushNotificationService) {
     PushNotificationService.receive().then(null, null, function(message) {

                   //message has the data pushed to the socket from the server

            //assign data to $scope variable
          $scope.data = message;
                });
})

Add the below scripts to your HTML file:

sockjs.js
stomp.js

For further details, visit:

Websocket using Spring AngularJS SockJS

Answer 2

To ensure real-time updates from the server, it is recommended to utilize websockets. By implementing websockets, any changes on the server side can be pushed to sockets which in turn can update the scope variable. This approach is more efficient than constantly looping or making server requests every few seconds, as it puts less strain on the server.

Implementing SockJS Angular Client

angular.module('myApp')
.service('PushNotificationService', ['$q', '$timeout', function($q, $timeout) {

   var service = {}, listener = $q.defer(), socket = {
      client: null,
      stomp: null
    };

    service.RECONNECT_TIMEOUT = 30000;
    service.SOCKET_URL = 'your socket Url'; // like '/chat'
    service.CHAT_TOPIC = 'topic url'; // like '/getMessage/chat'  

    service.receive = function() {
      return listener.promise;
    };

    var reconnect = function() {
      $timeout(function() {
        initialize();
      }, this.RECONNECT_TIMEOUT);
    };


    var startListener = function() {
      socket.stomp.subscribe(service.CHAT_TOPIC, function(data) {                 
          var jsonObj = JSON.parse(data.body);
        listener.notify(jsonObj);
      });
    };

    var initialize = function() {
      socket.client = new SockJS(service.SOCKET_URL);
      socket.stomp = Stomp.over(socket.client);
      socket.stomp.connect({}, startListener);
      socket.stomp.onclose = reconnect;
    };

    initialize();
    return service;
}]);

Incorporate the following code in your controller:

angular.module('myApp').controller('myCtrl', function($scope, PushNotificationService) {
     PushNotificationService.receive().then(null, null, function(message) {

                   //message has the data pushed to the socket from the server

            //assign data to $scope variable
          $scope.data = message;
                });
})

Add the below scripts to your HTML file:

sockjs.js
stomp.js

For further details, visit:

Websocket using Spring AngularJS SockJS

Tips for creating a binding between an HTTP service and a variable in AngularJS that adjusts when the server data is modified

Answer №1

Similar questions

Map failing to refresh

Is there a way to incorporate pseudo-dynamic css into my projects?

Utilizing Global Variables and Passing Values in Ionic 3

Creating an animated transition for an element's height with CSS

Activate on click using JavaScript

Tips for optimizing iframe loading times using the onload event

Inquiry on integrating Spotify with Axios for my debut solo project (beginner inquiry)

React Hooks: Issue with UseRef not detecting events from Material UI Select component

Tips for concealing the ID value within a URL or parameter

Deactivating a button if the input fields are blank using ReactJS

Streamlining the login process in AngularJS to eliminate the need for repeated logins

Exploring the documentation of node.js with doxygen

CSS fixed dynamically with JavaScript and multiple div elements placed randomly

jQuery's find method returns a null value

"Executing ng-click directive on a second click changes the route in AngularJS

Testing the Angular module's run function with unit tests

Retrieving and storing information from a form without the need to submit it

Guide to extracting a key from the route module with the help of vuex-router-sync

Modify how the browser typically processes script tags as its default behavior

Error encountered when trying to update Express Mongoose due to duplicate key