Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JQuerty][JS] funkcja .get() powoduje zużycie 5GB ramu
lolq9
post 15.04.2019, 13:22:25
Post #1





Grupa: Zarejestrowani
Postów: 1
Pomógł: 0
Dołączył: 13.04.2019

Ostrzeżenie: (0%)
-----


Cześć!

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


  1. <?php
  2. $servername = "localhost";
  3. $username = "";
  4. $password = "";
  5. $dbname = "";
  6.  
  7. // Create connection
  8. $conn = mysqli_connect($servername, $username, $password, $dbname);
  9.  
  10. //echo str_replace("/data.php?", "", $_SERVER['REQUEST_URI']);
  11. //$sql = "SELECT id, x, y FROM Dane"; oryginal
  12. $param1 = str_replace("/data.php?", "", $_SERVER['REQUEST_URI']);
  13. $param2 = str_replace("%20"," ", $param1);
  14. $param3 = str_replace("%3C","<", $param2);
  15. $param4 = str_replace("%3E",">", $param3);
  16.  
  17. $sql=$param4;
  18. $result = $conn->query($sql);
  19.  
  20. $pt=array();
  21. if ($result->num_rows > 0) {
  22. // output data of each row
  23. while($row = mysqli_fetch_array($result)) {
  24.  
  25. $pt[]=array("x" =>$row['x'],"y" =>$row['y']);
  26. }
  27. }
  28. echo json_encode($pt, JSON_NUMERIC_CHECK);
  29.  
  30. ?>


index.php

  1. <script type="text/javascript">
  2. // pobierz to co wypluje i zapisz do zmiennej content
  3.  
  4. $(function () {
  5. function mysql(){
  6. var field1=document.getElementById("num1").value;
  7. var field2=document.getElementById("num2").value;
  8. var field3=document.getElementById("num3").value;
  9. if(field1<=0){
  10. field1=1;
  11. };
  12. if(field2<=0){
  13. field2=1;
  14. };
  15. if(field3<=0){
  16. field3=1;
  17. };
  18. if(field3<field2){
  19. field2=1;
  20. field3=1;
  21. document.getElementById("demo2").innerHTML = "Błędna wartość!";
  22. };
  23. var MySQL1;
  24. $.get("data.php?SELECT id, x, y FROM Dane "+"ORDER BY id DESC LIMIT "+field1, function( MySQL1 ) {
  25.  
  26. var przetwarzanie1 = JSON.parse(MySQL1);
  27. var probkiwykres1 = przetwarzanie1;
  28.  
  29. var str = MySQL1;
  30. var res = str.replace("[{", "");
  31. var res1 = res.replace("}]", "");
  32. var res2 = res1.replace(":", " = ");
  33. var res3 = res2.replace(":", " = ");
  34. var res4 = res3.slice(1,27);
  35. var res5 = res4.replace("x", "Czas");
  36. var res6 = res5.replace("y", "Temperatura");
  37.  
  38. document.getElementById("demo").innerHTML = res6;
  39.  
  40. var chart1 = new CanvasJS.Chart("chartContainer1", {
  41. title: {
  42. text: "Ostatnia wartosc"
  43. },
  44. axisY :{
  45. title: "Temperatura",
  46. titleFontSize: 18,
  47. suffix: " C"
  48. },
  49.  
  50. axisX :{
  51. title: "Czas",
  52. suffix: " s"
  53. },
  54. data: [{
  55. type: "line",
  56. dataPoints: probkiwykres1
  57. }]
  58. });
  59.  
  60. chart1.render();
  61. });
  62.  
  63. var MySQL2;
  64. $.get("data.php?SELECT id, x, y FROM Dane WHERE x BETWEEN "+field2+" AND "+field3, function( MySQL2 ) {
  65. var przetwarzanie2 = JSON.parse(MySQL2);
  66. var probkiwykres2 = przetwarzanie2;
  67.  
  68. var chart2 = new CanvasJS.Chart("chartContainer2", {
  69. title: {
  70. text: "Temperatura"
  71. },
  72. axisY :{
  73. title: "Temperatura",
  74. titleFontSize: 18,
  75. suffix: " C"
  76. },
  77. axisX :{
  78. title: "Czas",
  79. suffix: " s"
  80. },
  81. data: [{
  82. type: "line",
  83. dataPoints: probkiwykres2
  84. }]
  85. });
  86.  
  87. chart2.render();
  88. });
  89.  
  90. var MySQL3;
  91. $.get("data.php?SELECT id, x, y FROM Dane", function( MySQL3 ) {
  92. var przetwarzanie3 = JSON.parse(MySQL3);
  93. var probkiwykres3 = przetwarzanie3;
  94.  
  95. var chart3 = new CanvasJS.Chart("chartContainer3", {
  96. title: {
  97. text: "Temperatura"
  98. },
  99. axisY :{
  100. title: "Temperatura",
  101. titleFontSize: 18,
  102. suffix: " C"
  103. },
  104. axisX :{
  105. title: "Czas",
  106. suffix: " s"
  107. },
  108. data: [{
  109. type: "line",
  110. dataPoints: probkiwykres3
  111. }]
  112. });
  113.  
  114. chart3.render();
  115.  
  116. });
  117.  
  118. };
  119.  
  120. setInterval(mysql, 1000);
  121.  
  122. mysql();
  123.  
  124. });
  125. </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
Go to the top of the page
+Quote Post
gitbejbe
post 18.04.2019, 22:12:39
Post #2





Grupa: Zarejestrowani
Postów: 456
Pomógł: 49
Dołączył: 27.08.2012

Ostrzeżenie: (0%)
-----


co ja Ci mogę napisać.... z jeden strony nie chcę Ci klepać gotowca bo co mi z tego, a z drugiej bez gotowca przy Twoim poziomie wiedzy będziesz się dalej babrał bez sensu.

to że wykres ma się aktualizować co sekundę to nie jest problem, można tak zrobić i będzie to działało dobrze. Nad czym musisz popracować:

- robisz 3 requesty do serwera, po co ? wystarczy jeden, który zwróci Ci dane dla wszystkich wykresów. Pamiętaj że każdy kolejny request, to zapychacz dla serwera i przeglądarki.
- im wykres ma większą pulę danych do narysowania, tym jest "mniej wydajny", dlatego wraz z upływem czasu wzrasta zużycie zasobów. Rozwiązanie ? Ogranicz liczbę rysowanych punktów, np do max 100 - starsze usuwasz z puli. Są skrypty wykresów które mogą wydajnie pomieścić nawet setki tyś punktów, lecz raczej nie wykonuje się na nich tak częstych aktualizacji.
- teraz to może nie ma dla Ciebie znaczenia, ale należałoby odliczać czas do kolejnej aktualizacji dopiero po tym jak wykresy się zaktualizują - czyli wywołujesz funkcję która odpytuje serwer, czekasz na odpowiedź, aktualizujesz wykresy i dopiero odliczasz sekundę.
- koniecznie zacznij od zmiany tych kwiatków : $.get("data.php?SELECT id, x, y FROM Dane "+"ORDER BY id DESC LIMIT "+field1, function( MySQL1 ) {
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 18.06.2019 - 18:31