chat roulette script

Tutorial: Getting Began with SignalR two and MVC Five, Microsoft Docs

Tutorial: Getting Commenced with SignalR two and MVC Five

This tutorial shows how to use ASP.NET SignalR two to create a real-time talk application. You will add SignalR to an MVC five application and create a talk view to send and display messages.

  • Visual Studio 2013
  • .NET Four.Five
  • MVC Five
  • SignalR version Two

To use Visual Studio two thousand twelve with this tutorial, do the following:

  • Update your Package Manager to the latest version.
  • Install the Web Platform Installer.
  • In the Web Platform Installer, search for and install ASP.NET and Web Contraptions 2013.1 for Visual Studio 2012. This will install Visual Studio templates for SignalR classes such as Hub.
  • Some templates (such as OWIN Startup Class) will not be available; for these, use a Class file instead.

Tutorial Versions

For information about earlier versions of SignalR, see SignalR Older Versions.

Questions and comments

Please leave feedback on how you liked this tutorial and what we could improve in the comments at the bottom of the page. If you have questions that are not directly related to the tutorial, you can post them to the ASP.NET SignalR forum or StackOverflow.com.

Overview

This tutorial introduces you to real-time web application development with ASP.NET SignalR two and ASP.NET MVC Five. The tutorial uses the same talk application code as the SignalR Getting Commenced tutorial, but shows how to add it to an MVC five application.

In this topic you will learn the following SignalR development tasks:

  • Adding the SignalR library to an MVC five application.
  • Creating hub and OWIN startup classes to thrust content to clients.
  • Using the SignalR jQuery library in a web page to send messages and display updates from the hub.

The following screen shot shows the ended talk application running in a browser.

Set up the Project

  • Visual Studio 2013. If you do not have Visual Studio, see ASP.NET Downloads to get the free Visual Studio two thousand thirteen Express Development Device.

This section shows how to create an ASP.NET MVC five application, add the SignalR library, and create the talk application.

In Visual Studio, create a C# ASP.NET application that targets .NET Framework Four.Five, name it SignalRChat, and click OK.

In the Fresh ASP.NET Project dialog, and select MVC, and click Switch Authentication.

Select No Authentication in the Switch Authentication dialog, and click OK.

If you select a different authentication provider for your application, a Startup.cs class will be created for you; you will not need to create your own Startup.cs class in step ten below.

Open the Implements | Library Package Manager | Package Manager Console and run the following directive. This step adds to the project a set of script files and assembly references that enable SignalR functionality.

In Solution Explorer, expand the Scripts folder. Note that script libraries for SignalR have been added to the project.

  • In Solution Explorer, right-click the project, select Add | Fresh Folder, and add a fresh folder named Hubs.

    Right-click the Hubs folder, click Add | Fresh Item, select the Visual C# | Web | SignalR knot in the Installed pane, select SignalR Hub Class (v2) from the center pane, and create a fresh hub named ChatHub.cs. You will use this class as a SignalR server hub that sends messages to all clients.

    Substitute the code in the ChatHub class with the following code.

    Create a fresh class called Startup.cs. Switch the contents of the file to the following.

    Edit the HomeController class found in Controllers/HomeController.cs and add the following method to the class. This method comebacks the Talk view that you will create in a later step.

    In the Add View dialog, name the fresh view Talk.

    Substitute the contents of Talk.cshtml with the following code.

    Significant

    When you add SignalR and other script libraries to your Visual Studio project, the Package Manager might install a version of the SignalR script file that is more latest than the version shown in this topic. Make sure that the script reference in your code matches the version of the script library installed in your project.

    Run the Sample

    1. Press F5 to run the project in debug mode.

    In the browser address line, append /home/talk to the URL of the default page for the project. The Talk page geysers in a browser example and prompts for a user name.

  • Inject a user name.
  • Copy the URL from the address line of the browser and use it to open two more browser instances. In each browser example, come in a unique user name.

    In each browser example, add a comment and click Send. The comments should display in all browser instances.

    This elementary talk application does not maintain the discussion context on the server. The hub broadcasts comments to all current users. Users who join the talk later will see messages added from the time they join.

    The following screen shot shows the talk application running in a browser.

  • In Solution Explorer, inspect the Script Documents knot for the running application. This knot is visible in debug mode if you are using Internet Explorer as your browser. There is a script file named hubs that the SignalR library dynamically generates at runtime. This file manages the communication inbetween jQuery script and server-side code. If you use a browser other than Internet Explorer, you can also access the dynamic hubs file by browsing to it directly, for example http://mywebsite/signalr/hubs.

    • Examine the Code

    The SignalR talk application demonstrates two basic SignalR development tasks: creating a hub as the main coordination object on the server, and using the SignalR jQuery library to send and receive messages.

    SignalR Hubs

    In the code sample the ChatHub class derives from the Microsoft.AspNet.SignalR.Hub class. Deriving from the Hub class is a useful way to build a SignalR application. You can create public methods on your hub class and then access those methods by calling them from scripts in a web page.

    In the talk code, clients call the ChatHub.Send method to send a fresh message. The hub in turn sends the message to all clients by calling Clients.All.addNewMessageToPage.

    The Send method demonstrates several hub concepts :

    • Announce public methods on a hub so that clients can call them.
    • Use the Microsoft.AspNet.SignalR.Hub.Clients property to access all clients connected to this hub.

    Call a function on the client (such as the addNewMessageToPage function) to update clients.

    SignalR and jQuery

    The Talk.cshtml view file in the code sample shows how to use the SignalR jQuery library to communicate with a SignalR hub. The essential tasks in the code are creating a reference to the auto-generated proxy for the hub, proclaiming a function that the server can call to thrust content to clients, and embarking a connection to send messages to the hub.

    The following code proclaims a reference to a hub proxy.

    In JavaScript the reference to the server class and its members is in camel case. The code sample references the C# ChatHub class in JavaScript as chatHub. If you want to reference the ChatHub class in jQuery with conventional Pascal casing as you would in C#, edit the ChatHub.cs class file. Add a using statement to reference the Microsoft.AspNet.SignalR.Hubs namespace. Then add the HubName attribute to the ChatHub class, for example [HubName("ChatHub")] . Eventually, update your jQuery reference to the ChatHub class.

    The following code shows how to create a callback function in the script. The hub class on the server calls this function to thrust content updates to each client. The optional call to the htmlEncode function shows a way to HTML encode the message content before displaying it in the page, as a way to prevent script injection.

    The following code shows how to open a connection with the hub. The code starts the connection and then passes it a function to treat the click event on the Send button in the Talk page.

    This treatment ensures that the connection is established before the event handler executes.

    Next Steps

    You learned that SignalR is a framework for building real-time web applications. You also learned several SignalR development tasks: how to add SignalR to an ASP.NET application, how to create a hub class, and how to send and receive messages from the hub.

    For a walkthrough on how to deploy the sample SignalR application to Azure, see Using SignalR with Web Apps in Azure App Service. For detailed information about how to deploy a Visual Studio web project to a Windows Azure Web Site, see Create an ASP.NET web app in Azure App Service.

    To learn more advanced SignalR developments concepts, visit the following sites for SignalR source code and resources :

    Related video:

    Leave a Reply