Building A Private Chat Application Using SignalR

We will create a chat application to explain the flow of SignalR. We install the SignalR and create a hub to which the client will interact, calling the server methods, and in return, the server responds and interacts with the client. You can directly add a new project in VS for the SignalR or create an MVC project and install the SignalR package/libraries from the Nuget.

PM > Install-Package Microsoft.AspNet.SignalR

This is to download all the dependencies required for the SignalR. 

After the successful installation, the above dlls or packages are installed into your project. There will be a class file which needs to be added to the root of your project, which would look like:

1. using Owin;  
2. Using Microsoft.Owin;  
3. [assembly: OwinStartup(typeof(SignalRChat.Startup))]  
4. namespace SignalRChat   
5. {  
6.     public class Startup   
7.     {  
8.   public void Configuration(IAppBuilder app) { // Any connection or hub wire up and configuration should go here app.MapSignalR();   
9.         }   
10.     }  
11.  }  

This is an OWIN-based application. Every OWIN application will have a startup.cs class, where the components for the application pipeline are added. The OWIN attribute specifies the property type, the project’s start-up, and the configuration method and sets up the SignalR mapping for the App. Another two script files will be added as we install the packages for SignalR.

These script files are mandatory to be loaded onto the .cshtml page to activate the SignalR. Let’s look into the code immediately: We need to add a new hub class inside a Hub folder. Let’s name that LetsChatHub.cs, which would look like: 

1. using System;  
2. using System.Collections.Generic;  
3. using System.Linq;  
4. using System.Web;  
5. using Microsoft.AspNet.SignalR;  
6. namespace LetsChatApplication.Hubs  
7. {  
8.     public class LetsChatHub: Hub  
9.     {  
10.         public void Send(string name, string message, string connId)  
11.         {  
12.             Clients.Client(connId).appendNewMessage(name, message);  
13.         }  
14.     }  
15. }  

The above send method accepts the parameters, name (which you would be giving once you navigate onto the url), the message (which the user would be sending from the UI). The other parameter is connId, which would help us have chat private and not send to every user who navigates to the site. If you would like to have every user receive and send the messages to those who navigate to the URL ,To allow every user the access, the code you change as below:

1. namespace LetsChatApplication.Hubs  
2. {  
3.     public class LetsChatHub: Hub  
4.     {  
5.         public void Send(string name, string message)  
6.         {  
7.             Clients.All.appendNewMessage(name, message);  
8.         }  
9.     }  
10. }  

The Send method is requested from the client with the parameters after the connection is set on the client side, and once the Server receives the request, it processes and sends back the response to the client using the appendNewMessage. This appendNewMessage method is added on the client side to receive the response and display on the UI to the client. You need to add a controller, lets suppose: “LetsChat” with an action “LetsChat”, add a view to that with the below code. The client-side code would look like below:

1. @{  
2.     ViewBag.Title = “LetsChat”;  
3.   
4. }  
5.   
6.   
7. <h2>Lets Chat</h2>  
8. <link href=”~/Content/sweetalert.css” rel=”stylesheet” />  
9.   
10. <div class=”form-group col-xl-12″>  
11.     <label class=”control-label”>Your connection Id</label><br />  
12.     <input type=”text” class=”col-lg-12 text-primary” id=”frndConnId” placeholder=”Paste your friend’s connection Id” /><br /><br />  
13.     <label class=”control-label”>Your Message</label><br />  
14.     <textarea type=”text” class=”col-lg-10 text-primary” id=”message”></textarea>       
15.     <input type=”button” class=”btn btn-primary” id=”sendmessage” value=”Send” /><br /><br />  
16.     <img src=”~/Content/smile.jpg” width=”20″ height=”20″ id=”smile” style=”cursor:pointer”/>  
17.     <img src=”~/Content/uff.jpg” width=”20″ height=”20″ id=”ufff” style=”cursor:pointer” />  
18.     <div class=” container chatArea”>  
19.         <input type=”hidden” id=”displayname” />  
20.         <ul id=”discussion”></ul>  
21.     </div>  
22. </div>  
23. <br />  
24. <input type=”hidden” id=”connId” />  
25.   
26. <!–Reference the autogenerated SignalR hub script. –>  
27. @section scripts {  
28.     <script src=”~/Scripts/jquery-1.10.2.min.js”></script>  
29.     <script src=”~/Content/sweetalert.min.js”></script>  
30.     <script src=”~/Scripts/jquery.signalR-2.2.0.min.js”></script>  
31.     <script src=”~/signalr/hubs”></script>  
32.     <script>  
33.         //var userName = “”;  
34.         //var sessionVal = ”;  
35.         $(function () {  
36.             // Reference the auto-generated proxy for the hub.  
37.             var chat = $.connection.letsChatHub;  
38.               
39.             debugger;  
40.   
41.             // Create a function that the hub can call back to display messages.  
42.             chat.client.addNewMessageToPage = function (name, message) {  
43.                 // Add the message to the page.  
44.                 $(‘#discussion’).append(‘<li><strong>’ + htmlEncode(name)  
45.                     + ‘</strong>: ‘ + htmlEncode(message) + ‘</li>’);  
46.             };  
47.             // Get the user name and store it to prepend to messages.  
48.             swal({  
49.                 title: “Lets Chat!”,  
50.                 text: “<span style=’color:#f8bb86;font-weight:700;’>Enter your name:</span>”,  
51.                 type: “input”,  
52.                 html: true,  
53.                 showCancelButton: true,  
54.                 closeOnConfirm: true,  
55.                 animation: “slide-from-top”,  
56.                 inputPlaceholder: “Your Name”  
57.             },  
58.             function (inputValue) {  
59.                 userName = inputValue;  
60.                 if (inputValue === false) return false;  
61.                 if (inputValue === “”) {  
62.                     swal.showInputError(“You need to type your name!”);  
63.                     return false;  
64.                 }  
65.                 $(‘#displayname’).val(inputValue);  
66.             });  
67.             // Set initial focus to message input box.  
68.             $(‘#message’).focus();  
69.             $(‘#message’).keypress(function (e) {  
70.                 if (e.which == 13) {//Enter key pressed  
71.                     $(‘#sendmessage’).trigger(‘click’);//Trigger search button click event  
72.                 }  
73.             });  
74.             $(“#smile”).click(function () {  
75.   
76.             });  
77.             // Start the connection.  
78.             $.connection.hub.start().done(function () {  
79.   
80.                 $(‘#sendmessage’).click(function () {  
81.                     // Call the Send method on the hub.  
82.                     var connId = $(“#connId”).val();  
83.                     var frndConnId = $(“#frndConnId”).val();  
84.                     var finalConnId = frndConnId == “” ? $.connection.hub.id : frndConnId;  
85.                     chat.server.send($(‘#displayname’).val(), $(‘#message’).val(), finalConnId);  
86.                     $(“#connId”).val($.connection.hub.id);  
87.                     if (frndConnId == “”) {  
88.                         swal(“You connection Id”, $.connection.hub.id, “success”);  
89.                     }  
90.                     // Clear text box and reset focus for next comment.  
91.                     $(‘#discussion’).append(‘<li><strong>’ + htmlEncode($(‘#displayname’).val())  
92.                    + ‘</strong>: ‘ + htmlEncode($(‘#message’).val()) + ‘</li>’);  
93.                     $(‘#message’).val(”).focus();  
94.                 });  
95.             });  
96.      
97.         });  
98.     // This optional function html-encodes messages for display in the page.  
99.     function htmlEncode(value) {  
100.         var encodedValue = $(‘<div />’).text(value).html();  
101.         return encodedValue;  
102.     }  
103.     </script>  
104. }  

We have a normal UI in place to add your message and send button to call the server methods. Let’s understand the code above part by part.

1. var chat = $.connection.letsChatHub;  

Here, we set the connection to the Hub class. As you can notice, letsChatHub is the same hub class file name we added to set up the Server. The convention as follows, the intial of the methods or the class name starts with lowercase. From here, we use chat to access the Send method.

1. $.connection.hub.start().done(function()  
2.             {  
3.             $(‘#sendmessage’).click(function()  
4.                          {  
5.                         // Calls the Send method on the hub. chat.server.send($(‘#displayname’).val(), $(‘#message’).val(), finalConnId);  

chat. Server.send,is self explanatory, it sets the chat connection to call the Server Send method once the connection is set and started.

1. chat.client.appendNewMessage = function (name, message) {  
2. //  
3. }  

This is called when the Server receives the request and calls back the method on the client side.