Damir Dobric Posts : azure, Asp.Net, windows azure

Agenda for MSNetwork Web vNext Session

Damir Dobric — Sun, 31 Mar 2013 12:49:16 GMT

Here is the preliminary agenda for MSNetwork upcoming session next week.

There are few important things which will unfortunately not be covered in this session.
But if you really want to dive deeper behind Steaming and Push technologies, I would recommend you to read this post.

How to implement Implement “Async-Push” stream with ASP.NET Handler?

Damir Dobric — Mon, 20 Aug 2012 07:20:00 GMT

The platform technology wave announced in 2012 brings a number of innovations in the ,NET and Microsoft platform at all;no question. One of my personal favorites is the peace of Platform which makes push-scenario easy adoptable. In the time of upcoming cloud patterns, there are more business and technical scenarios which require server/service to push the data to the client. Some of these technologies are to find around WebSockets and SignalR. My intension is not in this post to explain the need for “push”-demand. Assuming that this is clear I would like to provide a native an interesting example, which shows how push scenarios can be achieved by using of simple HTTP.

To demonstrate this I decided to avoid technologies like WebApi and to implement one example on the native ASP.NET. This in nothing against WebApi which I really like. If you like you can implement the same scenario based on WebApi or WCF.. However WebApi and WCF are hardly message driven by design. My scenario is nativelly stream driven and because of that it fits a bit better for this case.

Basically I want to send the request from some HTTP capable client (i.e browser) to the ASP.NET handler, which fulfills following:

1. The request cannot be completed synchronously
This means we will process request asynchronously.

2.. The amount of data sent to the client is huge stream.
This will hold an open connection between client and server. We will push stream of data through this connection from Server to client.

Interestingly, both WebSockets and SignalR makes usage of this two requirements.The WebSockets goes hard way and extend the HTTP protocol to make this working. The SignalR uses standard HTTP and makes usage of 4 transports (ServerSentEvents, ForewerFrames, Polling and WebSockets).

My idea in this post is to show how to natively implement similar scenario by yourself on top of ASP.NET. Then I want to open the browser, type in the URL and expect to continually receive some data from server for very long time without of getting a time-out. Following picture illustrate this scenario:

As first I will create the Web-Project of any type (Forms, MVC, Empty). The go to add project item and select generic handler:

This will create an empty ASHX handler:

/// <summary>

/// Summary description for Handler1

/// </summary>

public class MyStreamHandler : IHttpHandler

