AngularJS $ q许诺与socket.io

Question

I would like to create an angularJS promise which works with socket.io. I have currently a callback set to deal with the response :

function request(event, data, callback) {
    socket.emit(event, data);
    socket.on(event, function(d) {
        socket.off(event);
        callback(d);
    });
}

This force me to write something like :

request('myEvent', 'Hello World !', function(data) {
    ...
});

I wonder if we could use a promise (with $q service from angular) :

request('myEvent', 'Hello World !').then(function(data) {

});

Thanks !

Answer 1

You can try something like

function request(event, data) {
    var deferred = $q.defer();
    socket.emit(event, data);
    socket.on(event, function(d) {
        socket.off(event);
        deferred.resolve(d);
    });
    return deferred.promise;
}

Then you can use

request('myEvent', 'Hello World !').then(function(data) {

});

Answer 2

function request (eventName, data) {
  return $q(function (resolve, reject) {
    socket.emit(eventName, data);
    socket.on(eventName, function (data) {
      socket.off(eventName);
      resolve(data);
    });
  });
}

Answer 3

well promises can only resolve or reject ones. will the event happened more then once ? do you care if it happened more then ones

If your ok with your event firing only 1 time then you can promise it yea.

function request(event, data, callback) {
    socket.emit(event, data);
    socket.on(event, function(d) {
        socket.off(event);
        callback(d);
    });
}

becomes:

function request(event, data) {
    return $q(function(resolve, reject) {
       socket.emit(event, data);
       socket.on(event, function(d) {
           socket.off(event);
           resolve(d)
       });
    });
}

You will use it:

request('event', data).then(....)

Answer 4

I had the problem when I wrap socket.on(event) in a function and call the function more than onceit will open multiple of them. So the socket.on(event) is called multiple times when the backend calls a specific socket event. If fixed this by using $rootScope.$on which only can have one instance.

this.search = (query) => {

    var deferred = $q.defer();

    socket.emit('search', {query: query}) // send data to backend

    $rootScope.$on('search', function(event,data){

        deferred.resolve(data);

    });

    return deferred.promise;
}

//get data back from backend
socket.on('search',(data) => {

    $rootScope.$emit('search',data);

}); 

The hole code is wrapped inside an Angularjs service. To get the data now from the socket.on('search') you can do something like this:

SocketioService.search('Some query').then( (data) => {
  //do something with the data from the backend
})

Not sure if this is the best solution, but it works :)