Service Layer

Chatting with SignalR

 

I haven’t messed around much with SignalR yet – but it’s going to become an important part of my toolbox whenever it comes to asynchronous surfacing of data. This isn’t a fit for every application – often near-time is fine – but for instant, up to date numbers – think a stock screen or a chat application – it’s TERRIFIC. Let’s do a simple demo and see how it works:

First open up Visual Studio 2013 and create a web application:

And make sure it’s an MVC app:

At the Package Manager Console, enter “install Microsoft.aspnet.signalr” – yes this could be done in NuGet as well:

NuGet Route:

Search for SignalR and install Microsoft ASP.NET SignalR (installing this will install Core Components, Javascript, and System.web pieces).

You’ll see a readme file (after it downloads its dependent assemblies) like the following. Love that explicit messaging!

Add those lines above to a class called Startup.cs in the root folder – if you installed this it should already be pre-created –so it has a Configuration method that looks like this:


public
void Configuration(IAppBuilder app)

{

app.MapSignalR();


//ConfigureAuth(app);

}

 

I’ve chosen to comment out configuration for the authentication, since we’re not going to do that for this demo. Then, create a new folder called “Hubs” and add a new SignalR Hub Class:

 

Replace the “Hello” method with the following for this simple chat application:


        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
            //ConfigureAuth(app);
        }

Above, the Clients.All is dynamically created – so it’s very customizable. We could put the Clients into groups, or exclude a set (Admins, for example).

Try building your project, and point to SignalR/hubs. Notice the following when I navigate to {localhost}/SignalR/hubs:

 

Notice in the footer area your shiny new method with a Send. If you had built this earlier, you’d be seeing a Hello function visible to clients:

 

Let’s use Knockout for the fancy-dancy data binding. Use NuGet to pull down the latest version of KnockoutJS. Then, create a javascript class under Scripts and fill it with the following code:

 

(function () {

 


var chatHub = $.connection.chatHub;

$.connection.hub.logging = true;

$.connection.hub.start();

 

chatHub.client.newMessage = function (message) {

model.addMessage(message);

};

 

 


var Model = function () {


var self = this;

self.message = ko.observable(“”),

self.messages = ko.observableArray()

self.counters = ko.observableArray()

};

 

Model.prototype = {

 

sendMessage: function () {


var self = this;

chatHub.server.send(self.message());

self.message(“”);

},

 

addMessage: function (message) {


var self = this;

self.messages.push(message);

}

 

};

 


var model = new Model();

 

$(function () {

ko.applyBindings(model);

});

 

}());

Now to add a client to allow the creation of messages. You could add the following to an empty view using MVC, or embed this in a user control – or use Bootstrap’s modal to have it as a popup.

 

 

<script
src=”../Scripts/jquery.signalR-2.0.3.js”></script>

<script
src=”../SignalR/hubs”></script>

<script
src=”../Scripts/knockout-3.1.0.js”></script>

<script
src=”../Scripts/chatSurf.js”></script>

<div
class=”row”>

 


<div
class=”col-md-4″>

Comments:


<input
type=”text”
placeholder=”Message”
data-bind=”value: message
/>


<button
class=”btn btn-primary”
data-bind=”click: sendMessage“>Send</button>


</div>


<div
class=”col-md-8″>


<div
data-bind=”foreach: messages“>


<div
data-bind=”text: $data“></div>


</div>


</div>

</div>

 

That’s enough for our demo purposes. I dragged the user control onto another form and build the project – let’s see what we get:

You’ll notice, there’s no identity for the current user – that’s something I need to add to my application (since currently users are not authenticated). That’s for a future iteration. Also, next up – I want to make that a scrollable DIV showing the most recent 5 posts, have Knockout save its records to a database, and allow the flagging of particular messages as Critical (with specific coloring).

However, it was an instructive walkthrough for me of what SignalR can do. For real-time streaming of information – such as facility alerts that you want broadcast to a set of subscriber clients – it’s REALLY hard to beat.

Some Footnotes

  • Note that Scott Hanselman did a neater example using just a handful of lines of code in this post. Some of the coding is a little dated but it does show a chat app in <12 lines of code:

 

 

 

 

 

 

 

Advertisements

WebAPI – the new WCF data services. And KnockoutJs/MVVM explorations.

Here’s a link to the TryOutMVVM project. Enjoy!

There’s a ton of links at the bottom of the page, but in terms of best explanation/clearest walkthrough it’s hard to beat this one as a template. Skip past all the Azure propaganda – about halfway down is where the good stuff is at.

WebAPI is super cool and allows us to do things that the “old” WCF data services only dreamed of – such as returning nested (hierarchical) tables, etc. These days I find it difficult for us to justify building a data layer on anything else. The thrill of being set free from procedural logic/sprocs, I can’t even express!