{

public void ProcessRequest(HttpContext context)

{
context.Response.ContentType = "text/plain";

context.Response.Write("Hello World");
}

public bool IsReusable

{
get

{

return false;

}

This is a typical ASHX handler which you probably already know. Now change this implementation as follows:

public override async Task ProcessRequestAsync(HttpContext context)
{

}

We basically replace implementation with the HttpTaskAsyncHandler which is the async version of handler. Now I will implement some code which periodically writes some data to opened request stream. In fact, physically every request causes ASP.NET to create corresponding response stream context.Response . That means common request-response, as we know it, is anyhow a stream in its deep nature. What I did in the code bellow, is async processing of the request:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;
using System.Web;

namespace Daenet.WebApiSync
{
    /// <summary>
    /// Summary description for MyStreamHandler
    /// </summary>
    public class MyStreamHandler : HttpTaskAsyncHandler
    {
        #region IHttpHandler Members

        public override async Task ProcessRequestAsync(HttpContext context)
        {
            context.ThreadAbortOnTimeout = false;

            await doJobAsync(context);

        }

        private Task doJobAsync(HttpContext context)
        {
            Task t = new Task(() =>
            {
                for (int n = 0; n < 100; n++)
                {
                    context.Response.Write(String.Format("Sequence: {0} <br/>", n));
                    context.Response.Flush();
                    Thread.Sleep(500);
                }
            });

            t.Start();

            return t;
        }

        #endregion
    }
}

When the browser or any other client sends the request to the ASHX handler we immediately returns in async manner and frees the request thread. In that moment, the browser (any client) starts reading of streamed data, which is generated in doJobAsync. Note that data will not be streamed if Flush() is not called.
To test this code, open some browser and type the URL of the MyStreamHandler.ASHX:

Open the fiddler and notice the request remains open for a long time. Unfortunately ASP.NET will abort request after some time if it doesn’t complete. Usually all request are processed synchronously in more or less short time and no any developer runs into this problem. However when working with async pattern you possible process longer running jobs. In that case following line of code is required:

context.ThreadAbortOnTimeout = false;

This prevents ASP.NET pipeline to abort request which are not completed Without this line, this scenario will only work as long the request thread is not aborted.
The result in browser would look like shown at pictures below. As you see browser continually receives more and more data.

Working with Fiddler and Proxies

If you work with fiddler, pleas also notice following:

If the streaming is not enabled in Fiddler (default is OFF) the client will receive all data at once after the data are streamed into the response stream. Btw. if you work with SignalR and Fiddler you will also have to enable streaming. If you don’t do that, the SignalR will switch to the polling transport.

Console Client Application

To demonstrate the same within another HTTP client, I decided to build Console Application. Following peace of code shows the client which receives stream of data.

WebClient client = new WebClient();

Stream str = client.OpenRead(new Uri("http://localhost:3261/mystreamhandler.ashx"));

byte[] buff = new byte[100];

while (true)

{

var task = str.ReadAsync(buff, 0, buff.Length);

task.Wait();

int readBytes = task.Result;

traceout(buff, readBytes);

}

The result of console application shows how the application is receiving the data over longer period of time:

IIS Service Bus Bridge

Damir Dobric — Sat, 23 Jun 2012 09:49:26 GMT

On of upcoming interesting new features related to Service Bus is support for relaying of anything hosted in IIS. Today we are able to build SOAP and REST services which can be relayed with Service Bus. However this is limited to services only. Another option to relay the TCP traffic is “anycast” feature which is not easy to configure and it is in general not well known. Soon, it will be possible to install the IIS Service Bus bridge (see pictures below) which relays the IIS application.

This means, you can host any kind of web application (not only WCF services as now) even on your laptop and access it via publicly available URL listened at the service bus endpoint. Just imagine applications running on the private IP address and accessible publicly in internet without of doing anything on firewall and infrastructure.

More about that: http://channel9.msdn.com/Events/TechEd/NorthAmerica/2012/AZR308

University of Applied Sciences in Frankfurt: - Agenda for 18.June 2012

Damir Dobric — Sat, 16 Jun 2012 18:04:28 GMT

DataCacheFactory dcf = new DataCacheFactory();

DataCache cache= dcf.GetCache(cCacheName);

List<DataCacheTag> tags = new List<DataCacheTag>();

            tags.Add(new DataCacheTag("key1"));
            tags.Add(new DataCacheTag("key2"));
            tags.Add(new DataCacheTag("key3"));

bool isCreated = ucdCache.CreateRegion("RegionName");

IEnumerable<KeyValuePair<string, object>> items;

items = cache.GetObjectsByTag(new DataCacheTag("nosuchtag"), "RegionName");

            items = cache.GetObjectsByTag(tags.First(), "RegionName");
            if (items.Count() > 0)
                cache.ClearRegion("RegionName");

            DataCacheItemVersion ver2 = cache.Add("Tagged", 123, tags, "Company2Customer2");

            cache.Add("Tagged1", 123, tags, "RegionName");
            cache.Put("Tagged1", 123, tags, "RegionName");
            cache.Add("Tagged2", 456, new List<DataCacheTag>() { tags.First() }, "RegionName");
            cache.Add("Tagged3", 789, new List<DataCacheTag>() { tags.Last() }, "RegionName");

cache.GetObjectsByTag(tags.First(), "RegionName").ForEach(i => Console.WriteLine(i));

NOTE: array.ForEach() is provided by daenet.system.dll. It is not contained in .NET framework!

Download Presentation: http://developers.de/media/p/317742.aspx

Next Session: https://maps.google.com/maps?q=Microsoft+Bad+Homburg,+Siemensstra%C3%9Fe,+Bad+Homburg,+Deutschland&hl=en&ie=UTF8&ll=50.216637,8.615749&spn=0.006824,0.012553&sll=49.593567,7.75526&sspn=0.884833,1.60675&oq=microsoft+bad+homburg+siemens&t=h&hq=Microsoft&hnear=Siemensstra%C3%9Fe,+Bad+Homburg+61352+Bad+Homburg,+Hessen,+Germany&z=16

Microsoft GmbH

Siemensstraße 27

61352 Bad Homburg vor der Höhe, Germany

Get directions‎

06172 661-0

AspNet WebApi Session Content

Damir Dobric — Wed, 04 Apr 2012 14:40:54 GMT

Thanks to all attendees. WebApi session content from Microsoft Network 2012.

https://skydrive.live.com/?cid=8b11bbbf3f0ed903#cid=8B11BBBF3F0ED903&id=8B11BBBF3F0ED903%211098

Note that we didn’t upload samples related to extensibility features.

Proxy generated by SignalR on the fly

Damir Dobric — Sat, 17 Mar 2012 18:12:05 GMT

When the JavaScript renders script tag which includes/imports signal/rhubs the JavaScript proxy file will be generated. Commonly the JavaScript will include this virtual (none existing) script with following line:

SignalR will receive this request and will generate the proxy classe which can be used to access hubs in the MVC manner. To make this working SignalR will generate following JavaScrip proxy on the request: http://localhost/VirtualFolder/signalr/hubs

(function ($, window) {
/// <param name="$" type="jQuery" />
"use strict";

    if (typeof ($.signalR) !== "function") {
        throw "SignalR: SignalR is not loaded. Please ensure jquery.signalR.js is referenced before ~/signalr/hubs.";
    }

    var hubs = {},
        signalR = $.signalR,
        callbackId = 0,
        callbacks = {};

    // Array.prototype.map
    if (!Array.prototype.hasOwnProperty("map")) {
        Array.prototype.map = function (fun, thisp) {
            var arr = this,
                i,
                length = arr.length,
                result = [];
            for (i = 0; i < length; i += 1) {
                if (arr.hasOwnProperty(i)) {
                    result = fun.call(thisp, arr, i, arr);
                }
            }
            return result;
        };
    }

    function executeCallback(hubName, fn, args, state) {
        var hub = hubs[hubName],
            hubMethod;

if (hub) {
signalR.hub.processState(hubName, hub.obj, state);

            if (hub[fn]) {
                hubMethod = hub.obj[fn];
                if (hubMethod) {
                    hubMethod.apply(hub.obj, args);
                }
            }
        }
    }

    function updateClientMembers(instance) {
        var newHubs = {},
            obj,
            hubName = "",
            newHub,
            memberValue,
            key,
            memberKey;

for (key in instance) {
if (instance.hasOwnProperty(key)) {

obj = instance[key];

                if ($.type(obj) !== "object" ||
                        $.inArray(key, ["prototype", "constructor", "fn", "hub", "transports"]) >= 0) {
                    continue;
                }

newHub = null;
hubName = obj._.hubName;

                for (memberKey in obj) {
                    if (obj.hasOwnProperty(memberKey)) {
                        memberValue = obj[memberKey];

                        if (memberKey === "_" ||
                                $.type(memberValue) !== "function" ||
                                $.inArray(memberKey, obj._.ignoreMembers) >= 0) {
                            continue;
                        }

if (!newHub) {
newHub = { obj: obj };

newHubs[hubName] = newHub;
}

                        newHub[memberKey] = memberValue;
                    }
                }
            }
        }

        hubs = {};
        $.extend(hubs, newHubs);
    }

    function getArgValue(a) {
        return $.isFunction(a)
            ? null
            : ($.type(a) === "undefined"
                ? null
                : a);
    }

return newObj;
}

    function serverCall(hub, methodName, args) {
        var callback = args[args.length - 1], // last argument
            methodArgs = $.type(callback) === "function"
                ? args.slice(0, -1) // all but last
                : args,
            argValues = methodArgs.map(getArgValue),
            data = { hub: hub._.hubName, action: methodName, data: argValues, state: copy(hub, ["_"]), id: callbackId },
            d = $.Deferred(),
            cb = function (result) {
                signalR.hub.processState(hub._.hubName, hub, result.State);

                if (result.Error) {
                    if (result.StackTrace) {
                        signalR.hub.log(result.Error + "\n" + result.StackTrace);
                    }
                    d.rejectWith(hub, [result.Error]);
                } else {
                    if ($.type(callback) === "function") {
                        callback.call(hub, result.Result);
                    }
                    d.resolveWith(hub, [result.Result]);
                }
            };

        callbacks[callbackId.toString()] = { scope: hub, callback: cb };
        callbackId += 1;
        hub._.connection().send(window.JSON.stringify(data));
        return d;
    }

    // Create hub signalR instance
$.extend(signalR, {
        myHub: {
            _: {
                hubName: 'Daenet.SignalR.MyHub',
                ignoreMembers: ['doWork', 'namespace', 'ignoreMembers', 'callbacks'],
                connection: function () { return signalR.hub; }
            },

            doWork: function (message, callback) {
                return serverCall(this, "DoWork", $.makeArray(arguments));
            }
        }
    });

    signalR.hub = signalR("/Daenet.SignalR/signalr")
        .starting(function () {
            updateClientMembers(signalR);
        })
        .sending(function () {
            var localHubs = [];

$.each(hubs, function (key) {
var methods = [];

                $.each(this, function (key) {
                    if (key === "obj") {
                        return true;
                    }

methods.push(key);
});

localHubs.push({ name: key, methods: methods });
});

            this.data = window.JSON.stringify(localHubs);
        })
        .received(function (result) {
            var callbackId, cb;
            if (result) {
                if (!result.Id) {
                    executeCallback(result.Hub, result.Method, result.Args, result.State);
                } else {
                    callbackId = result.Id.toString();
                    cb = callbacks[callbackId];
                    if (cb) {
                        callbacks[callbackId] = null;
                        delete callbacks[callbackId];
                        cb.callback.call(cb.scope, result);
                    }
                }
            }
        });

    signalR.hub.processState = function (hubName, left, right) {
        $.extend(left, right);
    };

} (window.jQuery, window));
0

The proxy shown above has been generated for following hub class:

public class MyHub : Hub

{

public void DoWork(string message)

{

Clients.addMessage(message);

}

The JavaScript code which access the hub looks in this case like:

var myHub = $.connection.myHub;

More about hubs an GitHub: https://github.com/SignalR/SignalR/wiki/QuickStart-Hubs,
https://github.com/SignalR/SignalR/wiki/SignalR-Client-Hubs

How to perform OAuth with Java Script?

Damir Dobric — Sat, 10 Mar 2012 23:24:03 GMT

OAuth is in the moment possibly the most standard way to authenticate user in the world of REST, WEB and mobile devices. In this post I will show how to implement WRAP 0.9 authentication by using Windows Azure Access Control Service. Following Java Script function prepares and posts the request as expected by Access Control Service and retrieves the Simple Web Token.

