CODEWITHSUNDEEP
angularjsnode.jssocketsionic-frameworkmeanjs
Rohit Vinay
Rohit Vinay

Reputation: 663

Ionic Socket setup not working

I am using MEAN.JS(NODEJS) for my server side and client for my web portal, where i have socket setup for realtime updates and its works perfectly, when i use the same controller in my ionic framework based android application it spits out this error,
GET http://localhost:8100/socket.io/?EIO=3&transport=polling&t=LDaenOH 404 (Not Found).
my server runs on http://localhost:3000

My MEANJS and IONIC Socket Service

angular.module('core').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();
      }
    };
    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);
      }
    };
  }
]);

MEANJS and IONIC CONTROLLER

.controller('OrdersController', OrdersController);
OrdersController.$inject = ['$scope', '$state', '$timeout', 'orderResolve','OrdersService', 'Authentication', 'Socket'];

  function OrdersController($scope, $state, $timeout, order, OrdersService, Authentication, Socket) {
    var vm = this;

vm.order = order;
//vm.isNew = vm.order._id;
vm.authentication = Authentication;
vm.user = vm.authentication.user;
vm.error = null;
vm.message = null;
vm.form = {};
vm.remove = remove;
vm.save = save;
vm.saveUsingSocketEvents = saveUsingSocketEvents;

// Make sure the Socket is connected
if (!Socket.socket && Authentication.user) {
  Socket.connect();
}

Socket.on('orderUpdateError', function (response) {
  vm.error = response.message;
  //TODO: Use ng-messages
});

Socket.on('orderUpdateSuccess', function (response) {
  if (vm.order && vm.order._id.toString() === response.data._id) {
    vm.order = response.data;
    vm.message = response.message + ' by ' + (response.updatedBy !== vm.user.displayName ? response.updatedBy : 'You') + ' at ' + response.updatedAt;
  }
});
// Create new Order using SocketIO events
function saveUsingSocketEvents(isValid) {
  vm.error = null;

  if (!isValid) {
    $scope.$broadcast('show-errors-check-validity', 'orderForm');
    return false;
  }

  var order = new OrdersService({
        name: this.name,
        phone: this.phone
    });

  // we can send the user back to the orders list already
  // TODO: move create/update logic to service
  if (vm.order._id) {
    vm.order.$update(successCallback, errorCallback);
  } else {
    vm.order.$save(successCallback, errorCallback);
  }

  function successCallback(res) {
    $state.go('orders.view', {
      orderId: res._id
    });
  }

  function errorCallback(res) {
    vm.error = res.data.message;
  }

  // wait to send create request so we can create a smooth transition
  $timeout(function () {
    // TODO: move create/update logic to service
    if (vm.order._id) {
      Socket.emit('orderUpdate', vm.order);
    } else {
      Socket.emit('orderCreate', vm.order);
    }        
  }, 2000);
}

}

Upvotes: 2

Views: 728

Answers (1)

Fabio Antunes
Fabio Antunes

Reputation: 22862

The problem is that when you are creating a new socket connection you aren't specifying the url for your Socket server 

angular.module('core').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(); //you haven't specified the url for your socket server
      }
    };

So on your android application it will try to create a socket based on your current url, since cordova just serves your files through the file protocol, your socket.io will try to create a connection through the same protocol.

Your socket server is running on your local machine, to work on your android you have to specify your machine's ip address and the port where the server is listening. Go to your network's preferences and get your ip address and add it to your socket initialisation along with the port where your server is listening something like this:

angular.module('core').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('http://192.1.0.123:8100');
      }
    };

Where 192.1.0.123 is your machine's IP address and 8100 is the port where your socket server is running.

Upvotes: 1

Related Questions