php - Chat system - vis sidste 10 linjer fra log. - Udvikleren.dk

Tags: php ajax jquery

Bruger #13473 @ 14.12.14 22:55

Jeg har gang i et chat-system, og det er første gang jeg laver et, så har brugt en tutorial..

må være ærlig og sige at jeg forstår kun ca det halve af hvad jeg har stykket sammen her..

Men det virker fint, men lige nu, der vises hele loggen i mit chat-vindue.

min log.html ser ud ca sådan her:

HTML kode

 <div class='msgln'>(8:05 PM) <b>Brian</b>: sdf<br></div><div class='msgln'>(8:05 PM) <b>Brian</b>: <br></div><div class='msgln'>(8:05 PM) <b>Brian</b>: <br></div><div class='msgln'>(8:05 PM) <b>Brian</b>: d<br></div><div class='msgln'>(8:05 PM) <b>Brian</b>: sdf<br></div><div class='msgln'>(8:05 PM) <b>Arne</b>: Jo jo mand...<br></div><div class='msgln'><i>User Arne has left the chat session.</i><br></div><div class='msgln'><i>User Arne er kommet på chatten.</i><br></div><div class='msgln'><i>User Brian er kommet på chatten.</i><br></div><div class='msgln'><i>Brian er kommet på chatten.</i><br></div><div class='msgln'><i>Brian er kommet på chatten.</i><br></div>

Jeg har et ajax script, finder loggen, og smider det hele i et chatvindue...

JScript kode

 function loadLog(){        
         var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height before the request
         $.ajax({
             url: "log.html",
             cache: false,
             success: function(html){
                 
                 $("#chatbox").html(html); //Insert chat log into the #chatbox div    
                 
                 //Auto-scroll            
                 var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height after the request
                 if(newscrollHeight > oldscrollHeight){
                     $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
                 }                
               },
         });
     }

Men hvordan får jeg den til at vise, kun de sidste 10 linjer, altså de sidste 10 gange at <br> har optrådt?

har prøvet med noget slice og split værk, men har svært ved at få det til..

på forhånd tak

6 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 1 karma

Sorter efter stemmer Sorter efter dato

Bruger #16075 @ 14.12.14 23:33

1.223

så har brugt en tutorial..

hvilken ?? kom med et link.

er HTML kode hele loggen ?? ( log.html ), eller er der mere i filen, som Stefan Svensson er inde på er den ikke optimal

har du dit eks liggen online ?? (gerne skåret ned til minimum)

tilføjet 00:17

prøv denne

log.html

Kode

<div class='msgln'>(8:05 PM) <b>Brian</b>: sdf<br></div>
<div class='msgln'>(8:05 PM) <b>Brian</b>: <br></div>
<div class='msgln'>(8:05 PM) <b>Brian</b>: <br></div>
<div class='msgln'>(8:05 PM) <b>Brian</b>: d<br></div>
<div class='msgln'>(8:05 PM) <b>Brian</b>: sdf<br></div>
<div class='msgln'>(8:05 PM) <b>Arne</b>: Jo jo mand...<br></div>
<div class='msgln'><i>User Arne has left the chat session.</i><br></div>
<div class='msgln'><i>User Arne er kommet på chatten.</i><br></div>
<div class='msgln'><i>User Brian er kommet på chatten.</i><br></div>
<div class='msgln'><i>Brian er kommet på chatten.</i><br></div>
<div class='msgln'><i>ronny er kommet på chatten.</i><br></div>
<div class='msgln'><i>rip er kommet på chatten.</i><br></div>
<div class='msgln'><i>rap er kommet på chatten.</i><br></div>
<div class='msgln'><i>rup er kommet på chatten.</i><br></div>
<div class='msgln'><i>anders er kommet på chatten.</i><br></div>

html fil (index.html)

