Socket.IO AngularJS Wrapper

Tue, 20 Jan 2015

I've been playing around with Socket.IO and AngularJS. To make things easier I created this service which can be used for transferring data between the client (which could be a web page) and a NodeJS server.

The app is served by NodeJS so the Socket.IO server is listening on same location.

'use strict';

angular .module('APP') .factory('$WS', function($rootScope) { var self = this;

self.ready = false;

self.socket = io.connect(location.host, {
    'connect timeout':       100,
    'reconnection delay':    100
});

self.socket.on('init', function() {
    console.log('init');
});

self.socket.on('disconnect', function() {
    console.log('socket disconnected');
});

self.socket.on('connect', function() {
    console.log('socket connected');
});

return {
    ready: function(callback) {
        if(self.ready) {
            callback();
            return;
        }

        self.socket.on('connect', function() {
            $rootScope.$apply(function() {
                self.ready = true;
                callback.apply(self.socket);
            });
        });
    },
    on: function(eventName, callback) {
        self.socket.on(eventName, function() {
            var args = arguments;

            $rootScope.$apply(function() {
                callback.apply(self.socket, args);
            });
        });
    },
    emit: function(eventName, data, callback) {
        self.socket.emit(eventName, data, function() {
            var args = arguments;
            $rootScope.$apply(function() {
                if(callback) {
                    callback.apply(self.socket, args);
                }
            });
        });
    }
};

});

Usage:

angular .module('APP') .controller('TestController', ['$scope', '$WS', function($scope, $WS) {

$scope.messages = \[\];

// Connect websocket
$WS.ready(function() {

    // Receive message
    $WS.on('chat/message', function(data) {
        
        // Validate input data
        if(data.message\_id) {
            console.log(data);
            $scope.messages.push(data);
        }
    });
});

// You can add another ready state listener for the same connection
// Let's consider we have a method which sends messages
$scope.send\_message = function(msg\_title, msg\_value) {
    
    $WS.ready(function() {
        // Emit message
        $WS.emit('chat/message', {
            title:    msg\_title,
            message:  mgs\_value
        });
    });
};

}]);

This is just basic usage.  Will be back with NodeJS & Socket.IO server example.

Categories: angularjs, javascript, nodejs, socket-io