[JavaScript] Ajax Chat - Performance

[bärlina]

Original geschrieben von wahsaga
*seufz*
Also mit der Aufgabe wohl doch noch ein wenig übernommen ...?

naja... wenn ich die sache 'in meinen augen' anständig beenden möchte, dann muss ich dem wohl zustimmen

und das am schluss ey... sowas blödes
hab ja sonst alles fertig... läuft auch wunderbar...

ok....
bis nach den hinweis von dir, nicht immer alle daten zu laden, sondern nur den letzten + an die alten anfügen im html....

wenn ich bedenke, dass diese perfomancetechnisch ne gewaltige verbesserung wäre komm ich mit meinem eigenen ehrgeiz gar nicht drum rum... wie ich das allerdings löse....
aber dein hinweis klang nach erfahrung... vielleicht hast du ja den richtigen tipp für mich... denn ohne reload der seite weiß ich das anfügen nicht bewältigen...


ok... so ... nun sind schon 2 probleme...statt eins weniger

[wahsaga]

Wenn man innerHTML etwas zuweisen kann, kann man ja vielleicht auch anstatt innerHTML komplett zu überschreiben, nur ein kleines bisschen was an innerHTML anfügen ...?

[bärlina]

Original geschrieben von wahsaga
Wenn man innerHTML etwas zuweisen kann, kann man ja vielleicht auch anstatt innerHTML komplett zu überschreiben, nur ein kleines bisschen was an innerHTML anfügen ...?

okay... der Hinweis hört sich so an, als wenn ich an dem javascript (ajaxscript) was abändern muss .... ich kenn mich damit zwar kaum aus, aber da ich das ajaxs script ja modifizieren mußte kenne ich das innerhtml .... hab sogar die probleme mit den umlauten und & usw gelöst..dank google..dafür mußte ich ja auch schon das script genauer anschauen....


ich werd mir das jetzt mal anschauen.... hab gestern ganze 13 std dran gesessen !!! und nichts verbessern können.. aber die aufgabe gehört bisher auch zu meinen schwersten ....


Status :

Problem 1 :
Textausgabe str für str erweitern, statt 20 rows ausgeben lassen


Problem 2 :
Textausgabe soll von unten nach oben laufen, wie bei jedem chat
die shoutbox läuft jedoch von oben nach unten

so.. ich tauch dann mal ins script

[bärlina]

@ wahsaga


*schäm*

ich bin leider nicht weiter gekommen ...
hab nun seit gestern um 16 uhr bis ebend dran gesessen...
aber leider konnte ich deinen hinweis bisher nicht umsetzen

könntest du das vielleicht für mich präzisieren ?

[wahsaga]

Original geschrieben von bärlina
könntest du das vielleicht für mich präzisieren ?

Was ...?

[bärlina]

wie ich mit dem innerHTML was anfüge, statt das div tag ständig zu überschreiben

[wahsaga]

Wie fügst du denn sonst an einen String in Javascript etwas an?

[bärlina]

Original geschrieben von wahsaga
Wie fügst du denn sonst an einen String in Javascript etwas an?

im moment noch gar nicht...nicht bewußt...
ist mein erster ausflug ins javascript.

werte die ich in javascript benötige übergebe ich mit

<?php echo "<script type=\"text/javascript\" src=\"chat_action.php?content=".$content."&language=".$language."" ></script>";?>

aber in javascript selber hab ich bisher keine strings übergeben ..oder doch... bin ich vielleicht nur durchn wind... in 2 tagen nur 6 std geschlafen.... aber leider verstehe ich bisher nur wenige bereiche des javascripts....

die leichten bereiche, geben sich ja auch leicht zu erkennen, wie das GET oder POST in load.-& savadata()


selbst wenn ich es erst mal nicht schaffe, vielleicht hat ja jemand zeit, mir den einen oder anderen bereich dieses ajaxs scriptes verständlich zu machen....

PS: die funktion start_chat(); ist mein erster js schritt und somit mein erstes js-script...

verzeiht mir also

chataction.php

<?php 
// Quelle: [url]http://www.devblog.de[/url]
// "Shoutbox als AJAX-Anwendung"
// Code darf frei verwendet werden
$content    = trim($_GET["content"]);
$language   = trim($_GET["language"]);
$leave_room = trim($_GET["leave_room"]);