Kode

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>demo</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <style type="text/css">
        </style>
        <script type="text/javascript">
            function loadLog() {
                var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height before the request
                $.ajax({
                    url: "log.html",
                    cache: false,
                    success: function (html) {
                        var ar = html.split("</div>");  // laver det til et array og fjerner også div tagget
                        ar = ar.reverse(); // vender arrayet om
                        // alert(ar[6]);
                        var str = "";
                        for (var i = 0, lng = (ar.length > 10) ? 10 : ar.length; i <= lng; i++) {
                            str += ar[i] + "</div>"; // indsætter linje og det tidligere fjernet div tag
                        }
                        $("#chatbox").html(str); //Insert chat log into the #chatbox div
                        //Auto-scroll
                        var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height after the request
                        if (newscrollHeight > oldscrollHeight) {
                            $("#chatbox").animate({scrollTop: newscrollHeight}, 'normal'); //Autoscroll to bottom of div
                        }
                    },
                });
            }
        </script>
    </head>
    <body>
        <div id="chatbox"></div>
        <script type="text/javascript">
            loadLog();
        </script>
    </body>
</html>

Indlæg senest redigeret d. 15.12.2014 00:17 af Bruger #16075

Bruger #955 @ 14.12.14 23:25

1.624

Det er nok ikke svaret du leder efter, men lav din log om. Lad være med at gemme markups o.l.. Det er ikke optimalt.

Bruger #13473 @ 15.12.14 11:28

Ronny, det funger rigtig godt

Men lige nu, der kommer det nyeste svar øvest - og i en traditionel chat, vil det nyeste svar jo komme nederst - og scrolleren scroller også automatisk ned, hvilket bliver lidt noget rod, når det nyeste svar kommer øverst..

er der en nem lille ting jeg kan ændre?

Bruger #955 @ 15.12.14 11:44

1.624

Ronny, det funger rigtig godt

Men lige nu, der kommer det nyeste svar øvest - og i en traditionel chat, vil det nyeste svar jo komme nederst - og scrolleren scroller også automatisk ned, hvilket bliver lidt noget rod, når det nyeste svar kommer øverst..

er der en nem lille ting jeg kan ændre?

Hint:

PHP kode

 ar = ar.reverse(); // vender arrayet om

Bruger #13473 @ 15.12.14 11:53

Har prøvet at fjerne reverse, men så viser den i stedet kun de første 10 linjer i loggen, og man kan slet ikke se de nyeste 10 linjer...

edit:

fandt ud af

vendte bare tallene i for løkken om.

Indlæg senest redigeret d. 15.12.2014 11:56 af Bruger #13473

Bruger #16075 @ 15.12.14 12:39

1.223

det vil være bedre at splitte på \n (ny linje) !! istedet for </div> ??

jeg har prøvet at forbedre din logfil så den er mere optimeret (du sparer 29 tegn pr linje)

Kode

(8:05 PM) <b>Brian</b>: sdf
(8:05 PM) <b>Brian</b>: 
(8:05 PM) <b>Brian</b>: 
(8:05 PM) <b>Brian</b>: d
(8:05 PM) <b>Brian</b>: sdf
(8:05 PM) <b>Arne</b>: Jo jo mand...
<i>User Arne has left the chat session.</i>
<i>User Arne er kommet på chatten.</i>
<i>User Brian er kommet på chatten.</i>
<i>Brian er kommet på chatten.</i>
<i>ronny er kommet på chatten.</i>
<i>rip er kommet på chatten.</i>
<i>rap er kommet på chatten.</i>
<i>rup er kommet på chatten.</i>
<i>anders er kommet på chatten.</i>

javascript function til den forbedret logfil
som du kan se har jeg lagt den repeterende div og br ned i forløkken

Kode

function loadLog() {
    var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height before the request
    $.ajax({
        url: "log.html",
        cache: false,
        success: function (html) {
            var ar = html.split("\n");  // laver det til et array, ved hvert linje skift                        


            var str = "";
            for (var lng = ar.length, start = (lng > 10) ? lng - 10 : 0; start < lng; start++) {
                str += "<div class='msgln'>" + ar[start] + "<br></div>"; // indsætter linje 
            }
            $("#chatbox").html(str); //Insert chat log into the #chatbox div
            //Auto-scroll
            var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height after the request
            if (newscrollHeight > oldscrollHeight) {
                $("#chatbox").animate({scrollTop: newscrollHeight}, 'normal'); //Autoscroll to bottom of div
            }
        },
    });
}

hvordan laver du din log fil ?? (formindelig i php)

jeg ville nok kalde log filen log.txt, så man ikke er i tvivl om det er en text fil og ikke et html document med heaer, body osv

Chat system - vis sidste 10 linjer fra log.

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler