Hello Readers! Today I am going to tell you how to build a chat application on .NET using SignalR without any database. Obviously this application is not going to store any communication between the peers however will tell you how to broadcast using SignalR with very easy steps.

SignalR is an open-source .NET library for building web applications that require live user interaction or real-time data updates. Examples include social applications, multiuser games, business collaboration, and news, weather, or financial update applications. These are often called real-time applications.

SignalR simplifies the process of building real-time applications. It includes an ASP.NET server library and a JavaScript client library to make it easier to manage client-server connections and push content updates to clients. You can add the SignalR library to an existing ASP.NET application to gain real-time functionality.

  1. Create Asp.NET MVC Project using Visual Studio as shown below:1- creating-asp.net-project in visual studio
    2 - creating-asp.net-project in visual studio
  2. Right Click References and select Manage Nuget Packages and search for SignalR Package as shown belowAdding Nuget Package Manager - Signal R
  3. In Solution Explorer, expand the Scripts node. Script libraries for jQuery and SignalR are visible in the project.
  4. In Solution Explorer, right-click the project, select Add | SignalR Hub Class (v2). Name the class ChatHub.cs and add it to the project. This step creates the ChatHub class and adds to the project a set of script files and assembly references that support SignalR.
  5. Replace the code in the new ChatHub class with the following code.
    using System;
    using System.Web;
    using Microsoft.AspNet.SignalR;
    namespace SignalRChat
    {
    public class ChatHub : Hub
    {
    public void Send(string name, string message)
    {
    // Call the broadcastMessage method to update clients.
    Clients.All.broadcastMessage(name, message);
    }
    }
    }
  6. In Solution Explorer, right-click the project, then click Add | OWIN Startup Class. Name the new class Startup and click OK.

  7. Change the contents of the new Startup class to the following.
    using Microsoft.Owin;
    using Owin;
    [assembly: OwinStartup(typeof(SignalRChat.Startup))]
    namespace SignalRChat
    {
    public class Startup
    {
    public void Configuration(IAppBuilder app)
    {
    // Any connection or hub wire up and configuration should go here
    app.MapSignalR();
    }
    }
    }
  8. In Solution Explorer, right-click the project, then click Add | HTML Page. Name the new page index.html.
  9. In Solution Explorer, right-click the HTML page you just created and click Set as Start Page.
  10. Replace the default code in the HTML page with the following code.

  11. <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <title>SignalR Simple Chat</title>
    
    <style type="text/css">
    
    .container {
    
    background-color: #99CCFF;
    
    border: thick solid #808080;
    
    padding: 20px;
    
    margin: 20px;
    
    }
    
    </style>
    
    </head>
    
    <body>
    
    <div class="container">
    
    <input type="text" id="message" />
    
    <input type="button" id="sendmessage" value="Send" />
    
    <input type="hidden" id="displayname" />
    
    <ul id="discussion">
    
    </ul>
    
    </div>
    
    <!--Script references. -->
    
    <!--Reference the jQuery library. -->
    
    <script src="Scripts/jquery-3.1.1.min.js" ></script>
    
    <!--Reference the SignalR library. -->
    
    <script src="Scripts/jquery.signalR-2.2.1.min.js"></script>
    
    <!--Reference the autogenerated SignalR hub script. -->
    
    <script src="signalr/hubs"></script>
    
    <!--Add script to update the page and send messages.--> 
    
    <script type="text/javascript">
    
    $(function () {
    
    // Declare a proxy to reference the hub. 
    
    var chat = $.connection.chatHub;
    
    // Create a function that the hub can call to broadcast messages.
    
    chat.client.broadcastMessage = function (name, message) {
    
    // Html encode display name and message. 
    
    var encodedName = $('<div />').text(name).html();
    
    var encodedMsg = $('<div />').text(message).html();
    
    // Add the message to the page. 
    
    $('#discussion').append('<li><strong>' + encodedName
    
    + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
    
    };
    
    // Get the user name and store it to prepend to messages.
    
    $('#displayname').val(prompt('Enter your name:', ''));
    
    // Set initial focus to message input box. 
    
    $('#message').focus();
    
    // Start the connection.
    
    $.connection.hub.start().done(function () {
    
    $('#sendmessage').click(function () {
    
    // Call the Send method on the hub. 
    
    chat.server.send($('#displayname').val(), $('#message').val());
    
    // Clear text box and reset focus for next comment. 
    
    $('#message').val('').focus();
    
    });
    
    });
    
    });
    
    </script>
    
    </body>
    
    </html>
  12. Save All for the project.
  13. Build the project.

Running Projcet

  1. Press F5 to run the project in debug mode. The HTML page loads in a browser instance and prompts for a user name.

  2. Enter a user name.

  3. Copy the URL from the address line of the browser and use it to open two more browser instances. In each browser instance, enter a unique user name.

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

  5. The following screen shot shows the chat application running in three browser instances, all of which are updated when one instance sends a message: