Web-Chat Implementierung

Grundsätzlich benutzt das System die Bibliothek signalr und die clientseitig Implementierung ist in Java Script ausgeführt. signalr bietet sogenannte Hubs an, daher sind drei in myContactCenter implementiert.

• Web Chat Hub mit Namen chatHub
• Web Call Back Hub mit Namen callBackCallHub
• ACD Hub mit Namen acdHub

Zusätzlich wird die Bibliothek jquery-2.2.3.min.js und jquery.signalR-2.2.1.min.js benötigt. Diese müssen öffentlich zum Download bereitstehen, so dass Internet Browser diese herunterladen können während der Chat Client gestartet wird. Idealerweise befinden sich diese Bibliotheken auf einem öffentlichen  Server, z.B. dem Web-Server der Internetpräsenz.

Um die Funktionalität bereitzustellen muss der Port 6010 des myContactCenter Servers für Kunden aus dem Internet erreichbar sein. Somit muss für den Fall, dass sich der myContactCenter Server hinter einer Firewall befindet eine Port Weiterleitung auf Port 6010 eingerichtet sein.myContactCenter

Der gezeigte Code stellt eine Basisimplementierung des Web-Chat dar.

<!--Script references. -->
    <!--Reference the jQuery library. -->
    <script src="Scripts/jquery-1.11.2.min.js"></script>
    <!--Reference the SignalR library. -->
    <script src="Scripts/jquery.signalR-2.2.0.min.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="http://Your.Host.Name:6010/signalr/hubs"></script>
    <script type="text/javascript">
        $(function () {
            $('#message').prop('disabled', true);
            $('#sendmessage').prop('disabled', true);
            
            $.connection.hub.url = "http://Your.Host.Name:6010/signalr";
            // Declare proxies to reference the hubs.
            var chat = $.connection.chatHub;
            var acd = $.connection.acdHub;
            
            var customername = "Customer";
            var skill = "Skill";
            var language = "Language";
            // Adds a message to the page.
            function addMessage(participant,htmlMessage) {
                $('#discussion').append('<li><strong>' +
                                        $('<div />').text(participant).html() +
                                        '</strong>:&nbsp;&nbsp;' +
                                        htmlMessage + '</li>');
            };
            function registerChat() {
                chat.server.register(customername, skill, language)
                            .done(function (chatWasSuccessfullyCreated) {
                                if (chatWasSuccessfullyCreated) {
                                    console.log('Chat was successfully created');
                                    $('#message').prop('disabled', false);
                                    $('#sendmessage').prop('disabled', false);
                                    $('#sendmessage').click(function () {
                                        var htmlMessage = $('<div />').text($('#message').val()).html();
                                        chat.server.addMessage(htmlMessage);
                                        addMessage($('#customername').val(), htmlMessage);
                                        // Clear text box and focus.
                                        $('#message').val('');
                                        $('#message').focus();
                                    });
                                }
                                else {
                                    console.log('Create chat failed');
                                }
                            })
            }
            function init() {
                acd.server.isOpen(skill).done(function (acdIsOpen) {
                    if (acdIsOpen){
                        console.log('ACD ' + skill + ' is open')
                        registerChat()
                    }
                    else {
                        console.log('ACD ' + skill + ' is closed')
                    }
                })
            };                     
            
            // Create a function that the server can call to add a message.
            chat.client.addMessage = function (participant, htmlMessage) {
                addMessage(participant, htmlMessage);
            };
            // Create a function that the server calls if the state of the chat changes.
            chat.client.onStateChanged = function (oldState, newState) {
                console.log('State changed: ' + newState);
            };
            // Create a function that the server calls if the position of the chat changes.
            chat.client.onPositionChanged = function (newPosition) {
                console.log('Position changed: ' + newPosition);
            };
            // Set initial focus to message text box.
            $('#message').focus();
            // Start the connection.
            $.connection.hub.start().done(function () {
                init();         
            });
        });
    </script>