AJAX chatsysteem met PHP (uitbreiding)

Na mijn AJAX chatsysteem tutorial kreeg ik plots de vraag of het mogelijk was dat er automatisch naar beneden wordt gescrolld indien er een nieuw bericht bij komt.

Met het systeem dat we nu hebben is dit enorm eenvoudig te realiseren en ik zal dan ook even zeggen wat je moet doen.

Heads up!

Dit voorbeeld sluit aan bij deze tutorial.

In het JavaScript gedeelte is er ergens sprake van een functie

displayMessages

. Deze gaan we een klein beetje aanpassen zodat er automatisch naar beneden gescrolld wordt bij een nieuw bericht.

function displayMessages(msgs) {
    if (msgs != null && msgs.length >= 1) {
        timeEpoch = msgs[msgs.length - 1].timestamp;
        $("#tmpMsg").hide();
        elem = $("#msgs");
        keepScroll = (elem[0].scrollHeight == elem.outerHeight());
        for (i in msgs) {
            $("#tmpMsg").append("[" + msgs[i].display + "]  " + msgs[i].msg + "<br />");
        }
        $("#tmpMsg").fadeIn("slow", function() { 
            $("#msgs").append($("#tmpMsg").html());
            $("#tmpMsg").remove();
            $("#msgs").append('<div id="tmpMsg"></div>');

            if (!scrollBottom || keepScroll) {
                elem[0].scrollTop = elem[0].scrollHeight;
                scrollBottom = true;
            }
        });
    }
}

De controle ofdat er een nieuw bericht is, is eenvoudig te maken door de oude timeEpoch variabele te vergelijken met de nieuwe timeEpoch waarde. Indien deze verschillen is er een nieuw bericht bij gekomen (gemakkelijk toch).

Deze controle voegen we toe aan de keepScroll variabele en dat is alles wat er moet gebeuren.

function displayMessages(msgs) {
    if (msgs != null && msgs.length >= 1) {
        keepScroll = (timeEpoch != msgs[msgs.length - 1].timestamp);
        timeEpoch = msgs[msgs.length - 1].timestamp;
        $("#tmpMsg").hide();
        elem = $("#msgs");
        keepScroll |= (elem[0].scrollHeight == elem.outerHeight());
        for (i in msgs) {
            $("#tmpMsg").append("[" + msgs[i].display + "]  " + msgs[i].msg + "<br />");
        }
        $("#tmpMsg").fadeIn("slow", function() { 
            $("#msgs").append($("#tmpMsg").html());
            $("#tmpMsg").remove();
            $("#msgs").append('<div id="tmpMsg"></div>');

            if (!scrollBottom || keepScroll) {
                elem[0].scrollTop = elem[0].scrollHeight;
                scrollBottom = true;
            }
        });
    }
}

We moeten er natuurlijk wel voor zorgen dat de andere boolean expressie die we voorheen in

keepScroll

staken, niet alles overschrijft. Dit doen we door een

OR

operatie die rekening zal houden met beide situaties.

Tagged , , , , .

g00glen00b

Consultant at Cronos and Tech lead at Aquafin. Usually you can find me trying out new libraries and technologies. Loves both Java and JavaScript.