Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Chat Application using SignalR in MVC

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.23k
    Comment on it

    Hi All,

    In my earlier blog I discussed about the essentials needed to create a simple chat application using signalR, if you guys missed you can have a look at http://findnerd.com/list/view/Essentials-for-Chat-Application-using-SignalR-in-MVC/24292/.

    Now we will discuss the code packet.

    In the ChatHub class write the following code:

     public void Send(string name, string message, string groupName)
            {
                Clients.OthersInGroup(groupName).broadcastMessage(name, message);
            }

    In View part create:

    <div class="container">
    <ul id="discussion" style="padding:0; height:1px;"></ul>
    <textarea id="message" onkeypress="typing(event)" style="width:100%; height:100%;"></textarea>
    <button id="sendmessage" onclick="sendMessage()"></button>
    </div>

    Include following JS Files in your View:

    <script src="~/Scripts/jquery-3.1.0.min.js"></script>
    <script src="~/Scripts/jquery.signalR-2.2.1.min.js"></script>
    <script src="~/signalr/hubs"></script>

    Write following code in your JS Section:

    <script type="text/javascript">
    	var chat;
    	var session;
    	$(function () {
    		// Declare a proxy to reference the hub.
    		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.
    			if (encodedName == "Student") {
    				$('#discussion').append('<li style="background-color: rgb(187,222,251);"><div style="padding:5px; line-height:20px; word-wrap:break-word">' + encodedMsg + '</div></li>');
    				//Use the structure as per your HTML to append the chat list
    				$("html,body,div,section,md-content,div,md-card,md-content,div,div").animate({ scrollTop: $('ul#discussion li:last').offset().top - 10 });
    			}
    			angular.element('#toastButton').scope().showMessageToast();
    		};
    		$.connection.hub.start().done(function () {
    			$('#sendmessage').click(function () {
    				// Call the Send method on the hub.
    				chat.server.send($('#displayname').val(), $('#message').val(), session);
    				// Clear text box and reset focus for next comment.
    				$('#message').val('').focus();
    			});
    		});
    	});
    
    	function sendMessage() {
    		$('#discussion').append('<li style="margin-top:2%; margin-left:10%; background-color: lightgrey;"><div style="padding:5px; line-height:20px; word-wrap:break-word">' + $('#message').val() + '</div></li>');
    		//Use the structure as per your HTML to append the chat list
    		$("html,body,div,section,md-content,div,md-card,md-content,div,div").animate({ scrollTop: $('ul#discussion li:last').offset().top - 10 });
    		chat.server.send($('#displayname').val(), $('#message').val(), session);
    		$('#message').val('').focus();
    	};
    </script>

    And here you go...... A simple chat application is ready for you...

    Happy Coding..

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: