Issue
Update
Now the method socket.disconnect(close) has been included in angular-socket-io. It has a Boolean parameter 'close', if true, closes also the underlying connection.
I am using btford/angular-socket-io
What is the correct approach to disconnect the client?
I am trying to implement the following scenario
- user login --> connect to socket
- user logout --> disconnect from socket
- repeat (1) (2)
I succeeded to implement the connect (1) but I am having trouble with the disconnect (2)
This is what I tried: in my Authentication service I have the following
factory('AuthenticationService', function(socketFactory) {
var mySocket;
var service = {
//...
login: function(credentials) {
var login = $http.post('/login', credentials);
return login.then(function(response) {
service.currentUser = response.data.user;
if ( service.isAuthenticated() ) {
// **connect to socket on login**
mySocket = socketFactory({ioSocket: io.connect('http://localhost')});
}
return service.isAuthenticated();
});
},
logout: function(redirectTo) {
var logout = $http.get('/logout');
logout.success(function() {
service.currentUser = null;
mySocket.disconnect(); // **disconnect on logout (not working)**
redirect(redirectTo);
});
return logout;
},
//...
};
return service;
})
mySocket.disconnect();
gives the following error
TypeError: Object # has no method 'disconnect'
mySocket.disconnect() works if instead of
mySocket = socketFactory({ioSocket: io.connect('http://localhost')});
I use
mySocket = io.connect('http://localhost');
Solution
The solution is very simple in fact :
Go edit the "socket.js" file from the Btford angular-socket module and you'll see :
var wrappedSocket = {
on: addListener,
addListener: addListener,
emit: function (eventName, data, callback) {
return socket.emit(eventName, data, asyncAngularify(socket, callback));
},
removeListener: function () {
return socket.removeListener.apply(socket, arguments);
},
// when socket.on('someEvent', fn (data) { ... }),
// call scope.$broadcast('someEvent', data)
forward: function (events, scope) {
if (events instanceof Array === false) {
events = [events];
}
if (!scope) {
scope = defaultScope;
}
events.forEach(function (eventName) {
var prefixedEvent = prefix + eventName;
var forwardBroadcast = asyncAngularify(socket, function (data) {
scope.$broadcast(prefixedEvent, data);
});
scope.$on('$destroy', function () {
socket.removeListener(eventName, forwardBroadcast);
});
socket.on(eventName, forwardBroadcast);
});
}
};
And then you just add this next to the others functions :
disconnect: function(){
return socket.disconnect();
},
And voilà, there you go :)
You should have something like that :
var wrappedSocket = {
on: addListener,
addListener: addListener,
emit: function (eventName, data, callback) {
return socket.emit(eventName, data, asyncAngularify(socket, callback));
},
disconnect: function(){
return socket.disconnect();
},
removeListener: function () {
return socket.removeListener.apply(socket, arguments);
},
// when socket.on('someEvent', fn (data) { ... }),
// call scope.$broadcast('someEvent', data)
forward: function (events, scope) {
if (events instanceof Array === false) {
events = [events];
}
if (!scope) {
scope = defaultScope;
}
events.forEach(function (eventName) {
var prefixedEvent = prefix + eventName;
var forwardBroadcast = asyncAngularify(socket, function (data) {
scope.$broadcast(prefixedEvent, data);
});
scope.$on('$destroy', function () {
socket.removeListener(eventName, forwardBroadcast);
});
socket.on(eventName, forwardBroadcast);
});
}
};
Answered By - Damien Roelens
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.