// globale Instanz von XMLHttpRequest
echo "    var xmlHttp = false;      ";

// XMLHttpRequest-Instanz erstellen
// ... für Internet Explorer      ";
echo "    try {      ";
echo "        xmlHttp  = new ActiveXObject(\"Msxml2.XMLHTTP\");      ";
echo "    } catch(e) {      ";
echo "        try {      ";
echo "            xmlHttp  = new ActiveXObject(\"Microsoft.XMLHTTP\");      ";
echo "        } catch(e) {      ";
echo "            xmlHttp  = false;      ";
echo "        }      ";
echo "    }      ";
// ... für Mozilla, Opera und Safari
echo "    if (!xmlHttp  && typeof XMLHttpRequest != 'undefined') {      ";
echo "        xmlHttp = new XMLHttpRequest();      ";
echo "    }      ";

// aktuelle Daten laden
echo "    loadData();      ";

// alle 1 Sekunde neue Daten holen = 1000
echo "    setInterval(\"loadData()\",4000);      ";
//---- Datenbeschaffung vom Chat 
echo "function loadData()      ";
echo " { ";

echo "       if (xmlHttp)       ";
echo "       {            ";
echo "         xmlHttp.open('GET', 'output.php?content=".$content."&language=".$language."', true);      ";
echo "         xmlHttp.onreadystatechange = function ()";
echo "         {";
echo "                if (xmlHttp.readyState == 4) ";
echo "                   {";
echo "                    document.getElementById(\"asb_content\").innerHTML = xmlHttp.responseText;      ";
echo "                   }";
echo "         };      ";
echo "         xmlHttp.send(null);      ";
echo "       }      ";
echo "}";

//--- Datenspeicherung vom Chat 
echo "function saveData()      ";
echo "{";
echo "       if (xmlHttp) ";
echo "       {            ";
                // Hier werden daten gesendet an input.php
                echo "        xmlHttp.open('POST', 'input.php?content=".$content."&language=".$language."');  ";
                // Hier werden sonderzeichen und umlaute bearbeitet                             
                echo "        xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');      ";
                echo "        var txtMessage = escape(document.frmshoutbox.txtmessage.value);
                var txtName = encodeURIComponent(document.frmshoutbox.txtname.value);
                xmlHttp.send('name='+ txtName +'&message='+ txtMessage);      ";

echo "       }      ";

// Message-Eingabefelder leeren und Focus setzen
echo "    document.frmshoutbox.txtmessage.value = '';      ";
echo "    document.frmshoutbox.txtmessage.focus();      ";

echo "}";


//--- Start in Chat-Eingabe 
echo " function start_chat()";
echo "{";
echo " document.frmshoutbox.txtmessage.focus();";
echo "}";
?>

[wahsaga]

Original geschrieben von wahsaga
*seufz*
Zum x-ten verdampften Mal: Bei der Diskussion clientseitiger Probleme postet gefälligst auch den Code, wie er im Client ankommt - PHP-Code interessiert dabei kein Schwein!

Bitte selber ausfüllen.

[bärlina]

du meinst damit, wie der javascript code ohne das php echo beim benutzer aussieht ?

sorry... aber ich lern dazu ! versprochen !

<script language="JavaScript" type="text/javascript">
// globale Instanz von XMLHttpRequest
    var xmlHttp = false;      

// XMLHttpRequest-Instanz erstellen
// ... für Internet Explorer      
    try {      
        xmlHttp  = new ActiveXObject("Msxml2.XMLHTTP");      
    } catch(e) {      
        try {      
            xmlHttp  = new ActiveXObject("Microsoft.XMLHTTP");      
        } catch(e) {      
            xmlHttp  = false;      
        }      
    }      
// für Mozilla, Opera und Safari
    if (!xmlHttp  && typeof XMLHttpRequest != 'undefined') {      
        xmlHttp = new XMLHttpRequest();      
    }      

// aktuelle Daten laden
    loadData();      

// alle 1 Sekunde neue Daten holen = 1000
    setInterval("loadData()",4000);      
