Auto Refresh Na Promenu Stanja

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Imam jednu PHP skriptu pracenu JavaScript-om koje se sluze za kontrolu GPIO Pinova na Raspberry Pi-u putem interneta. E sada. Fajl GPIO.PHP sluzi da preuzme status sa Raspberry-ja o tome da li su pinovi HIGH ili LOW. Kada se pristupi preko interneta fajl INDEX.PHP prikaze dugmice koji po kliku postave odredjeni pin na HIGH ili LOW. Tu je i SCRIPT.JS koji bez refresovanja stranice nakon sto GPIO.PHP dojavi da je status promenjen postavi dugmice na GREEN ili RED, e sada ako ja npr. sa mobilnog postavim neki pin na HIGH na racunaru gde je skripta ucitana dugme za taj pin ostaje na RED. Sada bih ja zeleo da nekako izmenim JS i/ili dodam jos nesto kako bi se status osvezavao svaki put kada dodje do promene stanja bez refresovanja stranice. Dakle ako se ko razume i zeli da pomogne dobrodosao je, probacu sve sto preporucite. Pozz
SCRIPT.JS:

1. //JavaScript, use pictures as buttons, sends and receives values to/from the Rpi
2. //These are all the buttons
3. var button_0 = document.getElementById("button_0");
4. var button_1 = document.getElementById("button_1");
5. var button_2 = document.getElementById("button_2");
6. var button_3 = document.getElementById("button_3");
7. var button_4 = document.getElementById("button_4");
8. var button_5 = document.getElementById("button_5");
9. var button_6 = document.getElementById("button_6");
10. var button_7 = document.getElementById("button_7");
11.  
12.  
13. //this function sends and receives the pin's status
14. function change_pin (pin, status) {
15.    //this is the http request
16.    var request = new XMLHttpRequest();
17.    request.open( "GET" , "data/gpio.php?pin=" + pin + "&status=" + status );
18.    request.send(null);
19.    //receiving information
20.    request.onreadystatechange = function () {
21.       if (request.readyState == 4 && request.status == 200) {
22.          return (parseInt(request.responseText));
23.       }
24.    //test if fail
25.       else if (request.readyState == 4 && request.status == 500) {
26.          alert ("server error");
27.          return ("fail");
28.       }
29.    //else
30.       else { return ("fail"); }
31.    }
32. }
33.  
34. //these are all the button's events, it just calls the change_pin function and updates the page in function of the return of it.
35. button_0.addEventListener("click", function () {
36.    //if red
37.    if ( button_0.alt === "off" ) {
38.       //use the function
39.       var new_status = change_pin ( 0, 0);
40.       if (new_status !== "fail") {
41.          button_0.alt = "on"
42.          button_0.src = "data/img/green/green_0.png";
43.          return 0;
44.          }
45.       }
46.    //if green
47.    if ( button_0.alt === "on" ) {
48.       //use the function
49.       var new_status = change_pin ( 0, 1);
50.       if (new_status !== "fail") {
51.          button_0.alt = "off"
52.          button_0.src = "data/img/red/red_0.png";
53.          return 0;
54.          }
55.       }
56. } );
57.    
58. button_1.addEventListener("click", function () {
59.    //if red
60.    if ( button_1.alt === "off" ) {
61.       //use the function
62.       var new_status = change_pin ( 1, 0);
63.       if (new_status !== "fail") {
64.          button_1.alt = "on"
65.          button_1.src = "data/img/green/green_1.png";
66.          return 0;
67.          }
68.       }
69.    //if green
70.    if ( button_1.alt === "on" ) {
71.       //use the function
72.       var new_status = change_pin ( 1, 1);
73.       if (new_status !== "fail") {
74.          button_1.alt = "off"
75.          button_1.src = "data/img/red/red_1.png";
76.          return 0;
77.          }
78.       }
79. } );
80.    
81. button_2.addEventListener("click", function () {
82.    //if red
83.    if ( button_2.alt === "off" ) {
84.       //use the function
85.       var new_status = change_pin ( 2, 0);
86.       if (new_status !== "fail") {
87.          button_2.alt = "on"
88.          button_2.src = "data/img/green/green_2.png";
89.          return 0;
90.          }
91.       }
92.    //if green
93.    if ( button_2.alt === "on" ) {
94.       //use the function
95.       var new_status = change_pin ( 2, 1);
96.       if (new_status !== "fail") {
97.          button_2.alt = "off"
98.          button_2.src = "data/img/red/red_2.png";
99.          return 0;
100.          }
101.       }
102. } );
103.    
104. button_3.addEventListener("click", function () {
105.    //if red
106.    if ( button_3.alt === "off" ) {
107.       //use the function
108.       var new_status = change_pin ( 3, 0);
109.       if (new_status !== "fail") {
110.          button_3.alt = "on"
111.          button_3.src = "data/img/green/green_3.png";
112.          return 0;
113.          }
114.       }
115.    //if green
116.    if ( button_3.alt === "on" ) {
117.       //use the function
118.       var new_status = change_pin ( 3, 1);
119.       if (new_status !== "fail") {
120.          button_3.alt = "off"
121.          button_3.src = "data/img/red/red_3.png";
122.          return 0;
123.          }
124.       }
125. } );
126.    
127. button_4.addEventListener("click", function () {
128.    //if red
129.    if ( button_4.alt === "off" ) {
130.       //use the function
131.       var new_status = change_pin ( 4, 0);
132.       if (new_status !== "fail") {
133.          button_4.alt = "on"
134.          button_4.src = "data/img/green/green_4.png";
135.          return 0;
136.          }
137.       }
138.    //if green
139.    if ( button_4.alt === "on" ) {
140.       //use the function
141.       var new_status = change_pin ( 4, 1);
142.       if (new_status !== "fail") {
143.          button_4.alt = "off"
144.          button_4.src = "data/img/red/red_4.png";
145.          return 0;
146.          }
147.       }
148. } );
149.    
150. button_5.addEventListener("click", function () {
151.    //if red
152.    if ( button_5.alt === "off" ) {
153.       //use the function
154.       var new_status = change_pin ( 5, 0);
155.       if (new_status !== "fail") {
156.          button_5.alt = "on"
157.          button_5.src = "data/img/green/green_5.png";
158.          return 0;
159.          }
160.       }
161.    //if green
162.    if ( button_5.alt === "on" ) {
163.       //use the function
164.       var new_status = change_pin ( 5, 1);
165.       if (new_status !== "fail") {
166.          button_5.alt = "off"
167.          button_5.src = "data/img/red/red_5.png";
168.          return 0;
169.          }
170.       }
171. } );
172.    
173. button_6.addEventListener("click", function () {
174.    //if red
175.    if ( button_6.alt === "off" ) {
176.       //use the function
177.       var new_status = change_pin ( 6, 0);
178.       if (new_status !== "fail") {
179.          button_6.alt = "on"
180.          button_6.src = "data/img/green/green_6.png";
181.          return 0;
182.          }
183.       }
184.    //if green
185.    if ( button_6.alt === "on" ) {
186.       //use the function
187.       var new_status = change_pin ( 6, 1);
188.       if (new_status !== "fail") {
189.          button_6.alt = "off"
190.          button_6.src = "data/img/red/red_6.png";
191.          return 0;
192.          }
193.       }
194. } );
195.    
196. button_7.addEventListener("click", function () {
197.    //if red
198.    if ( button_7.alt === "off" ) {
199.       //use the function
200.       var new_status = change_pin ( 7, 0);
201.       if (new_status !== "fail") {
202.          button_7.alt = "on"
203.          button_7.src = "data/img/green/green_7.png";
204.          return 0;
205.          }
206.       }
207.    //if green
208.    if ( button_7.alt === "on" ) {
209.       //use the function
210.       var new_status = change_pin ( 7, 1);
211.       if (new_status !== "fail") {
212.          button_7.alt = "off"
213.          button_7.src = "data/img/red/red_7.png";
214.          return 0;
215.          }
216.       }
217. } );

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Citat:Tu je i SCRIPT.JS koji bez refresovanja stranice nakon sto GPIO.PHP dojavi da je status promenjen postavi dugmice na GREEN ili RED, e sada ako ja npr. sa mobilnog postavim neki pin na HIGH na racunaru gde je skripta ucitana dugme za taj pin ostaje na RED.

