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.