yavsc/Yavsc/Views/Home/Chat.cshtml

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

<style>
.discussion {
  color: black;
  font-family: monospace;
}
.notif {
  color: grey;
  font-family: monospace;
}
.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="userlist">
    </ul>
    <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>');
            };
            var onUserConnected =  function (cxid, username) {
                 $('#userlist').append('<li class="user">'+username+'</li>')
            };
            var onUserDisconnected = function (cxid, username) {
                 $('#userlist li[data-uid='+cxid+']').remove();
            };
            chat.client.notify = function (tag, message, data) {
                if (data) {
                // Add the pv to the page.
                
                if (tag === 'connected') {
onUserConnected(message, data);
$('#discussion').append('<li class="notif"><i>' + htmlEncode(tag)
                    + '</i> ' + htmlEncode(data) +'</li>');
                } 
                else if (tag === 'disconnected') 
                { 
                    onUserDisconnected(message, data);
$('#discussion').append('<li class="notif"><i>' + htmlEncode(tag)
                    + '</i> ' + htmlEncode(data) +'</li>');
                }
                else {
                    $('#discussion').append('<li class="notif"><i>' + htmlEncode(tag)
                    + '</i> ' + htmlEncode(message) + ' : ' + htmlEncode(data) + '</li>');
                }
                }
            };
            @if (!ViewBag.IsAuthenticated) {
            // Get the user name and store it to prepend to messages.
            <text>
                $('#displayname').val(prompt('Enter your name:', ''));
            </text>
            }

            // 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();
                });

                var getUsers = function() {
                    $('#userlist').empty();
                    chat.server.getUserList().done(
                        function(users) {
                            $.each(users, function () {
                                var user = this;
                                $('#userlist').append('<li class="user"><i>' + htmlEncode(user.UserName)
                    + '</i> ' + htmlEncode(user.ConnectionId) + '</li>');
                            });
                        }
                    );
                    console.log(res);
                };
                getUsers();
            });
            
               
        });
        // This optional function html-encodes messages for display in the page.
        function htmlEncode(value) {
            var encodedValue = $('<div />').text(value).html();
            return encodedValue;
        }
    </script>
}