[JS, JQuery] Funkcja .get() powoduje zużycie 5GB ramu

0

Cześć!

Pracuję nad projektem studenckim, który ma na celu aktualizowanie na żywo wykresów wyświetlanych na stronie. Co mam:
data.php

    <?php
    $servername = "localhost";
    $username = "";
    $password = "";
    $dbname = "";
     
    // Create connection
    $conn = mysqli_connect($servername, $username, $password, $dbname);
     
    //echo str_replace("/data.php?", "", $_SERVER['REQUEST_URI']);
    //$sql = "SELECT id, x, y FROM Dane"; oryginal
    $param1 = str_replace("/data.php?", "", $_SERVER['REQUEST_URI']);
    $param2 = str_replace("%20"," ", $param1);
    $param3 = str_replace("%3C","<", $param2);
    $param4 = str_replace("%3E",">", $param3);
     
    $sql=$param4;
    $result = $conn->query($sql);
     
    $pt=array();
    if ($result->num_rows > 0) {
        // output data of each row
        while($row = mysqli_fetch_array($result)) {
     
    $pt[]=array("x" =>$row['x'],"y" =>$row['y']);
    	}
    }
    echo json_encode($pt, JSON_NUMERIC_CHECK);
     
    ?>

index.php

    <script type="text/javascript">
    // pobierz to co wypluje i zapisz do zmiennej content
     
    $(function () {
    function mysql(){
    		var field1=document.getElementById("num1").value;
    		var field2=document.getElementById("num2").value;
    		var field3=document.getElementById("num3").value;
    		if(field1<=0){
    			field1=1;
    		};
    		if(field2<=0){
    			field2=1;
    		};
    		if(field3<=0){
    			field3=1;
    		};
    		if(field3<field2){
    			field2=1;
    			field3=1;
    			document.getElementById("demo2").innerHTML = "Błędna wartość!";
    		};
    var MySQL1;
    $.get("data.php?SELECT id, x, y FROM Dane "+"ORDER BY id DESC LIMIT "+field1, function( MySQL1 ) {
     
    		var przetwarzanie1 = JSON.parse(MySQL1);
    		var probkiwykres1 = przetwarzanie1;
     
    		var str = MySQL1;
    		var res = str.replace("[{", "");
    		var res1 = res.replace("}]", "");
    		var res2 = res1.replace(":", " = ");
    		var res3 = res2.replace(":", " = ");
    		var res4 = res3.slice(1,27);
    		var res5 = res4.replace("x", "Czas");
    		var res6 = res5.replace("y", "Temperatura");
     
    		document.getElementById("demo").innerHTML = res6;
     
    		var chart1 = new CanvasJS.Chart("chartContainer1", {
                title: {
                    text: "Ostatnia wartosc"
                },
    			axisY :{
                    title: "Temperatura",
                    titleFontSize: 18,
                    suffix: " C"
                },
     
                axisX :{
                    title: "Czas",
                    suffix: " s"
                },
                data: [{
                    type: "line",
                    dataPoints: probkiwykres1
                }]
            });
     
            chart1.render();
    });
     
    var MySQL2;
    $.get("data.php?SELECT id, x, y FROM Dane WHERE x BETWEEN "+field2+" AND "+field3, function( MySQL2 ) {
    		var przetwarzanie2 = JSON.parse(MySQL2);
    		var probkiwykres2 = przetwarzanie2;
     
    		var chart2 = new CanvasJS.Chart("chartContainer2", {
                title: {
                    text: "Temperatura"
                },
    			axisY :{
                    title: "Temperatura",
                    titleFontSize: 18,
                    suffix: " C"
                },
                axisX :{
                    title: "Czas",
                    suffix: " s"
                },
                data: [{
                    type: "line",
                    dataPoints: probkiwykres2
                }]
            });
     
            chart2.render();
    });		
     
    var MySQL3;
    $.get("data.php?SELECT id, x, y FROM Dane", function( MySQL3 ) {
    		var przetwarzanie3 = JSON.parse(MySQL3);
    		var probkiwykres3 = przetwarzanie3;
     
    		var chart3 = new CanvasJS.Chart("chartContainer3", {
                title: {
                    text: "Temperatura"
                },
    			axisY :{
                    title: "Temperatura",
                    titleFontSize: 18,
                    suffix: " C"
                },
                axisX :{
                    title: "Czas",
                    suffix: " s"
                },
                data: [{
                    type: "line",
                    dataPoints: probkiwykres3
                }]
            });
     
            chart3.render();
     
    });	
     
    };		
     
    setInterval(mysql, 1000);		
     
    mysql();		
     
    });		
    </script>

W index.php wyświetlam również wykresy. Jak widać, w .get() generuje ścieżkę do data.php wraz za zapytaniem do MySQL. Wiem, że kod jest toporny i niebezpieczny, ale nie miałem wcześniej doczynienia z JS, a PHP+HTML coś tam liznąłem.
Kwestia jest taka, że po zostawieniu odpalonej strony w przeglądarce (Mozilla), po 15 minutach zużycie ramu sięga 5 GB. Na telefonie strona działa może pół minuty i wywala się przeglądarka.

