Update status indicator voor lampjes

[SMC - FM]

Hallo,

Ik loop nu al een paar dagen te googlen zonder succes. Ik ben bezig met het maken van een site waar ik een aantal lichtjes aan en uit kan schakelen (combi met de k8055 van velleman) Iedere bezoeker kan de status van de lampjes zien (aan of uit) en deze aan of uitzetten. Maar nu wil ik eigenlijk ook hebben dat zodra gebruiker a lampje 1 aan zet, het statusplaatje (groen of wit bolletje) veranderd bij zowel gebruiker a als bij de gebruikers b en c naar 'aan' zodat de gebrukers gelijk kunnen zien dat de lamp aan staat. (tegelijkertijd had ik dus ook graag dat als gebruiker b lamp 2 uit doet, dit ook zichtbaar is bij gebruiker a en c) Ik heb een beetje ervaring met javascript, maar ben vrijwel een n00b als het op ajax aankomt. Waar moet ik ongeveer beginnen? want er moet dus een verbinding opgezet worden, naar de gebruikers als een gebruiker de status van de lamp aanpast.

Nog te volgen?
Iemand ideeën?

 

[That Guy]

Volg je niet helemaal, is dit wat je bedoelt:

Gebruiker A en B zitten tegelijkertijd op de website. Als gebruiker A iets veranderd, moet gebruiker B dit ook direct zien, en andersom.

In dat geval is het handigste om met WebSockets te werken, maar support daarvoor is een beetje slecht op het moment, en bovendien moet je een speciale server hebben. Een oplossing met XHR (ook wel 'AJAX') zou beter werken.

Waar precies haal je de data vandaan (als in: hoe krijgt de website door of er een lampje aan/uit staat)? Is het mogelijk deze aan een server-side script (bv: PHP) door te geven?




:thumb:

 

[SMC - FM]

Mijn excuses, Klopt precies hoe je het beschrijft. en indd vergeten erbij te vertellen dat de backend zogezegd in php draait, die verzorgt het daarwerkelijke werk. alles wordt in een mysql database opgeslagen.

Ik zat zelf indd ook al aan ajax te denken.

 

[That Guy]

Nou, dit is het plan:


Stel, dit is je database-tabel genaamd lampjes (1 staat voor aan, 0 staat voor uit)

id   status
---------
0    1
1    0
2    1
3    1
4    0

status.php retourneert de huidige status van een

<?php

   $lampje = isset($_GET['id']) ? $_GET['id'] : 0;   // hier moet wat opschoning gebeurren!

   $status = end(mysql_fetch_row(mysql_query('SELECT status FROM lampjes WHERE id = ' . $lampje)));

   echo $status;

?>

verander.php

<?php

   $lampje = isset($_GET['id']) ? $_GET['id'] : 0;   // hier moet wat opschoning gebeurren!

   mysql_query('UPDATE lampjes SET status = 1 - status WHERE id = ' . $lampje);
   // de 1 - status zorgt ervoor dat 1 '0' word, en 0 '1' word: 1 - 0 = 1, 1 - 1 = 0.

?>

nu kan je met wat XHR-magie deze bestanden aanroepen. Nu, om het voor gebruikers te laten lijken alsof ze in 'direct' contact staan (ie. lampjes gaan uit/aan als iemand anders dat doet) kan je om de zoveel seconden eens pollen naar elk lampje (met XHR naar status.php vragen dus). Als ze een lampje aan of uit zetten kan je verander.php aanroepen.

Noot wel dat als twee mensen verander.php net na elkaar ('tegelijkertijd' eigenlijk) aanroepen, er geen verandering te zien is!



Over de javascript code: zoiets kan je poll zijn:
[js]var xhr = new XMLHttpRequest();

function statusLampjeEen()
{
xhr.open('get', 'status.php?id=1', false);

xhr.addEventListener('readystatechange', function()
{
if(xhr.readyState == 4)
{
alert('status lampje 1: ' + this.responseText);
setTimeout(statusLampjeEen, 1000); // over een seconde weer eens pollen
}
}, false);

xhr.send();
}


// roep voor de 1e keer aan
statusLampjeEen();[/js]
Uiteraard zul je voor meerdere lampjes iets slimmers moeten bedenken dan x functies voor x lampjes, maar het gaat om het idee!


het veranderen van een lampje is nog makkelijker:
[js]var xhr = new XMLHttpRequest();

function veranderLampje(id)
{
xhr.open('get', 'verander.php?id=' + id, false);
xhr.send();
}[/js]

er is geen event listener nodig, want de php file stuurt niets terug!





:thumb: