Win 8 App, Web API, and SignalR Integration on Azure Services

Taiseer JoudehSenior IT Team Lead at Aramex

Twitter: @tjoudeh Blog: http://bitoftech.net

What we’ll build in this session?Solution for Azure Day Restaurant, requirements are:

• Client App which will be used by hostess to register clients on waiting list.

• Backend web app used my Restaurant Manager to monitor waiting list with real time updates.

• Low administration and fast deployments with the ability to scale-up in future.

• Reliable and secure medium to store the data.

Technology used?Different Microsoft technologies will be used:

• Windows 8 App to build client App used by the hostess.

• HTML 5 and ASP.NET Web API to build Web App.

• Real time updates using SignalR.

• Hosting the RESTful backend end points on Azure Mobile Services.

• Hosting the Web APP on Azure Websites.

• Saving data securely on SQL Azure Database.

Architecture for the solution

What is Azure Mobile Services?• One common scalable cloud backend to serve different

clients and mobile apps (iOS, Android, Windows 8, Windows Phone, SPA, etc…)

• Exposes secure RESTful endpoints which can be used to save structured data in SQL Azure Database.

• Ability to integrate users authentication, and send updates using push notifications.

Demo 1 – Create Azure Mobile Service

Demo 2 – Build Win 8 App and connect to Azure Mobile Service

Demo 3 – Build Web App and Web API end point

Demo 4 – Deploy Web App to Azure Websites Service

Adding Real Time Updates• We want to add async data exchange between the

server and the client in real time.

• Server should take initiative and send info when available to connected clients.

Adding Real Time Updates – Cont.Available standards and protocols

• 1. Web Sockets: Persistent connection between client and server.• Pros: Two way channel and consider the fastest.

• Cons: Available on modern browsers only (IE 10, Chrome, FireFox) Not fully supported on Safari and Opera.

Adding Real Time Updates – Cont.• 2. Server Sent Events: One directional channel from

the server to client.• Pros: Easy to implement.

• Cons: Not available in IE, if the clients needs to send data to the server new connection should be opened.

• 3. Long Polling: Client opens connection and kept open until the server has something to notify.

• 4. For ever frame: Uses HTML iFrame to keep connection opened with the server.

SignalR for Real Time UpdatesWhat does SignalR offer?

• Isolate us from the low level details, giving us the impression of working with open persistent connection.

• Contains components specific to both ends.

• In charge of determining which is the best technique available both to the client and the server.

• Always try to use the most efficient transport, and keep failing back until it finds one compatible, this done in initial stage (negotiation).

Thank You!