My understanding of OWIN & Katana

I have been trying to learn these concepts from a long time. Read many good articles, their definitions, but could not make much out of them. Finally, I decided to write my understanding that I have got from these resources. So in this article, I will share my learning about what are O.W.I.N. and Katana and will also try to get into some basic details that makes them important concept to be learnt. So let's start with their basic definitions first.

What is O.W.I.N. ?

O.W.I.N. stands for Open Web Interface for .Net. Note that this is just a specification and not any technology or framework. It's official definition is quite simple and easy to understand. It says:

OWIN defines a standard interface between .NET web servers and web applications. The goal of the OWIN interface is to decouple server and application, encourage the development of simple modules for .NET web development, and, by being an open standard, stimulate the open source ecosystem of .NET web development tools.

Let's try to understand what this definition is trying to convey here. Till now the developers mainly focused on decoupled application code by creating different layers in the applications, which interact with the use of interfaces, use design patterns, S.O.L.I.D. principles etc. But O.W.I.N. is a step above the code decoupling. It is aimed at decoupling the application and the web-server, that hosts the application. Using such kind of decoupled architecture allows:

1. Creating middleware components which can be replace/added in the application without affecting the other components in the application
2. Remove the dependency of web server to host a component, by promoting the use of self-hosting.

We will discuss about these points, later in the discussion.

What is Katana ?

Next the question comes what is Katana and how it is related to the OWIN ? The answer is that if OWIN is a specification (and not any technology or framework), than Katana is an open source project by Microsoft based on the OWIN. One such example is the asp.net webapi, based on the OWIN specifications, supports the concept of self-hosting for hosting, by using the OWIN custom hosts(we will see the custom host concept in further discussion) and eliminating the dependency on IIS for hosting.

So to conclude this part of the discussion, OWIN is a specification and Katana is Microsoft's open source project which uses these specifications.

So moving on, let's discuss in details about OWIN. But before that, a very important point to be mentioned, which will make further understanding easier. For this, I would like to quote a very good explanation about what OWIN is, from the link here. It says:

OWIN introduction allowed any OWIN-compatible application to talk through OWIN to a web server that had an OWIN-compatible hosting layer. Microsoft wrote Katana as one OWIN implementation that could host ASP.NET Web API, ASP.NET SignalR, and many 3rd party frameworks on top of several servers, including IIS (and IIS Express), Katana's self-host server, and custom hosts (i.e. run Katana's host in a custom app).

This means that Microsoft's Katana project allows the use of the OWIN specifications by providing not only new servers like Katana's self host server, custom host server (like any windows service or console application) but also with existing web servers like IIS & IIS express. 

In any normal asp.net application architecture, we have different layers categorized as host, server and the main application. In such a case, IIS acts as the server as well as the host. But in case of any OWIN based structure, we can have 4 different layers. Three of these layers are web server, OWIN compatible applications like SignalR and Webapi and OWIN compatible hosting layer. The 4th one is our main application which could be any application based on web-forms or mvc framework. So the structure defined above is layered as:

Let's discuss these layers in detail now.

The Host layer: In any OWIN specifications based application, this layer can consist of either of the following 3 acting as the host:

§  IIS : This includes the use of IIS as the host for any application. In such as case, Microsoft.Owin.Host.SystemWeb is to be used as the Server. This will allow to add any OWIN compatible component or middleware to be easily added/remove from the pipeline.

§  Custom Host: This involves creating a windows service or a console application and using it to host your OWIN compatible applications like SignalR or Webapi. An example is self-hosting the webapi in a Console or windows application. See an example here. 

§  OwinHost.exe: This is an executable file named OWIN.exe. It can be directly run and used as a host for any application.

The Server Layer: Next we have the server layer, which will listen to any incoming requests and manage the requests in pipeline. This layer can be based on:

§  Microsoft.Owin.Host.SystemWeb: System.Web is used when we are using IIS as the host. In that case, IIS also acts as the server. So in order to easily plug the  OWIN components in the pipeline, we can use this server layer. A definition from one of the reference links defines its role as:

The Katana SystemWeb host registers an ASP.NET HttpModule and HttpHandler to intercept requests as they flow through the HTTP pipeline and send them through the user-specified OWIN pipeline.

§  Microsoft.Owin.Host.HttpListener: This involves the use of .Net frameworks' HttpListener class to open a port and manage the request pipeline.

Using these two layers, suppose we add a new empty application project and try to create an application based on this structure. In this case we have two different options:

§  By using Microsoft.Owin.Host.SystemWeb as the server implementation, we make use of IIS as the host as well as the server.

§  By using Microsoft.Owin.Host.HttpListener  as the server implementation, we can use any custom host like windows or console application as the host or even the OWIN.exe executable as the host.

Middleware Components: These are the OWIN compatible components like SignalR and WebAPI and even static html pages. These are added to the system as plug and play components and can be easily added/removed without affecting the other modules. When the server receives any request from the client, it is passed through these components.

Applications: This could be any of your ASP.Net, mvc or any other applications.

Now let's try to create a sample using the above concepts. So we will use

1. Custom host in the form of a Console application.
2. Microsoft.Owin.Host.HttpListener for the server implementation. 
3. WebAPI and an HTML page as the middleware components in the system. An option could have been using any mvc or asp.net page as separate application in place of the html page. Then it would have acted as the 4th layer of the system i.e. Main Application. Another important point is, using any asp.net or mvc would not have been a good option as this would than not be hosted through custom host or used the Microsoft.Owin.Host.HttpListener server implementation. This is the reason i have highlighted it to be used as a separate application.

Start by adding a new console application. This will  be the first layer or the custom hosting the system, instead of IIS. Add the references to the Microsoft.Owin.Host.HttpListener by using the nuget package manager. This would then meet the requirement of a server implementation.  

So we have the host and server in place. Next, we need to add the middleware component webapi. So we add reference to the webapi2.2 OWIN package, using the nuget package manager and OWIN hosting libraries.

Next, we add another middleware component. This time, its libraries to add support for hosting html pages. Yes that's correct. We will host html pages in a console application. So let's see how we can do this.

Now we have all the required references in the project and just need to configure the components to be used. Before that, we add a webapi controller and an html page into a folder named Pages. So our complete solution structure will like the following:

So now let's configure these components one by one. First, add a simple method in webapi controller, which returns the current date-time string. This will be called from the html which we added above.

Next, we will register our middleware components i.e. webapi and the html file in the WebAPIConfig.cs. This will make the hosting of the webapi and the html file possible.  See the code below:


Next, let's start the server and host the application. For this, add the following code the Main function in Program.cs

Final step, add some html to the html page and call the webapi method to get the date from the server.


All done. Now start the console application and you can than browse the html page on the same url, as that of web api. Click the button and your request will be sent to the webapi.

 

So now you can host the html page in the console application as well. Further if you tomorrow if you need to add the SignalR functionality, simply add the references and configure it in the WebAPIConfig.cs file like we did for the webapi and the static files.

Further, if we need to provide the service api to any third party, simply host that in the console application or windows service. No dependency on the IIS.

Following are some of the reference links you may find useful:

1. Basic concept of Host, servers and middleware 
2. Use IIS as host and SystemWeb as the server for OWIN implementation 
3. http://stackoverflow.com/questions/25431750/asp-net-vnext-is-host-agnostic-what-does-it-deeply-mean
4. Step by step configuring components in OWIN pipeline.

Hope you will find this article helpful and enjoyed reading it. This is a new concept to be learnt. So i would love to hear about your feedback/additions to this concept. Source code for this article is also attached here. Happy coding...!!!

CodeProject

Real time data update using SignalR

In my last article, we discussed about the concept of SignalR and how we can use it to create a simple web based group chat. It included a good deal of explanation of how SignalR works and why it is a good candidate to create a real time application. We will not get into details again and before you start with it, I would recommend you to read my previous article here. Our this discussion will be another practical implementation of what we had learnt in the last article.

Let's create another sample application to understand the use of SignalR. This application will be an html page, which displays some data from the database.  At the back-end of this sample, we will have another application, say any form, windows service or RSS feed, which will insert the new data into the database. As soon as the new data is added to the database, that will be reflected on this html page.

An important point before we start the discussion is that this example will not only use the SignalR, but also the concept of SqlDependency, so that our server hub get's notified about any change in the database and broadcast the latest data to the users. To describe the logic briefly, our hub will subscribe to SqlServer for any change in its data in the database, get notified, fetch the latest data and broadcast it to the html page. So our application will consist of following 3 separate components.

§  Sample table called Users in a Sql database, with its ServiceBroker enabled.

§  An application with a html page to display the list of users from the database. This application will also include

1.  A webapi which receive data from a third application and save it into the database.
2. A SignalR component to broadcast the latest data to the users.

§  An application with an html page to submit new data to the database by making calls to the webapi.

So our overall application flow will be like the following:

Database setup: Create a new table named Users, in a sample database. In order to use the SqlDepedency, we need to enable the ServiceBroker for the database. This can be done by using the following command:

 ALTER DATABASE Database_Name SET ENABLE_BROKER

or, from the UI by selecting the database, right click on its properties, go to the Options, navigate to the Service Broker section and change the value to True for Broker Enabled property.

Create the main application: This application will consist of following components:

1. Webapi to receive the data from the data feed application and save into the database.
2. An html page to display the data from the database.
2. SignalR component which will refresh the html page with latest data, as soon as the new data is added to the database.

Let's create a Webapi which can receive the data from the user and store it in the database. For this, we add the references to the WebApi2 and OWIN packages, using the nuget package manager. Once the references are added, we add a new class file of type Web API Controller class. Let's call it DataFeedController.cs. Add a POST method to receive the data from the user and store it in the database, using the entity framework.So our controller would look like below:

Now in order to host the Webapi and SignalR, we add a file named Startup.cs and add the routing template for Webapi and register both the webapi and SignalR to the OWIN pipeline. When we start the application, it will result in hosting of the Webapi at the back-end.

Now in order to add the real-time functionality to the application we add a class named RealtimeDataHub.cs, derived from the Hub class and will be used as a middleware between the database and the html page (which is used to display the data). This class will have a method named GetUsers() which will get the data from the database and broadcast it to the connected users. Inside this method, the hub also subscribes to the sql for getting notifications for change in the database, using the OnDependency change event of the SqlDependency class. See the code below:

Create data feed application: Create a new  empty project and add an html page to it. This html page will have 3 textboxes and a button to store the data in the database, by calling the WebApi created in step 1 above. We will call it as data feeder application. In a real time scenario, we can have any windows service which is fetching data using some api and storing it in the database. So our html mark up will be like below:

Next, use the ajax call to send the data to the webapi controller, which stores it in the database.

Note that here we have used the localhost url to refer to the location where the web api is hosted. You can replace it with the actual url of the WebApi location.

So our setup is complete now. In order to start the application, first run the html page of the main application, which displays the data from the database. When this application is started, its corresponding web api also gets hosted. First time, there will be no data. So let's start the data feeder application also and add some data. Add the new data and Save it. As soon as the new data is added, it immediately gets reflected in the main applications home page. See below:

So now need to use timer based calls. Use the SignalR functionality and create real time applications. Hope you enjoyed reading it. Happy coding...!!!

CodeProject