Created
June 19, 2013 05:24
-
-
Save clintberry/5811856 to your computer and use it in GitHub Desktop.
using callbacks instead of promises for angular websocket service
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
angular.module('MyApp').factory('MyService', ['$q', function($q) { | |
// We return this object to anything injecting our service | |
var Service = {}; | |
// Keep all pending requests here until they get responses | |
var callbacks = {}; | |
// Create a unique callback ID to map requests to responses | |
var currentCallbackId = 0; | |
// Create our websocket object with the address to the websocket | |
var ws = new WebSocket("ws://localhost:8000/socket/"); | |
ws.onopen = function(){ | |
console.log("Socket has been opened!"); | |
}; | |
ws.onmessage = function(message) { | |
listener(message); | |
}; | |
function sendRequest(request, callback) { | |
var defer = $q.defer(); | |
var callbackId = getCallbackId(); | |
callbacks[callbackId] = { | |
time: new Date(), | |
cb:defer | |
}; | |
request.callback_id = callbackId; | |
console.log('Sending request', request); | |
ws.send(JSON.stringify(request)); | |
if(typeof callback == 'function') { | |
defer.promise.then(function(data) { | |
callback(null, data); | |
}, | |
function(error) { | |
callback(error, null); | |
}); | |
} | |
return defer.promise; | |
} | |
function listener(data) { | |
var messageObj = data; | |
console.log("Received data from websocket: ", messageObj); | |
// If an object exists with callback_id in our callbacks object, resolve it | |
if(callbacks.hasOwnProperty(messageObj.callback_id)) { | |
console.log(callbacks[messageObj.callback_id]); | |
$rootScope.$apply(callbacks[messageObj.callback_id].cb.resolve(messageObj.data)); | |
delete callbacks[messageObj.callbackID]; | |
} | |
} | |
// This creates a new callback ID for a request | |
function getCallbackId() { | |
currentCallbackId += 1; | |
if(currentCallbackId > 10000) { | |
currentCallbackId = 0; | |
} | |
return currentCallbackId; | |
} | |
// Define a "getter" for getting customer data | |
Service.getCustomers = function(callback) { | |
var request = { | |
type: "get_customers" | |
} | |
// Storing in a variable for clarity on what sendRequest returns | |
var promise = sendRequest(request, callback); | |
return promise; | |
} | |
return Service; | |
}]) |
but you also lose the benefit of promises in the template, which is an awesome feature of angular.
Thank you for your kind example!
But, may I ask why this callback method loses the benefit of promises?
It seems like above example is still using the promise(with $q service).
I hope I could know what I missed.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The idea is you can use callbacks like this:
Service.getCustomers(function(error, data){
//Do stuff here....
});