yavsc/Yavsc/Views/Home/Chat.cshtml

@{ ViewBag.Title = "Chat"; }
<h2>Chat </h2>
<label><input type="checkbox" id="mute" />Muet</label>
<style>
.discussion {
  color: white;
  font-family: monospace;
}
.notif {
  color: #aaf;
  font-family: monospace;
}
.pv {
  color: yellow;
  font-family: monospace;
  font-style: bold;
}

#targets { 
    display:inline-block;
}
</style>



<div class="container">
    <input type="hidden" id="displayname"  />
    <div class="panel">
    <em>Salons</em>
    <ul>
        <li id="pubChan">Public</li>
    </ul>
    <em>Utilisateurs</em>
    <ul id="userlist" style="list-style:none;">
    </ul>
    </div>
<ul id="discussion">
</ul>
<div id="targets">
    <div id="sendmessagebox">
        <input type="text" id="message"  class="form-control"/>
        <input type="button" id="sendmessage" value="@SR["Send"]" class="btn btn-default"/>
    </div>
    @if (ViewBag.IsAuthenticated) {
    <div id="sendpvbox">
        <input type="text" id="pv"  class="form-control" />
        <button type="submit" id="sendpv" class="btn btn-default">@SR["Send a private message"] @SR["to"] <div id="sendpvdest" /> </button>
    </div>
    }
    <input type="hidden" id="mySignalRConnectionIdHidden" value="" />
</div>
</div>

@section scripts {
<!--Reference the autogenerated SignalR hub script. -->
<script src="~/api/signalr/hubs"></script>
<!--SignalR script to update the chat page and send messages.-->
<script>

        $(function () {
            var pvuis;
            var audio = new Audio('/sounds/bell.mp3');

            var setPrivate = function (li) {
                $("#sendmessagebox").addClass("hidden");
                $("#sendpvbox").removeClass("hidden");
                pvuis = { CXs: $(li).data("cxids"), UserName: $(li).data("name") };
                $('#sendpvdest').html(pvuis.UserName)
                $('#pv').focus();
            }
            var setPublic = function () {
                $("#sendmessagebox").removeClass("hidden");
                $("#sendpvbox").addClass("hidden");
                $('#message').focus();
            }
            $('#pubChan').css('cursor', 'pointer');
            $('#pubChan').click(setPublic);
            setPublic();

            var getUsers = function () {
                $('#userlist').empty();
                $('#to').empty();
                $.get("/api/chat/users").done(
                    function (users) {
                        $.each(users, function () {
                            var user = this;
                            var existent = $('#userlist li').filterByData("name", user.UserName);
                            if (existent.length > 0) existent.remove();
                            var li = $('<li class="user"><img src="/Avatars/' + user.UserName + '.xs.png"> ' + htmlEncode(user.UserName) + '</li>');

                            var cxids = [];
                            $.each(user.Connections, function () {
                                cxids.push(this.ConnectionId);
                            });
                            $(li).data("name", user.UserName);
                            $(li).data("cxids", cxids);
                            $(li).css('cursor', 'pointer');
                            $(li).click(function () {
                                setPrivate(this);
                            });
                            li.appendTo('#userlist');
                        });
                    }
                );
            };

            // 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) {
                if (!$("#mute").prop('checked'))
                 { 
                      audio.play(); 
                  }
                // Add the pv to the page.
                $('#discussion').append('<li class="pv"><strong>' + htmlEncode(name)
                    + '</strong>: ' + htmlEncode(message) + '</li>')
            };
            $.fn.filterByData = function (prop, val) {
                return this.filter(
                    function () { return $(this).data(prop) == val; }
                );
            }

            var onUserDisconnected = function (cxid, username) {
                $('#userlist li').filter(function () {
                    var nids = $(this).data("cxids").filter(function () {
                        return $(this) !== cxid
                    });
                    if (nids.Length == 0) $(this).remove();
                    else $(this).data("cxids", nids)
                });
            };
            var onUserConnected = function (cxid, username) {
                var connected = $('#userlist li').filterByData("name", username);
                if (connected.length > 0) {
                    var ids = connected.data("cxids");
                    ids.push(cxid);
                    connected.data("cxids", ids);
                } else {
                    var li = $('<li class="user"><img src="/Avatars/' + username + '.xs.png"> ' + username + '</li>');
                    li.data("name", username);
                    li.data("cxids", [cxid]);
                    li.appendTo('#userlist');
                    li.css('cursor', 'pointer');
                    li.click(function () { setPrivate(this); });
                }
            };
            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>');
                    }
                }
            };


            var sendMessage = function () {
                chat.server.send($('#displayname').val(), $('#message').val());
                // Clear text box and reset focus for next comment.
                $('#message').val('')
            };
            var sendPV = function () {
                var msg = $('#pv').val();
                // Call the Send method on the hub.
                $.each(pvuis.CXs, function () {
                    chat.server.sendPV(this, msg);
                });
                $('#discussion').append('<li class="pv">' + htmlEncode(pvuis.UserName)
                    + '<< ' + htmlEncode(msg) + '</li>');
                // Clear text box and reset focus for next comment.
                $('#pv').val('');
            }


            // Start the connection.
            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {
                    // Call the Send method on the hub.
                    sendMessage().focus();
                });
                $("#message").keydown(function (event) {
                    if (event.which == 13) {
                        sendMessage()
                    }
                });
                $("#pv").keydown(function (event) {
                    if (event.which == 13) {
                        sendPV()
                    }
                });
                $('#sendpv').click(function () {
                    // Call the Send method on the hub.
                    sendPV();
                    $("#sendpv").focus()
                });

                getUsers();
            });

            $("#btnDebug").click(getUsers);
            $.connection.hub.disconnected(function () {
                setTimeout(function () {
                    $.connection.hub.start().done(function () {
                        $("#mySignalRConnectionIdHidden").val($.connection.hub.id);
                    }, 3000); // Re-start connection after 3 seconds
                });
            });
            
            $(window).unload(function () { chat.server.abort(); });
        });
        // This optional function html-encodes messages for display in the page.

        function htmlEncode(value) {
            var encodedValue = $('<div />').text(value).html();
            return encodedValue;
        }

    </script>

@if (!ViewBag.IsAuthenticated) { // Get the user name and store it to prepend to messages.
<script>
                $('#displayname').val(prompt('Enter your name:', ''));
            </script>
} }