2

I am using ionic framework for my android app and MEANJS on my server. I am using Web Sockets to get realtime data. While the server side web application updates automatically every time a CRUD happens in the android application, the android app does not update automatically when a change is made on the server side.

Android App Service(AngularJS)

.service('Socket', ['Authentication', '$state', '$timeout',
function (Authentication, $state, $timeout) {
    // Connect to Socket.io server
    this.connect = function () {
      // Connect only when authenticated
      if (Authentication.user) {
        this.socket = io('https://cryptic-savannah-60962.herokuapp.com');
      }
    };
    this.connect();

// Wrap the Socket.io 'on' method
this.on = function (eventName, callback) {
  if (this.socket) {
    this.socket.on(eventName, function (data) {
      $timeout(function () {
        callback(data);
      });
    });
  }
};

// Wrap the Socket.io 'emit' method
this.emit = function (eventName, data) {
  if (this.socket) {
    this.socket.emit(eventName, data);
  }
};

// Wrap the Socket.io 'removeListener' method
this.removeListener = function (eventName) {
  if (this.socket) {
    this.socket.removeListener(eventName);
  }
};
}

Client Side Controller

if (!Socket.socket && Authentication.user) {
  Socket.connect();
}

Socket.on('orderCreateError', function (response) {
  $scope.error = response.message;
});

Socket.on('orderCreateSuccess', function (response) {
  if ($scope.orders) {
    $scope.orders.unshift(response.data);
  }
});

Socket.on('orderUpdateSuccess', function (response) {
  if ($scope.orders) {
    // not the most elegant way to reload the data, but hey :)
    $scope.orders = Orders.query();
  }
});

Server Controller(NodeJS)

socket.on('orderUpdate', function (data) {
var user = socket.request.user;

// Find the Order to update
Order.findById(data._id).populate('user', 'displayName').exec(function (err, order) {
  if (err) {
    // Emit an error response event
    io.sockets.emit('orderUpdateError', { data: data, message: errorHandler.getErrorMessage(err) });
  } else if (!order) {
    // Emit an error response event
    io.sockets.emit('orderUpdateError', { data: data, message: 'No order with that identifier has been found' });
  } else {
    order.name = data.name;
    order.phone = data.phone;
    order.water = data.water;
    order.waiter = data.waiter;
    order.napkin = data.napkin;
    order.complete = data.complete;
    order.rating = data.rating;
    order.payment_mode = data.payment_mode;
    order.order_source = data.order_source;
    order.orderfood = data.orderfood;

    order.save(function (err) {
      if (err) {
        // Emit an error response event
        io.sockets.emit('orderUpdateError', { data: data, message: errorHandler.getErrorMessage(err) });
      } else {
        // Emit a success response event
        io.sockets.emit('orderUpdateSuccess', { data: order, updatedBy: user.displayName, updatedAt: new Date(Date.now()).toLocaleString(), message: 'Updated' });
      }
    });
  }
});
});
Rohit Vinay
  • 665
  • 7
  • 38

1 Answers1

1

You have two emit channels on your server side but neither event is handled on the client side.

Per socket.io docs, you need something like:

socket.on('orderUpdateSuccess', function (data) {
    // do something inside the app that will update the view
    console.log(data);
    Orders.update(data); // assuming you have a service called Orders to keep track of live data -- don't forget [$scope.$apply][2]
});

Using your example code

Socket.on('orderUpdateSuccess', function (response) {
    if ($scope.orders) {
        $scope.$apply(function() {
            // not the most elegant way to reload the data, but hey :)
            $scope.orders = Orders.query();
        });
    }
});
Timothy Nott
  • 11
  • 2
  • i have updated the Client Side Controller which is on my ionic side – Rohit Vinay Apr 11 '16 at 18:13
  • Run your changes to the model inside of $scope.$apply. Right now the changes are not inside of AngularJS library code so they go unnoticed by the digest. – Timothy Nott Apr 11 '16 at 19:05
  • could show me as an updated answer to run changes to the model inside of $scope.$apply., i am new to this. thank you – Rohit Vinay Apr 11 '16 at 19:08
  • In addition to using $scope.$apply, I would move the socket code to a service and use $broadcast to update Controllers. This way you don't need to open and close a socket continuously and the updated data will be available throughout the application. – Timothy Nott Apr 11 '16 at 19:15
  • socket io docs say i need to broadcast on the server side, do i have to do it on the client side as well? – Rohit Vinay Apr 11 '16 at 19:19
  • Before we get into Angular's $broadcast, can you confirm that your client code is receiving socket data? Try to console.log some data. If that works, try wrapping the code that updates order data in $scope.$apply so that the UI updates. – Timothy Nott Apr 14 '16 at 19:28
  • sorry for the delayed response, i just verified, my client is not receiving socket data. how do i remedy it? – Rohit Vinay Apr 19 '16 at 22:16
  • Are you testing in the browser or in a native app? Can you put your code in a Plunkr so I can test directly? – Timothy Nott Apr 22 '16 at 13:09
  • i tested in both browser and as an app – Rohit Vinay Apr 22 '16 at 14:44
  • You have verified that your socket client is not receiving data. 2 possible reasons come to mind. 1) Your server is not emitting a message. You can debug your server code with a log file. 2) Your client is either not connected to the socket server or is not subscribed to the channel the server is emitting to. When looking in a browser, can you open Chrome Developer Tools and verify that the socket connection is successful? If so, when you look at the network message with a 101 response, you should be able to view the Frames property of that connection and see whether messages are inbound – Timothy Nott Apr 23 '16 at 18:04
  • Let me knows what I should do. Will try that – Rohit Vinay Apr 23 '16 at 18:07
  • What you should do depends on the results of the tests above. What information are you getting from each test? – Timothy Nott Apr 23 '16 at 18:51