Lab 10: Application Architecture Topics

Transcription

1 Lab 10: Application Architecture Topics The files associated with this lab are located in the following folders: ArchitectureLab ArchitectureLabCompleted MVC 4.0: Caching, Security, and Architecture 10-1

2 Lab 10 Overview In this lab you ll learn how to make use of SignalR for real-time communications and an HTTP handler to generate Web page content. To complete this lab, you ll need to work through two exercises: Use SignalR to Build a Chat Application Create a Weather HTTP Handler Each exercise includes an Objective section that describes the purpose of the exercise. You are encouraged to try to complete the exercise from the information given in the Objective section. If you require more information to complete the exercise, the Objective section is followed by detailed step-bystep instructions MVC 4.0: Caching, Security, and Architecture

3 Use SignalR to Build a Chat Application Objective Use SignalR to Build a Chat Application In this exercise, you ll build a simple chat application using SignalR and MVC 4. The application will let multiple users connect to the same URL, enter their name, and begin chatting. Things to Consider IMPORTANT! This lab assumes that you re using at least Update 2 to Visual Studio You can still use SignalR without this update, but the steps to create the hub will be different, so you ll need to figure those out on your own. It would be better to install Update 2, since it has a lot of nice new features in it for ASP.NET development. Step-by-Step Instructions 1. Start Visual Studio 2012 and create a new MVC 4 application using the Internet template and the Razor view engine. Save it to a convenient location and give it a meaningful name (we named our project ArchitectureLab). 2. Install SignalR in the project using the NuGet Package Manager Console. From the Visual Studio main menu, select Tools Library Package Manager Package Manager Console, which opens the console in a new docked window. 3. At the PM> prompt, type the following statement and press ENTER. The install process checks for dependencies, and installs those before installing SignalR. The console window will look like Figure 1 with several pages of results. The current version of the package opens a readme.txt file when it finishes. Scan this and then close the document. Install-Package Microsoft.AspNet.SignalR MVC 4.0: Caching, Security, and Architecture 10-3

4 Figure 1. Installing SignalR into the project. WARNING! You might see old references to installing a package called simply SignalR. That is an old, beta version of the library from before its tight integration with ASP.NET and MVC, and is deprecated. In fact, if you try to install it you ll get only a text file telling you this same information and which package to install. 4. In Solution Explorer, right-click the project name and select Add New Folder from the pop-up menu. Name the folder Hubs; this is where you ll add the code that provides a SignalR hub. (You ll only define a single hub, but making the name plural makes it consistent with other project folders. 5. Right-click the Hubs folder and select Add New Item from the pop-up menu. Select the Web templates in the left-side list and select the SignalR Hub Class template, as shown in Figure 2. Name the class ChatHub.cs and click the Add button to create the class and open it in a code editor. Notice that the resulting class has a using statement for the Microsoft.AspNet.SignalRMicrosoft.AspNet.SignalR namespace, which contains the server-side features to support real-time communications. It also creates the ChatHub class that derives from the SignalR Hub class MVC 4.0: Caching, Security, and Architecture

5 Use SignalR to Build a Chat Application Figure 2. Adding a SignalR Hub class to the project. 6. Delete the Hello method in the generated ChatHub class and insert the following Send method. The application will use this method to send a message from the named user to all clients currently connected to the chat. What s important here is that the code dynamically defines a SendMessage method that does the work. You ll see this again when you create the client-side code. public void Send(string name, string message) { Clients.All.SendMessage(name, message); } 7. In Solution Explorer, double-click the Global.asax item to open it in a code editor. Add the following method call to the very beginning of the Application_Start method. This code registers the default hubs route, ~/signalr, for use in the application. RouteTable.Routes.MapHubs(); MVC 4.0: Caching, Security, and Architecture 10-5

6 8. At this point, all the SignalR infrastructure is in place and it s time to work on the user interface. Open the Home controller code file and add the following Chat action method. All this code needs to do is display the Chat view. public ActionResult Chat() { return View(); } 9. Right-click anywhere within the Chat method and select Add View from the pop-up menu to open the Add View dialog box. Accept all the defaults as shown in Figure 3 and click Add to create the view. Figure 3. Creating the Chat view MVC 4.0: Caching, Security, and Architecture

7 Use SignalR to Build a Chat Application 10. In the new view, add the following HTML immediately after the <h2> element. There is a hidden username input element for the user s name, a text box where the user enters the new chat text, and a button that sends the message. That s all you need for the user interface. <div class="container"> <input type="hidden" id="username" /> <input type="text" id="message" /> <input type="button" id="sendmessage" value="send" /> <ul id="chats"></ul> </div> 11. Add the following scripts section code immediately below the HTML you just added. This code adds the SignalR library, the default SignalR route, and date.js, a handy library for formatting dates and times. By using the scripts section, MVC will put them in the right location in the page, after loading the jquery scripts { <script src="~/scripts/jquery.signalr js"></script> <script src="~/signalr/hubs"></script> <script src="~/scripts/date.js"></script> } 12. While we re thinking of it, copy date.js from this lab s files to the Scripts folder of this project. Then in Solution Explorer, expand the Scripts folder and click the Show All Files button in the Solution Explorer toolbar. Right-click date.js and select Include In Project from the pop-up menu. MVC 4.0: Caching, Security, and Architecture 10-7

8 13. Back in the Chat view, add a new <script> element at the end of the scripts section list and add the following htmlencode method, which will use a trick to HTML-encode the message before displaying it on the page, to avert some kinds of injection attacks. <script> function htmlencode(value) { var encodedvalue = $('<div />').text(value).html(); return encodedvalue; } </script> 14. Within that same <script> element, after the htmlencode function, add the jquery ready function shown below. Here is where the client-side code will initialize SignalR and wire up the events needed on the page. $(function () { }); 15. Within the jquery ready function, add the following code to prompt the user for their chat handle and save it to the hidden username element. $('#username').val(prompt('enter your chat handle:', '')); 16. Immediately after the code you just added, add a chat variable to hold a reference to a proxy object to the ChatHub class you added to the server code. Since this is JavaScript, the code uses camel-casing instead of the proper casing used in the C# on the server, so it is chathub here instead of ChatHub. var chat = $.connection.chathub; 10-8 MVC 4.0: Caching, Security, and Architecture

9 Use SignalR to Build a Chat Application 17. Immediately after the previous code you added, add the following code. These two statements start the SignalR connection and then define the sendmessage method on the chat client to process the response from the server, adding the new message to the chats unordered list. $.connection.hub.start().done(function () { $('#sendmessage').click(function () { chat.server.send($('#username').val(), $('#message').val()); $('#message').val('').focus(); }); }); chat.client.sendmessage = function (name, message) { $('#chats').append('<li>' + (new Date).toString('HH:mm:ss') + ': ' + '<strong>' + htmlencode(name) + '</strong> - ' + htmlencode(message) + '</li>'); }; 18. Add the following user interface code immediately after the previous code you added, still within the ready function. This sets the focus to the message text box and wires up its keypress event so that users can either click the Send button or press ENTER after entering a new message. $('#message').focus(); $('#message').keypress(function (event) { if (event.which === 13) $('#sendmessage').click(); }); MVC 4.0: Caching, Security, and Architecture 10-9

10 19. Save your work. Open the Home controller s Index view by doubleclicking the Index.cshtml file in Solution Explorer. Delete the entire <p> element and its contents from the featured section. Change the contents of the <h3> element to Architecture Lab. And delete the entire <ol> element and its contents. At this point the entire view should consist of the following ViewBag.Title = "Home Page"; featured { <section class="featured"> <div class="content-wrapper"> <hgroup class="title"> <h1>@viewbag.title.</h1> <h2>@viewbag.message</h2> </hgroup> </div> </section> } <h3>architecture Lab</h3> 20. Immediately after the <h3> element, add the following code to provide a link to the Chat action "Chat") MVC 4.0: Caching, Security, and Architecture

