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..