Dlaczego zastosowałem takie rozwiązanie? Mam hosting home.pl i nie mogę zainstalować Node.JS do łączenia z MySQL w JS. Zatem poszedłem okrężną drogą. To jedyne rozwiązanie jakie udało mi się wykonać aby móc w czasie rzeczywistym wyświetlać dane na wykresie i manipulować przedziałami ich wyświetlania.

Pytanie: czy jest możliwość ogarnięcia tego w ten lub inny sposób, tak aby przeglądarka nie zapychała się? Jakieś zerowanie zmiennych? Wydawało mi się, że nowo pobrane wartości z dane.php do zmiennej będą ją nadpisywać, a wygląda na to, że tak nie jest.

Dziękuję za wszelką pomoc
Pozdrawiam

0

Mam hosting home.pl i nie mogę zainstalować Node.JS do łączenia z MySQL w JS

Dlaczego chciałbyś zastosować akurat Node? Równie dobrze możesz przecież dane przetwarzać w PHPie i zwracać już je wstępnie przygotowane.

0

W jaki sposób mogę utrzymać ciągły kontakt z MySQL za pomocą PHP? W dane.php gdzie jest tylko odwołanie do MySQL muszę przygotować dane za pomocą komendy

echo json_encode($pt, JSON_NUMERIC_CHECK);

a następnie w JS obrobić je do za pomocą

var przetwarzanie2 = JSON.parse(MySQL2);
var probkiwykres2 = przetwarzanie2;

żeby wykres mógł je wyświetlić.

Przykładowe dane generowane przez dane.php

[{"x":908,"y":24},{"x":907,"y":23},{"x":906,"y":43},{"x":905,"y":33},{"x":904,"y":32},{"x":903,"y":31},{"x":902,"y":30},{"x":901,"y":901},{"x":900,"y":900},{"x":800,"y":800},{"x":700,"y":700},{"x":600,"y":600},{"x":500,"y":500},{"x":350,"y":70},{"x":300,"y":30},{"x":98,"y":784},{"x":97,"y":776},{"x":96,"y":768},{"x":95,"y":760},{"x":94,"y":752},{"x":93,"y":744},{"x":92,"y":736},{"x":91,"y":728},{"x":90,"y":720},{"x":89,"y":712},{"x":88,"y":704},{"x":87,"y":696},{"x":86,"y":688},{"x":85,"y":680},{"x":84,"y":672},{"x":83,"y":664},{"x":82,"y":656},{"x":81,"y":648},{"x":80,"y":640},{"x":79,"y":632},{"x":78,"y":624},{"x":77,"y":616},{"x":76,"y":608},{"x":75,"y":600},{"x":74,"y":592},{"x":73,"y":584},{"x":72,"y":576},{"x":71,"y":568},{"x":70,"y":560},{"x":69,"y":552},{"x":68,"y":544},{"x":67,"y":536},{"x":66,"y":528},{"x":65,"y":520},{"x":64,"y":512}]

@ edit
Node chciałem użyć bo czytałem, że z jego pomocą mogę uzyskać bezpośrednie połączenie z MySQL w kodzie JS. I może wtedy to by lepiej hulało, a może i nie...

0

Co to znaczy utrzymać ciągły kontakt?
Dlaczego chciałbyś utrzymywać ciągły kontakt z MySQL?
To nie jest taki rodzaj bazy, w którym na bieżąco monitoruje się zmiany - powinieneś wykorzystać np. InfluxDB.

Node chciałem użyć bo czytałem, że z jego pomocą mogę uzyskać bezpośrednie połączenie z MySQL w kodzie JS. I może wtedy to by lepiej hulało, a może i nie...

Tak, po stronie backendu (tak samo jak działa PHP: na serwerze, nie w przeglądarce u klienta).

0

Utrzymać ciągły kontakt -> móc w czasie rzeczywistym pobierać wszystkie elementy z tabeli i aktualizować wykres bez konieczności przedładowania strony. Ostatecznie do MySQL podłączony będzie sterownik PLC Siemens, który będzie wpisywał tam swoje wartości procesowe.

1

Czy ja dobrze widzę? Przesylasz jawnie zapytania do bazy jako parametry urla?

Nie rób tak, bo jest to niebezpieczne (podatność na SQL injection).

0

Tak, ale jest to tylko pokazówka dla prowadzącego. On nie wnika jak to się dzieje, a moje doświadczenie i ograniczony czas sprawiają, że posiłkuję się najprostszym możliwym rozwiązaniem. Strona na chwilę obecną działa, ale 15 min jej używania zapycha ram. Chcę pogłębiać swoją wiedzę dlatego interesuje mnie jak temu zapobiec. Również ciekawi mnie, czy istnieje inne rozwiązanie na wysyłanie zapytań z odebraniem wartości cyklicznie, z jakimś interwałem.
Pierwsza wersja zakładała, że generowałem wykres w pliku data.php (tam gdzie wysyłam zapytanie i odbieram elementy MySQL), a następnie wczytuje je na stronkę główną funkcją .load() w interwałach. Jednak to rozwiązanie sprawiało, że wykres na stronie głównej migał z częstotliwością interwału.

1 użytkowników online, w tym zalogowanych: 0, gości: 1