Za početak, napisao si da SCRIPT.JS bez refreshovanja stranice vrši promenu dugmića nakon što mu GPIO.PHP to javi. Gde je taj deo koda u SCRIPT.JS?

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Nismo se razumeli. Ta JS skripta bez refreshovanja promeni sliku u GREEN ili RED na osnovu HIGH i LOW statusa koje GPIO.PHP prijavi. E sada je problem ako neko drugi sa svog racunara setuje neki pin na HIGH kod mene u browseru se status prikazuje kao LOW ili ti RED. Ja hocu da kada neko klikne sa racunara status bude promenjen na svim ostalim konektovanim racunarima. Pozz

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

To se ranije radilo sa long-polling i comet ajax metodama.
http://en.wikipedia.org/wiki/Comet_(programming)
HTML5 je uveo web sockete (layer preko TCP-a) baš radi soft real-time komunikacije kakvu ti želiš.
Setup je lakši za ajax jer već imaš sve neophodno, potreban ti je samo kod, ali znatno veći kod u odnosu na web sockete sa kojima se jelte, lakše radi, ali je setup komplikovaniji i mnogo više zavisi od mogućnosti tog backenda na kome radi tvoj PHP.

Drugim rečima, nauči da barataš sa ovim pomenutim i znaćeš kako da napraviš komponente reaktivnim.