11 Use SignalR to Build a Chat Application 21. You re done! Save your work and run the application. Click the Chat link on the Index view, and enter your name in the JavaScript prompt box. Then enter a few messages, as shown in Figure 4. Figure 4. One person chatting to himself. 22. Copy the URL from the address bar in the browser. Open another browser (preferably a different browser from the one currently running; we started with Internet Explorer then opened Firefox). Paste the URL in the new browser window to go to the chat page. Enter a different name, and enter a few chats back and forth. Our conversation is shown in Figure 5. Figure 5. Chat in action with two users. 23. Close both browsers and end execution. MVC 4.0: Caching, Security, and Architecture 10-11

12 Create a Weather HTTP Handler Objective In this exercise, you ll create a simple weather handler that reports the weather (and will always report delightful conditions) when the user navigates to weather.axd. Along the way, you ll create a WeatherHandler handler class and register the handler for use in IIS in the Web.config file. Step-by-Step Instructions 1. If you completed the previous lab, you can use that same project for this lab. If you didn t complete that lab, create a new MVC 4 application using the Internet template and the Razor view engine. Save it to a convenient location and give it a meaningful name (we named our project ArchitectureLab). 2. In Solution Explorer, right-click the project name and select Add Add ASP.NET Folder App_Code from the pop-up menu. The new App_Code folder should appear as a child of the project. 3. Right-click the new App_Code folder and select Add New Item from the pop-up menu to open the Add New Item dialog box. Select the Web templates node from the left-side list, and select the ASP.NET Handler template. Name the new file WeatherHandler.cs, as shown in Figure 6, and click Add to create the handler and add it to the project. Figure 6. Adding a new handler to the MVC project MVC 4.0: Caching, Security, and Architecture

13 Create a Weather HTTP Handler 4. The resulting WeatherHandler.cs provides a skeleton HTTP handler with the required IsReusable property and ProcessRequest method. IsReusable is set to return true, which works for this simple application that doesn t save state information. Start by changing the namespace from ArchitectureLab.App_Code to just ArchitectureLab to simplify naming. 5. You ll need to provide code for the ProcessRequest method. Replace the comment in that method with the following code. The code uses the context object passed into the method to get access to the response stream to send information back to the browser. In a real weather application, the method would probably hit some weather Web service to get current conditions for a location. But in the magical world where this code runs, it s always a great day! HttpResponse response = context.response; response.write("<html><body>"); response.write("<h1>the weather is delightful!</h1>"); response.write("</body></html>"); 6. Now you need to register the handler. Here we ll assume that you ll test the code using IISExpress, which supports IIS s integrated mode. In Solution Explorer, double-click the Web.config file to open it in an editor window. Find the <handlers> section in the <system.webserver> section, and add the following code at the end of the <handlers> section (this should all be on one line; we had to break it to fit on the page). <add name="weatherhandler" path="weather.axd" verb="*" type="architecturelab.weatherhandler" /> 7. Save your work and run the application. After the Index view loads, change the URL to the following (your port number will probably be different; just use what the application starts with). You ll see the page shown in Figure 7. Figure 7. The page generated by the weather handler. 8. Close the browser and end execution. MVC 4.0: Caching, Security, and Architecture 10-13

14 10-14 MVC 4.0: Caching, Security, and Architecture