The Send() method broadcasts the message to the users by passing the name and the message as the parameters. The SendToSpecific() method on the other hand broadcasts the message to a specific user. The Notify() method tells the client when someone enters the chat room and then adds them to the list of the available users. The OnDisconnected() method handles the removal of users if someone leaves the chat room. This method is asynchronous and will be called whenever the connection from the client is closed (for example closing the browser).

Step 6. Implementing the Client-Side code

Now that we already have our Hub setup we can now proceed with the client-side implementation of our chat application.

Add the following code block below in your View (.cshtml/.aspx).

@section scripts {   
    @Scripts.Render("~/Scripts/jquery-ui-1.9.2.min.js")  
    @Scripts.Render("~/Scripts/jquery.signalR-1.0.1.min.js")  
    @Scripts.Render("/signalr/hubs")  

    <script type="text/javascript">  
        $(function () {  
            showModalUserNickName();  
        });  
        function showModalUserNickName() {  
            $("#dialog").dialog({  
                modal: true,  
                buttons: {  
                    Ok: function () {  
                        $(this).dialog("close");  
                        startChatHub();  
                    }  
                }  
            });  
        }  
        function startChatHub() {  
            var chat = $.connection.chatHub;  

            // Get the user name.  
            $('#nickname').val($('#nick').val());  
            chat.client.differentName = function (name) {  
                showModalUserNickName();  
                return false;  
                // Prompts for different user name  
                $('#nickname').val($('#nick').val());  
                chat.server.notify($('#nickname').val(), $.connection.hub.id);  
            };  
            chat.client.online = function (name) {  
                // Update list of users  
                if (name == $('#nickname').val())  
                    $('#onlineusers').append('<div class="border" style="color:green">You: ' + name + '</div>');  
                else {  
                    $('#onlineusers').append('<div class="border">' + name + '</div>');  
                    $("#users").append('<option value="' + name + '">' + name + '</option>');  
                }  
            };  
            chat.client.enters = function (name) {  
                $('#chatlog').append('<div><i>' + name + ' joins the conversation</i></div>');  
                $("#users").append('<option value="' + name + '">' + name + '</option>');  
                $('#onlineusers').append('<div class="border">' + name + '</div>');  
            };  
            // Create a function that the hub can call to broadcast chat messages.  
            chat.client.broadcastMessage = function (name, message) {  
                // Interpret smileys  
                message = message.replace(":)", "<img src=\"/images/smile.gif\" class=\"smileys\" />");  
                message = message.replace(":D", "<img src=\"/images/laugh.gif\" class=\"smileys\" />");  
                message = message.replace(":o", "<img src=\"/images/cool.gif\" class=\"smileys\" />");  

                // Display the message  
                $('#chatlog').append('<div class="border"><span style="color:orange">' + name + '</span>: ' + message + '</div>');  
            };  

            chat.client.disconnected = function (name) {  
                // Calls when someone leaves the page  
                $('#chatlog').append('<div><i>' + name + ' leaves the conversation</i></div>');  
                $('#onlineusers div').remove(":contains('" + name + "')");  
                $("#users option").remove(":contains('" + name + "')");  
            };  
            // Start the connection.  
            $.connection.hub.start().done(function () {  
                // Calls the notify method of the server  
                chat.server.notify($('#nickname').val(), $.connection.hub.id);  

                $('#btnsend').click(function () {  
                    if ($("#users").val() == "All") {  
                        // Call the Send method on the hub.  
                        chat.server.send($('#nickname').val(), $('#message').val());  
                    }  
                    else {  
                        chat.server.sendToSpecific($('#nickname').val(), $('#message').val(), $("#users").val());  
                    }  
                    // Clear text box and reset focus for next comment.  
                    $('#message').val('').focus();  
                });  
            });  
        }  
    </script>  
}  

At the very top within the @RenderSection, you need to define a reference to jQueryUI and SignalR scripts. Please note that the script reference should be in the following order.

• jQuery Script
• jQueryUI
• SignalR script
• SignalR/Hubs
• Your custom-defined script

You might be wondering why we haven’t included a reference to the jQuery script in the code above. The reason for this is that when you created the Template, the engine automatically added a reference to the jQuery script within your _Layout.cshml before the closing tag of the <body> element and automatically bundled it for you for page performance.

Note. Adding a reference to the jQuery script within your View will cause an error when running your application that uses SignalR. This is because the reference to the jQuery script will be duplicated and the order of the script references will be changed and that can cause the SignalR script to throw an exception.

The showModalUserNickName() function calls the jQueryUI dialog. This function will be called when the browser is loaded to prompt the user to enter their name before joining the chat room. After entering their name the startChatHub() function will be called. This function is where the actual implementation of the chat is defined. The logic is that it first creates a proxy connection to the Hub (ChatHub). Once connected, we then have access to the public methods defined in our Hub class. The next step is to get the name of the user. If the user already exists in the dictionary then they will be prompted to enter another name. Then it will call the Notify() method to add the new user to the dictionary and notify other users that someone has joined the chat room. The next function updates the message logs, available users, and the online user’s panel when someone joins the room. Then it calls the broadcastMessage() function to display the messages among users in the message logs. You will also see that I’ve added some code within that function that will interpret smileys. The client. disconnected() function is responsible for updating the UI and the list of users when someone leaves the chat room. And finally, call the hub. start() function to start the connection between the client and the hub (server). This method contains the implementation of sending the message to other users or specific users.

Step 7. Wrapping Up

• Adding a new CSS file: Create a new CSS file under the Content folder. Name it “chat.css”. Then add the following style definitions to the CSS file.

  #container {  
      width: 400px;  
      margin-left: auto;  
      margin-right: auto;  
  }  
  
  #chatlog {  
      width: 250px;  
      background-color: aliceblue;  
      float: left;  
  }  
  
  #onlineusers {  
      float: right;  
      width: 100px;  
      background-color: #D4D4D4;  
  }  
  
  #chatarea {  
      clear: both;  
      width: 200px;  
  }  
  
  #chatarea .messagelog {  
      float: left;  
      height: 90%;  
      top: 10%;  
      position: relative;  
  }  
  
  #chatarea .messagelog .messagebox {  
      width: 400px;  
      height: 80%;  
  }  
  
  #chatarea .actionpane {  
      position: relative;  
      float: left;  
  }  
  
  .smileys {  
      width: 14px;  
      height: 14px;  
  }  
  

• Adding Smiley images: Create a new folder within the root project and name it “Images”. Then add your smileys within that folder.
• Referencing CSS files: Then add the following references at the <head> section in your _Layout.cshtml.

  <link href="~/Content/chat.css" rel="stylesheet" />
  <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
  

• Modifying the default Route: Update the default route under App_Start > RouteConfig so that it will automatically display the SignalRChat page when you run the application. Here’s the updated code.

  routes.MapRoute(
      name: "Default",
      url: "{controller}/{action}/{id}",
      defaults: new 
      { 
          controller = "ChatRoom", 
          action = "SignalRChat", 
          id = UrlParameter.Optional 
      }
  );
  

• Registering the MapHubs Route: And finally, the most important thing is to make things work. Add the following line below in your Global.asax.cs under the Application_Start event.

  RouteTable.Routes.MapHubs();
  

Note. Be sure to define the MapHubs() route before the RegisterRoutes() call.

Step 8. Run the Page

Here’s the output below.

That’s it! I hope someone finds this article useful!