Here’s a sample return from a WebAPI. (JSON could be set up just as easily.) What’s involved in getting this set up? And can we mess around with linking it up to a web frontend and, I don’t know, sprinkle on some KnockoutJS for asynchronous goodness?

Let’s start with a few words on MVVM versus MVC

In terms of design MVVM is a logical extension of MVC. Model-View-Controller works off abstraction, where the model layer is unaware – completely uncoupled – of the view layer. In MVC, the Controller does all the work for this – and is responsible for determining which View is displayed in response to any action including when the application loads.

MVVM in contrast uses the ViewModel layer as a concept. It includes three key parts:

  1. Model (Business rule, data access, model classes)
  2. View (User interface)
  3. ViewModel (Agent between view and model)

Here the ViewModel acts as an interface and …

  • provides data binding between View and model data.
  • handles all UI actions by using commands.

In MVVM, the ViewModel does not need a reference to a view. The view binds its control value to properties on a ViewModel, which, in turn, exposes data contained in model objects.

Let’s walk through what it will take to implement a one-table MVVM app:

  1. Create a new MVC project, and enable both Webforms, MVC and Web API. Call it “ContactManager”.
  2. Modify _Layout.cshtml with contents (see zip file)
  3. Add a Contacts.cs class in Models folder, and Ctrl-F5 to build. EF uses reflection so these periodic builds will be necessary.
  4. Add a controller. Select MVC Controller with R/W actions Using EF. Call it HomeController; use the Contact model class, and select a <New data context>.
  5. In the Tools menu, open up Package Manager Console. At the prompt enter:
    1. enable-migrations (since we have multiple contexts, enablemigrations -ContextTypeName
      ContactManagerContext)

    2. add-migration-initial
  6. Open up Migrations\configuration.cs, and add the code in the zip file. (this fills in the seed method to populate the database)
  7. Back to Package Manager Console, enter: update-database
  8. Build.
  9. Replace index.cshtml
  10. Add a Contacts.css style sheet to the Content folder.
  11. Add a line to the App_Start\Bundle.config to register knockout.
    1. bundles.Add(new ScriptBundle(“~/bundles/knockout”).Include(“~/Scripts/knockout-{version}.js”));
    2. bundles.Add(new ScriptBundle(“~/bundles/knockout”).Include(“~/Scripts/knockout-{version}.js”));
  12. Add a Web API Controller with R/W actions Using EF. Call it ContactsController. Select Contact for the model, ContactManager context.
  13. Now build it, Ctrl-F5. Check out the new Home controller, at {yourappurl}/api/Contact.