        CreateToken = function (userName, pwd, scope) {

            if (m_IsInitialized == null || m_IsInitialized == false)
                throw "SecurityTokenClient.Initialize(config) has to be called.";

            var data = "wrap_name=" + userName + "&wrap_password=" + pwd + "&wrap_scope=" + scope;

            $.support.cors = true; // force cross-site scripting (as of jQuery 1.5)

            $.ajax({
                type: 'POST',
                url: “https://yournamespace.accesscontrol.windows.net/WRAPv0.9/”,
                context: "ctx",
                data: data,
                success: function (result) {
                    alert(“Hello token:” + result);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus + “ – “ + errorThrown);
                }
            });
        }

Note that this function will fail in an ASP.NET application, because of browser cross-scripting limitation. Fortunately all mobile devices will allow execution if following line is executed:

$.support.cors = true;

I have encapsulated all of this in a Java Script module called SecurityTokenClient and tested it in the Windows Metro Style application. By using this module the authentication would look like shown in next METRO-example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Application1</title>
    
    <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
    <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
    
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/default.js"></script>
    <script src="/js/jquery-1.6.3.js" type="text/javascript"></script>
    <script src="/js/knockout-2.0.0.js" type='text/javascript'></script>
    <script src="/js/jquery.fixedheadertable.min.js" type="text/javascript"></script>
    <script src="/js/query.model.js" type="text/javascript"></script>
    <script src="/js/query.presenter.js" type="text/javascript"></script>
    <script src="/js/sts.js" type="text/javascript"></script>
</head>
<body>