Postoji i još jedan pristup ovome, a to je bukvalno izdvojeni servis kao RPC server/klijent na koji se kačiš i sa svog servera (sa PHP-om) i sa klijenta (Javascriptom). Moja preporuka ti je [Link mogu videti samo ulogovani korisnici] (imaš još mnogo sličnih).

p.s. ja opet iz tvoje druge poruke mogu da zaključim da ti nisi pejstovao sav kod jer pominješ da tvoj JS bez refreshovanja (bez manuelnog requesta ka php-u) menja podatke na stranici? Je l postoji neko dugme umesto refresha koje to isto radi samo što update radi putem Ajaxa?
U suštini na tren razumem da već imaš polovinu posla napravljeno i da ti fali samo PHP koji treba da triggeruje to što si već napravio, a na tren, a iz tvojeg poslednjeg posta isto razumem da nemaš ništa što radi komunikaciju backenda i klijenta ili pak ja uopšte ne kontam šta ti pokrećeš na Raspberry Pi-u...

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Evo ovako, imam sledece:

INDEX.PHP:

1. <!DOCTYPE html>
2. <html>
3.     <head>
4.         <meta charset="utf-8" />
5.         <title>Raspberry Pi Gpio</title>
6.     </head>
7.     <link rel="stylesheet" type="text/css" href="data/style.css" media="screen">
8.     <body>
9.     <h2><center>Dobrodošli u Smart Home Kontrolni Centar</center><h2>
10.    <br />
11.    <br />   
12.      <!-- On/Off button's picture -->
13.     <center><?php
14.     //this php script generate the first page in function of the gpio's status
15.     $status = array (0, 0, 0, 0, 0, 0);
16.     for ($i = 0; $i < count($status); $i++) {
17.       //set the pin's mode to output and read them
18.       system("gpio mode ".$i." out");
19.       exec ("gpio read ".$i, $status[$i], $return );
20.       //if off
21.       if ($status[$i][0] == 0 ) {
22.       echo ("<img id='button_".$i."' src='data/img/red/red_".$i.".png' width='250' height='250' alt='off'/>");
23.       }
24.       //if on
25.       if ($status[$i][0] == 1 ) {
26.       echo ("<img id='button_".$i."' src='data/img/green/green_".$i.".png' width='250' height='250' alt='on'/>");
27.       }   
28.     }
29.     ?></center>
30.    <br />
31.    <br />
32.    <center><p>Autor projekta: Miljan Ilić, OŠ"Branko Radičević" Vranje<p/></center>
33.    
34.     <!-- javascript -->
35.     <script src="script.js"></script>
36.     </body>
37. </html>