That’s just a quick overview. In more detail, let’s go thru this step by step:

  1. In Visual Studio, create a new Web Application. Call it “TryOutMVVM”, and enable MVC, Webforms and WebAPI in the setup (ignore the test project, we won’t use it here.)
  2. Modify _Layout.cshtml with contents (see zip file)
  3. Add a TryOut.cs class in Models folder, and Ctrl-F5 to build. EF uses reflection so these periodic builds will be necessary.

    See above. This represents a single entity – a ID field, a product and location link (which in an actual application would probably be a related table with a foreign key), and some information about this try out. In this case, this represents a Line Try Out – an engineering change to a production line, including what part numbers are impacted, the person making the change and the description, the location and product it links to, and an identifying #.

  4. Add a controller. Select MVC Controller with R/W actions Using EF. Call it HomeController; use the Contact model class, and select a <New data context>. Note, I got stuck on this a few times and couldn’t figure out what I was doing wrong – the code built, but I was looking at a blank response in Fiddler. Turns out I was selecting the wrong type of controller (kind of like Homer Simpson adjusting Marge’s camera with a drill and hammer. And, my mind just got distracted and a quick youtube search of that episode reminds me of how awesome that show really was back in the day. Ah, sorry, back to reality…) Anyway, and I can’t stress this enough, make sure you select the RIGHT kind of controller for this and the following steps!!! If you get an error message here it’s usually because you haven’t built the project yet (see #3 above) – Ctrl-F5 and THEN add the controller silly! I also usually delete the HomeController first, but go ahead and overwrite if you forget.

  5. In the Tools menu, open up Package Manager Console. At the prompt enter:
    1. enable-migrations (since we have multiple contexts, enablemigrations -ContextTypeName
      ContactManagerContext)

    2. add-migration-initial
  6. Open up Migrations\configuration.cs, and add the code in the zip file. (this fills in the seed method to populate the database)
  7. Back to Package Manager Console, enter: update-database
    1. Here’s a sample of what it will look like in PMC. Check out the Migrations folder for a sample of what will be created:

      And, as long as we’re here, check out Views\Home\Index.cshtml file. Notice all the work that EF handled for us in scaffolding actions:

  8. Build, Ctrl-F5. OHMYGAWDDIDTHISJUSTHAPPEN?!!!?!!

  1. Replace index.cshtml with what’s in the ZIP file.
    1. Some comments. Notice this is plain and simple HTML5/CSS3. Very clean, really, for all it does. In a future version you’d want to move all those javascript functions out to a separate .js script. But this does work:

  1. Add a TryOut.css style sheet to the Content folder, and fill it with the styles in the ZIP. Again, nothing fancy here.
  2. Right click on the project and select Manage NuGet Packages. Search online and add a reference to knockoutjs. Now, look at the Scripts folder and see which version NuGet dropped in there – mine is 3.0.0. Make a note of this, you’ll need it for the next step.
  3. Open up App_Start\Bundle.config.cs and add the following lines:

    bundles.Add(new StyleBundle(“~/Content/css”).Include(

    “~/Content/bootstrap.css”,

    “~/Content/tryout.css”,

    “~/Content/site.css”));

    bundles.Add(new ScriptBundle(“~/bundles/knockout”).Include(

    “~/Scripts/knockout-3.0.0.js”));

  4. We’re actually almost there, can you believe it! Let’s add a service layer using WebAPI. Right click on Controllers and add a Web API Controller with R/W actions Using EF. Call it TryOutController. Select TryOut for the model, TryOutMVVMManager context.

    note, there’s no Views created for this – since its web aPI. All the API calls are right there in our TryOutController.cs method headers.

All that’s left is the building and the screaming. Let’s build it, Ctrl-F5.

Check out the new Home controller, at {yourappurl}/api/Contact.

Have some fun with it. Try

http://localhost:58149/api/Tryout

http://localhost:58149/api/Tryout/1

(where the port # obviously is your URL). Wow!

Notes and Links

I’m not done yet. I want to do some more research about the Repository pattern and how to do Web API the RIGHT way. I think I need to spend more time thinking about the design pattern and get out of the database-first box.

Next, for the frontend, I want to start thinking about KnockoutJS and the MVVM model:

f

The single best example – used as a base for this posting: https://www.windowsazure.com/en-us/develop/net/tutorials/rest-service-using-web-api/#bkmk_createmvc4app

A long post based on a single example, with CRUD operations. I like this ahead of the ones below, for ease of use. http://www.asp.net/web-api/overview/creating-web-apis/creating-a-web-api-that-supports-crud-operations

A good walkthrough to get started: http://www.asp.net/mvc/tutorials/getting-started-with-ef-using-mvc/creating-an-entity-framework-data-model-for-an-asp-net-mvc-application – a student-enrollment-course many to many type relationship sample.

http://www.asp.net/web-api/overview/creating-web-apis/using-web-api-with-entity-framework/using-web-api-with-entity-framework,-part-1 – this is by Mike Wasson, who created the excellent Movies web api sample. This is more of a master/detail page view creation. It’s excellent because it also goes through KnockoutJS, and has a section on using Web API with webforms.

I need to add user authentication and roles – this article contains some great info on hooking up users/roles.

Jason Zander’s blog post – has a nice walkthrough on the Web API: http://blogs.msdn.com/b/jasonz/archive/2012/07/23/my-favorite-features-entity-framework-code-first-and-asp-net-web-api.aspx

Best example I’ve seen yet on Web API – including the otherwise excellent MVC book by Apress – is this post: http://www.dotnetglobe.com/2012/03/crud-operation-using-aspnet-web-api-in.html

See the MSDN article here on Single Page Applications and MVC vs MVVM.

Another article on Web API and how it could be used vs WCF Data Services – http://msdn.microsoft.com/en-us/magazine/dn201742.aspx


Noodling around with Entity Framework.

Entity Framework is the default way that Microsoft wants us to be noodling around with data. And it’s easy to see why – this is MSFT’s answer to the challenge posed by Ruby, well over ten years ago. EF gets better with every version.

 

 

From the Getting Started documentation, it should just be a simple matter of

  1. Add a new diagram – and make sure for delete (for example) all changes are set to cascade.
  2. Add a new web form + master page.
  3. Add an Entity Data Source. In design view, configure it to point to your Entities data source you created in step #1.
  4. Add a new GridView. Select your entity data source. Select Enable Paging…. down to Enable Delete. Delete the ID fields.
  5. Set the Dates template, etc on any custom fields.
  6. Set up the ContextTypeName attribute to enable lazy loading.

However, I’m getting a “The provider did not return a ProviderManifest instance” error message. This usually indicates an issue with the connection string. I’ve tried switching to Integrated Security, changing the username/pwd – no dice. I honestly think this is a bug with EF6, since I’m using the most recent version of Entity Framework and I can’t recall seeing this issue in EF5.

Since the forms use sprocs by and large, and we are using webforms, I’m OK with – for now – going old-school and using sprocs not EF for my data connections. For our new app though I am going to revisit this and use either Linq-to-SQL or preferably that nifty BackboneJS/KnockoutJS + MVC stack and a webapi data layer.