        <h3>Welcome to Windows Metro OAuth sample.</h3>
        <br/><br/>
        <button id="btn" type="button" >Click to get token.</button>
        <br/><br/>
        <div id="token">

        </div>
    <script type="text/javascript">

        //
        // This function will be called when service query operation has completed.
        var onQueryCompleted = function (error) {
            if (error != null)
                alert(error);

            model = QueryPresenter.ViewModel();
        }

        //
        // This function will be after authentication has comleted successfully.
        var onAuthenticationCompleted = function (swt) {

            $("#token").html(swt);
        }

        //
        // This function will be invoked when credentials have to be provided or
        // if the authentication has failed.
        var onAuthenticationError = function (err) {

            if (err == "User not authenticated!") {
                QueryPresenter.LogOn("user1", "123abc");
                $("#token").html("Authenticating user1...");
            } else {
                $("#token").html(err);
            }
        }

        $(document).ready(function () {

            $("#btn").click(function () {
                SecurityTokenClient.Initialize(
                   {
                       OnAuthenticationError: onAuthenticationError,
                       OnAuthenticationCompleted: onAuthenticationCompleted,
                       StsUrl: “https://yournamespace.accesscontrol.windows.net/WRAPv0.9/”,
                   });

                SecurityTokenClient.CreateToken("user1", "123abc", "http%3a%2f%2flocalhost%2fServiceApp");
            });

        });
    </script>
</body>
</html>

In fact the whole authentication by using this module would look simplified like:

            $("#btn").click(function () {
                SecurityTokenClient.Initialize(
                   {
                       OnAuthenticationError: onAuthenticationError,
                       OnAuthenticationCompleted: onAuthenticationCompleted,
                       StsUrl: “https://yournamespace.accesscontrol.windows.net/WRAPv0.9/”,

                  });

                SecurityTokenClient.CreateToken("user1", "123abc", "http%3a%2f%2flocalhost%2fServiceApp");
            });

As you see, the module needs to be initialized and CreateToken has to be called. All other code shown in the example above is a bit sugar around UI. And here is the full module implementation:

/*
    Copyright daenet GmbH

*/

//
// Provides the functionality for OAuth authentication.
SecurityTokenClient = (function () {

    var m_QuaGGbdg;

    //
    // The URL of the Security Token Service.
    var m_StsUrl;

    //
    // Callback invoked if authentication has failed.
    var onAuthenticationError;

    //
    // Callback invoked if authentication has been successfully completed.
    var onAuthenticationCompleted;

    var m_IsInitialized;

    return {

        //
        // Gets the token.
        GetToken: function () {
            return m_QuaGGbdg;
        },

        //
        // True if the SWT token exists.
        isAuthenticated: function () {

            if (m_QuaGGbdg != null) {
                return true;
            }
            else {
                return false;
            }
        },

        //
        // If the client is not authenticated it invokes onAuthenticationError
        // and returns FALSE.
        // If the client is authenticated it returns TRUE.
        EnsureAuthenticated: function () {

            if (this.isAuthenticated() == false) {
                onAuthenticationError("User not authenticated!");
            }
        },

        //
        // Initialize the client for communication with STS.
        Initialize: function (config) {

            if (config != null) {
                if (config.OnAuthenticationError == null)
                    throw "onAuthenticationError handler has to be registered!";

                if (config.OnAuthenticationCompleted == null)
                    throw "onAuthenticationCompleted handler has to be registered!";

                if (config.StsUrl == null)
                    throw "StsUrl config parameter has to be set!";

                onAuthenticationError = config.OnAuthenticationError;

                onAuthenticationCompleted = config.OnAuthenticationCompleted;

                m_StsUrl = config.StsUrl;

                m_IsInitialized = true;
            }
            else
                throw "Configuration parameters have not been specified.";

        },

        //
        // Performs the OAuth authentication.
        // userName: The user ot be authenticated.
        // pwd: The user's password.
        // scope: Trusted audience (realm).
        CreateToken: function (userName, pwd, scope) {

            if (m_IsInitialized == null || m_IsInitialized == false)
                throw "SecurityTokenClient.Initialize(config) has to be called.";

            var data = "wrap_name=" + userName + "&wrap_password=" + pwd + "&wrap_scope=" + scope;

            $.support.cors = true; // force cross-site scripting (as of jQuery 1.5)

            $.ajax({
                type: 'POST',
                url: m_StsUrl,
                context: "ctx",
                data: data,
                success: function (result) {
                    m_QuaGGbdg = result;
                    onAuthenticationCompleted(result);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    onAuthenticationError(textStatus, errorThrown);
                }
            });
        }
    }
})();