//--- Datenbeschaffung vom Chat
function loadData()   
 { 

       if (xmlHttp)     
       {       
         xmlHttp.open('GET', 'output.php?content=$content&language=$language', true);  
         xmlHttp.onreadystatechange = function ()
         {
                if (xmlHttp.readyState == 4)
                   {
                    document.getElementById("asb_content").innerHTML = xmlHttp.responseText;
                   }
         };      
         xmlHttp.send(null);      
       }      
}

//--- Datenspeicherung vom Chat
function saveData()     
{
       if (xmlHttp) 
       {            
                // Hier werden daten gesendet an input.php
                        xmlHttp.open('POST', 'input.php?content=$content&language=$language');                       
                        xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');   
                // Hier werden sonderzeichen und umlaute bearbeitet                               
                        var txtMessage = escape(document.frmshoutbox.txtmessage.value);
                var txtName = encodeURIComponent(document.frmshoutbox.txtname.value);
                xmlHttp.send('name='+ txtName +'&message='+ txtMessage);      

       }     

// Message-Eingabefelder leeren und Focus setzen
    document.frmshoutbox.txtmessage.value = '';     
    document.frmshoutbox.txtmessage.focus();      

}


//--- Cursor Start in Chat-Eingabe 
 function start_chat()
{
 document.frmshoutbox.txtmessage.focus();
}
</script> 

[jahlives]

Ich habe jetzt nicht alles durchgelesen aber im Grunde genommen will der topicstarter ja einen div ersetzen und zuvor den bereits enthaltenen Wert auslesen?

<script type="text/javascript">
<!--
var inhalt_alt = document.getElementById('asb_content').innerHTML;
var inhalt_neu = xmlHttp.responseText; 
document.getElementById('abs_content').innerHTML = inhalt_neu + inhalt_alt;
-->
</script> 

Gruss

tobi

[bärlina]

Original geschrieben von jahlives
Ich habe jetzt nicht alles durchgelesen aber im Grunde genommen will der topicstarter ja einen div ersetzen und zuvor den bereits enthaltenen Wert auslesen?

<script type="text/javascript">
<!--
var inhalt_alt = document.getElementById('asb_content').innerHTML;
var inhalt_neu = xmlHttp.responseText; 
document.getElementById('abs_content').innerHTML = inhalt_neu + inhalt_alt;
-->
</script> 

Gruss

tobi

okay... ich habs bei mir angetestet...irgendwo mach ich noch nen denkfehler... bei diesem vorgang brauch ich wohl noch den timestamp des letzten eintrags oder ?..sonst gibt das script imemr wieder die gleichen zeilen aus... und input ist mir so im moment auch nicht mehr möglich.....

[bärlina]

kann mir da noch jemand bei helfen ?
irgendwie läuft der teil bei mir merkwürdig...

auch der input bleibt dann wirkungslos

[bärlina]

problem mit innerHTML

Hi Leute, ich sitze noch immer an meinem chat und hab grad nen problem... eigentlich dachte ich es ganz leicht lösen zu können,
..und zwar wollte ich die länge einer textausgabe bestimmen..

mit substr().. wenn ich das jedoch einsetze wie im codeschnipsel,
dann funktioniert es nicht so...
denn statt den text zu kürzen, verschwindet der text ( beim xmlHttp.responseText?) wieder ist das innerhtml das problem ?

kann mir jemand helfen, wie das wirklich zu bewerkstelligen geht ?

// läd alle 4 sek.
...
var inhalt_alt = document.getElementById("asb_content").innerHTML;        
var inhalt_2 = inhalt_alt.substr(0,50);                                     
var inhalt_neu = xmlHttp.responseText;                                      
document.getElementById(("asb_content").innerHTML = inhalt_alt + inhalt_neu; 
... 

[wahsaga]

Re: problem mit innerHTML

Wozu weist du inhalt_2 einen Wert zu, wenn du den dann gar nicht mehr benutzt?

Und so lange dein Code noch offensichtliche Syntaxfehler enthält (in diesem Falle die doppelte Klammer in der letzten Zeile), bringe dies bitte erst mal in Ordnung, in dem du die Javascript-Konsole deines Browsers und ggf. auch eine Debug-Erweiterung wie bspw. FireBug verwendest - andere Leute schon vorher mit "funzt nicht"-Postings zu nerven, muss nämlich nicht sein.