yavsc/Yavsc/Views/Home/Chat.cshtml

@{
    ViewBag.Title = "Chat";
}
<h2>Chat</h2>

<style>
.discussion {
  color: black;
  font-family: monospace;
}
.notif {
  color: black;
  font-family: monospace;
  font-style: italic;
}
.pv {
  color: black;
  font-family: monospace;
  font-style: bold;
}
 
</style>
<div class="container">
    <input type="text" id="message" />
    <input type="button" id="sendmessage" value="Send" />
    
    <input type="hidden" id="displayname" />
    @if (ViewBag.Contacts!=null) {
<select id="to" >
    
    @foreach (var contact in ViewBag.Contacts) {
        <option>@contact.UserName</option>
    }
</select>
}
    <ul id="discussion">
    </ul>
</div>
@section scripts {
    <!--Script references. -->
    <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
    <!--Reference the SignalR library. -->
    <script src="~/js/jquery.signalR-2.2.1.min.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="~/api/signalr/hubs"></script>
    <!--SignalR script to update the chat page and send messages.-->
    <script>
        $(function () {
            // Reference the auto-generated proxy for the hub.
            var chat = $.connection.chatHub;
            // Create a function that the hub can call back to display messages.
            chat.client.addMessage = function (name, message) {
                // Add the message to the page.
                $('#discussion').append('<li class="discussion"><strong>' + htmlEncode(name)
                    + '</strong>: ' + htmlEncode(message) + '</li>');
            };
            chat.client.addPV = function (name, message) {
                // Add the pv to the page.
                $('#discussion').append('<li class="pv"><strong>' + htmlEncode(name)
                    + '</strong>: ' + htmlEncode(message) + '</li>');
            };
            chat.client.notify = function (tag, message, data) {
                // Add the pv to the page.
                $('#discussion').append('<li class="notif"><i>' + htmlEncode(tag)
                    + '</i> ' + htmlEncode(message) +' '+ htmlEncode(data) +'</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();
                });
                $('#sendpv').click(function () {
                    // Call the Send method on the hub.
                    chat.server.sendPV($('#to').val(), $('#message').val());
                    // Clear text box and reset focus for next comment.
                    $('#message').val('').focus();
                });
            });
        });
        // This optional function html-encodes messages for display in the page.
        function htmlEncode(value) {
            var encodedValue = $('<div />').text(value).html();
            return encodedValue;
        }
    </script>
}