Azure Mobile Service: (here after refer as AMS) provides ready to use service for building mobile apps ( android, windows app, iOS) or simple javascript based App. If you planning to build a mobile App having cloud as backend, and you are planing to start directing building App, then it is perfect choice to using AMS. This provides CRUD operation as API having persistent entities. It uses SQL Azure as DB, and exposes API as REST. Following are some of advantages.
- CRUD operation with Cloud DB, access API from every where ( client side, server side).
- Social Signon integration, no need to write FB,TW API to integrate, just few config, that will make things work.
- Notification Hub integration – Send Push notification to any device ( android, iOS, windows ) without caring which format the device will accept.
Pusher : Pusher is a simple hosted API for quickly, easily and securely adding realtime bi-directional functionality via WebSockets to web and mobile apps, or any other Internet connected device. — http://pusher.com/docs . This has support for array of language support libraries.
To Build Real Time with AMS and Pusher – you need to have Azure and Pusher subscription.
What will be the end result – We will build a Collaborative TodoList manager, if multiple users opened same list, then anyone can add/remove/complete the task and it will be seamlessly visible to both.
How we will do this – We will use basic TodoList manager that azure provides and add RealTime functionality to this using Pusher.I will walk you through detailed step to implement this.
1. Login to Azure portal, create a Mobile Service with javascript backend.
2. Select that mobile service , click on Get Started, this will get you to following .
3. Create todoitem table and download javascript todo App.
4. Create and Login to Pusher account. After loggin in, click on “New App”, it will create an App .You need to note down App ID, Key and Secret. Following is the screenshot for this.
5. In Azure portal , select created Mobile Service, Click on Data, then select TodoItem table. Click on script, select insert operation. Then you should get following .
Here you will get inbuilt function called “insert”. To integrate with Pusher, you have to include pusher library using –
var Pusher = require('pusher');
Then on every item insert operation we will push the details to Pusher using following code.
function publishItemCreatedEvent(item) {
// Ideally these settings would be taken from config
var pusher = new Pusher({
appId: 'XXX',
key: 'XXXXXXXXXXXXXXX',
secret: 'XXXXXXXXXXXXXXX'
});
// Publish event on Pusher channel
pusher.trigger( 'test_channel', 'OnInsert', item );
}
Detailed explanation for above – I have created a pusher instance using required credential such as appid, key, secret. Then i have triggered a message, with a channel name as “test_channel”, an event name as “OnInsert” and required object “item”.
Then we will invoke this function in success handler of insert operation. So that for every todo insert operation , pusher will know something. We will have to do the same steps for update, delete as well.
6. Open “index.html” from downloaded sample , mentioned in step # 3 & add following snippet to the HTML file.
<script src="http://js.pusher.com/2.2/pusher.min.js" type="text/javascript"></script>
<script type="text/javascript">
var pusher = new Pusher('PUSHER_KEY');
var channel = pusher.subscribe('test_channel');
channel.bind('OnInsert', function(data) {
alert( "Hooray, Someone created task " + data.text);
var newelem = $('<li>').attr('data-todoitem-id', data.id)
.append($('<button class="item-delete">Delete</button>'))
.append($('<input type="checkbox" class="item-complete">')
.prop('checked', false))
.append($('<div>')
.append($('<input class="item-text">')\ .val(data.text)));
$('#todo-items').fadeOut().append(newelem).fadeIn(100);
$('#summary').html('<strong>' + $("#todo-items li").length + '</strong> item(s)');}
);
</script>
Detailed explanation for above : First, I have added pusher javascript reference. Then instantiated pusher by providing PUSHER_KEY , subscribed to channel named “test_channel”.
Finally, I have done binding for event “OnInsert” for the above channel, so that if there is insert ->Azure will send Puhser that new item added–>Pusher will intimate this HTML App , as this is subscriber to test_channel and listening to “OnInsert”.
I have uploaded this solution to pastebin, download that and replace with required key – (Pusher keys), and it should start working.
I have already published same article in MSDN .
Tech Stuff 