I want to code a client notification reader with a login view and a wall for read the incoming notifications.
I'm trying to implement an authentication system with socket io and angularJS . I use the JWT .
I use the library briantford-socket-io too. Phase after login , I store the authentification token in localstorage thanks to ngStorage .
The system routing redirects me to the /mur view and with the socket factory (see resolve).
Once i'm on the /mur view the handshake is correctly done and i'm starting listen test event.
If I press disconnect button I run the socket.disconnect méthode, I clear the token stored locally and I redirected to the login page.
The problem is that if I want to reconnect again it happens absolutely nothing.
If i put a Socket.reconnect() in the /murCtrl my socket reconnect with the old token even if my token localstorage is clear..
Let's see the code above ..
This is my socketFacory using briant-ford-socket-io :
.factory('Socket', ['socketFactory', 'SERVER', '$localStorage', function(socketFactory, SERVER, $localStorage) {
//var disconnected = false;
return {
initSocket: function(){
return socketFactory({
prefix: '',
ioSocket: io.connect(SERVER.DOMAINE, {query: "token="+$localStorage.authToken.token, forceNew: true})
});
},
disconnect: function(){
this.initSocket().disconnect();
},
reconnect: function(){
this.initSocket().reconnect();
}
}
}])
The User(Utilisateur in french) factory :
.factory('Utilisateur', ['$http','SERVER', '$localStorage', '$location', 'Socket', '$q',
function($http, SERVER, $localStorage, $location, Socket, $q){
return {
login: function(credential){
$http.post(SERVER.DOMAINE+'/connexion/login', credential)
.success(function(response){
$localStorage.authToken = response;
$location.path('/mur');
});
},
logout: function(){
Socket.disconnect();
$localStorage.authToken.token = "";
$location.path('/login');
},
testAuth: function(){
return $http.post(SERVER.DOMAINE+'/connexion/testAuth');
},
isAuthenticated: function(){
return ($localStorage.authToken.token != "");
}
}
}])
Here's my routing system (just the important part):
.config(['$routeProvider', '$httpProvider', 'USER_STATUS', function($routeProvider, $httpProvider, USER_STATUS){
$routeProvider
.when('/login',
{
templateUrl: 'views/login.html',
controller: 'AuthCtrl',
resolve: {
Accessible: function(Utilisateur, $q){
var start = $q.when('start');
return start.then(function(){
if(Utilisateur.isAuthenticated()){
return $q.reject('error:allready-connected');
}
});
}
}
})
.when('/mur',
{
templateUrl: 'views/mur.html',
controller: 'MurCtrl',
authorizedRoles: [USER_STATUS.granted],
resolve: {
Authorized: function(CheckAccess){
return CheckAccess();
},
Socket: function(Socket){
return Socket.initSocket();
}
}
})
And finaly my MurCtrl (Mur = wall):
.controller('MurCtrl', function($scope, $localStorage, $http, Socket, Utilisateur){
$scope.notifications = [];
Socket.reconnect();
Socket.on('test', function(notif){
$scope.notifications.push(notif)
});
$scope.letstest = function(){
Utilisateur.testAuth().then(function(res){
console.log(res);
});
}
})
Thank your for your help i spend my week end to search a solution unsuccessfully.
Sorry for my bad english :)