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