Work with JWT's

[mick26]

Hello,
I am trying to make angular-socket.io work with an JWT Authentication system (using socketio-jwt and jsonwebtoken packages). I am using socket.io V1. I have the following angular service which sends the JWT as a query string. Socket authentication only works in my program when I log on and then hit F5. I am assuming this is because the Provider service wraps around the io() object and creates the socketFactory factory service when the program starts. Thus the factory Service is created before a user logs on and is given a JWT by the Node server. I have tried doing explicit refreshing and making other $http requests in the controller like:
$http.get("http://localhost:4000/socket.io/?token="+token")
$http.get("ws://localhost:4000/socket.io/?token="+token")
$window.location.reload();

How would angular-socket-io be hooked up to an authentication system where the io.connect querystring parameter varies with each login? Are there any examples?

angular.module('myApp.services', [])
.factory('socket', function (socketFactory, $rootScope, $window) {
  return socketFactory({
    ioSocket: io.connect('http://localhost:4000', {
      'force new connection': true, query: 'token=' + $window.sessionStorage.token
    })
  });
});

Many Thanks
Mick

[mick26]

I got the authentication working thanks to issue #64 and Joseph Thibeault's code which is linked to in the FAQ. Joesph created a promise in the socketFactory. In the Controller within $http('/login') .success function after you have got JWT from server and saved it to session/local storage add

$rootScope.$broadcast('authenticated');

this causes the socket to resolve.

angular.module('myApp.services', [])
.factory('socket', function (socketFactory, $rootScope, $window, $q, $timeout) {
        // create a promise instance
        var socket = $q.defer();
        // listen for the authenticated event emitted on the rootScope of 
        // the Angular app. Once the event is fired, create the socket and resolve
        // the promise.
        $rootScope.$on('authenticated', function() {
            
            // resolve in another digest cycle
            $timeout(function() {
                // create the socket
                var newSocket = (function() {
                    return socketFactory({
                
                      ioSocket: io.connect('http://localhost:4000', {
                        'forceNew': true, query: 'token=' + $window.sessionStorage.token                
                        })
                    });
                })();
                
                // resolve the promise
                socket.resolve(newSocket);
            });
        });
        // return the promise
        return socket.promise;
});

Issue #45 is closed regarding best way to disconnect a socket. What is the best way to do this?
On $http(/Logout) .success
should I send another

$rootScope.$broadcast('disconnected');

Then in socketFactory add

  
$rootScope.$on('disconnected', function() {
    socket.disconnect()
}

Or can I call socket.disconnect directly from the controller?

[mick26]

Got socket disconnection working using the following code in my Logout Controller.

      socket.then(function(socket) {  
        socket.disconnect();
      });

[tapesec]

And what's happen if you whant to reconnect after disconnect ? When i try to reconnect with your logic code nothing happen. how could you reinstance a new io.connect() ?

[umens]

Hi ! Did you resolve your problem @tapesec ? i'm currently having the same issue.

[pciazynski]

@tapesec @umens I am now facing the same problem. I try to do the following in my controller:
SocketIO.then(function(socket) { socket.connect(); });
but then something strange happens. I get two socket.io connections with two different IDs, but only one of this is working.
Did you resolve this problem better?

[pciazynski]

@tapesec @umens
OK, I solved this problem, thanks sunild's comment in #99
In my controller I add:
SocketIO.then(function(socket) { socket.connect(); });
but in my factory I add autoConnect: false, to object passed to io.connect function, like that:

var tirsServices = angular.module('tirsServices', ['btford.socket-io']);

tirsServices.factory('SocketIO', function(socketFactory, $rootScope, $window, $q, $timeout) {
    // create a promise instance
    var socket = $q.defer();
    // listen for the authenticated event emitted on the rootScope of
    // the Angular app. Once the event is fired, create the socket and resolve
    // the promise.
    $rootScope.$on('authenticated', function() {
        // resolve in another digest cycle
        $timeout(function() {
            // create the socket
            var newSocket = (function() {
                return socketFactory({
                    ioSocket: io.connect( {
                        'forceNew': true,
                        query: 'token=' + $window.sessionStorage.token.split(' ')[1],
                        autoConnect: false
                    })
                });
            })();

            // resolve the promise
            socket.resolve(newSocket);
        });
    });
    // return the promise
    return socket.promise;
});

Now after disconnecting, when I connect again everything works :)

[pciazynski]

@tapesec @umens Unfortunately, it it not as easy as I thought. When I use socket.connect(); in token in query of io.connect is old one, so this solution is very dangerous (it is possible to mix accounts). Do you have better solution?

[sitamet]

@Ethefor True,it is possible to mix accounts. My approach is to take a reference to the socket and control the query params:

factory('socket', [
    'config',
    'socketFactory',
    '$rootScope',
    '$q',
    '$timeout',
    function (config, socketFactory, $rootScope, $q, $timeout) {

        // create a promise instance
        var socket = $q.defer(),
            connected = false,
            ioSocket;

        // listen for the authorised event emitted on the rootScope of
        // the Angular app. Once the event is fired, create the socket and resolve
        // the promise or reuse connection with new token
        $rootScope.$on('authorised', function(event, token) {

            // authorised event can be called multiple times
            // connect only if necessary
            if (!connected) {

                $timeout(function() {

                    if (ioSocket === undefined) {
                        // First time connection: create the socket and resolve promise
                        ioSocket = io.connect(
                            config.API_HOST, {
                                forceNew: true,
                                query: 'token=' + token
                            });

                        var authenticatedSocket = (function() {
                            return socketFactory({
                                prefix: '',
                                ioSocket: ioSocket
                            });
                        })();

                        // resolve the promise
                        socket.resolve(authenticatedSocket);

                    } else {

                        // Recycle socket: replace the token and connect
                        ioSocket.io.opts.query = 'token=' + token;
                        ioSocket.connect();
                    }
                });

                connected = true;
            }

        });

        $rootScope.$on('unauthorised', function() {


            if (connected) {

                socket.promise.then(function(socket) {
                    socket.disconnect();
                });

                connected = false;
            }
        });


        // return the promise
        return socket.promise;


    }]).

[sitamet]

Hi David,

Here you have sample. First block forwards the socket event to the angular
event system, then on the angular world simply listen ...

socket.then(function(socket) {
socket.forward([
'site.error'
], $scope);
});

$scope.$on('site.error', function(key, content) {
if (content.error) {
messagesModel.addAlert('error', content.error);
}
});

regards

On 13 October 2016 at 19:28, David Frey notifications@github.com wrote:

@sitamet https://github.com/sitamet I am using your code and the
reconnect works except I can't get incoming message forwarding to work.

Using ioSocket.forward('broadcast'), a 'broadcast' on the socket is not
forwarded. How are you forwarding?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#76 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAX_M1EdU9z-kwlO6a99qosmRP1Cyph8ks5qzmo1gaJpZM4CdI1v
.

[frey1esm]

Thanks, Joan. What is the difference then between forwarding your way and just doing this in the controllers:

socket.on('site.error', function(content) {
  if (content.error) {
  messagesModel.addAlert('error', content.error);
  }
});

[sitamet]

Hi,
The problem that forwarding solves is the duplication of listeners:
Avoid duplicating event handlers when a user navigates back and forth
between routes
joan

On 14 October 2016 at 12:59, David Frey notifications@github.com wrote:

Thanks, Joan. What is the difference then between forwarding your way and
just doing this in the controllers:

socket.on('site.error', function(content) {
if (content.error) {
messagesModel.addAlert('error', content.error);
}
});

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#76 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAX_MzhJPGLO_EC_Ppasm5sL-q6YSRCwks5qz2B1gaJpZM4CdI1v
.