Auteur Topic: webpage up-to-date houden zonder refresh  (gelezen 3454 keer)

0 leden en 1 gast bekijken dit topic.

Brownbear

  • DigitalPlace Lid
  • *
  • Berichten: 65
  • Karma: 3
    • Bekijk profiel
    • http://www.student.tue.nl/K/c.v.horssen/
webpage up-to-date houden zonder refresh
« Gepost op: november 04, 2015, 04:07:40 pm »
  • [+1]0
  • [-1]0
  • Hallo :)
    Ik zit eens wat aan te klooien met een webservertje, wat databasejes en websitejes, nu kwam ik op het idee om op een webpagina een tabel uit de database te laten zien. opzich geen probleem, mbv php een sql query gemaakt, allemaal mooi.Maar nu zou het leuk zijn als deze tabel up-to-date blijft, dus wanneer ik vanaf een andere pagina een nieuw item toe voeg, verwijder of edit in de database is het de bedoeling dat de persoon die het tabelletje aan het bekijken is deze wijziging ook te zien krijgt.. zonder te hoeven refreshen (en het liefst ook niet de hele pagina automatisch refreshen)Ideaal zou zijn als er een client-side scriptje komt draaien dat elke 5 minuten de database pollt, en vervolgens de changes "in fade" of in iedergeval met een leuk effectje in beeld brengt, maar dat gaat natuurlijk niet met php.
    mijn vraag is dus met welke client-side taal kan ik iets dergelijks gemakkelijk oplossen?

    xvilo

    • Global Moderator
    • Verslaafd DigitalPlace Lid
    • *****
    • Berichten: 2674
    • Karma: -44
      • Bekijk profiel
      • http://www.xvilo.com
    Re: webpage up-to-date houden zonder refresh
    « Reactie #1 Gepost op: november 04, 2015, 04:15:13 pm »
  • [+1]0
  • [-1]0
  • Dit is goed mogelijk met bijvoorbeeld jQuery en AJAX.
    Wat je kunt doen is een timer maken op bijvoorbeeld 10 seconden die pollt naar een php script die json uitvoert. Je kan daarna vervolgens de json of iets anders gemakkelijk er in laten faden met append.

    timer:
    setTimeout(function(){
      alert("Boom!");
    }, 2000);

    ajax en prepend:
    $.ajax({ 
                  type: 'post',
                  url: 'checkdb.php',
                  data: $(this).serialize(),
                  success: function(returnData) {
                  $('#data').prepend(returnData)
                  }
              });

    Heb je hier wat aan?


    Brownbear

    • DigitalPlace Lid
    • *
    • Berichten: 65
    • Karma: 3
      • Bekijk profiel
      • http://www.student.tue.nl/K/c.v.horssen/
    Re: webpage up-to-date houden zonder refresh
    « Reactie #2 Gepost op: november 04, 2015, 04:22:47 pm »
  • [+1]0
  • [-1]0
  • Heel erg bedankt! ik ga er eens wat mee proberen! ik laat je weten of het gelukt is

    xvilo

    • Global Moderator
    • Verslaafd DigitalPlace Lid
    • *****
    • Berichten: 2674
    • Karma: -44
      • Bekijk profiel
      • http://www.xvilo.com
    Re: webpage up-to-date houden zonder refresh
    « Reactie #3 Gepost op: november 04, 2015, 04:28:08 pm »
  • [+1]1
  • [-1]0
  • Dit is trouwens een stukje jQuery die ik heb gemaakt om bij een formchange deze te posten via AJAX en de data te returnen... Misschien heb je daar ook wat aan:
     $('form').change(function() 
             {
              console.log('Debug:');
              $.ajax({
                  type: 'post',
                  url: 'debug.php',
                  data: $(this).serialize(),
                  success: function(returnData) {
                  $('#debug').html(returnData)
                  }
              });
              return false;
             });


    Brownbear

    • DigitalPlace Lid
    • *
    • Berichten: 65
    • Karma: 3
      • Bekijk profiel
      • http://www.student.tue.nl/K/c.v.horssen/
    Re: webpage up-to-date houden zonder refresh
    « Reactie #4 Gepost op: november 04, 2015, 06:50:51 pm »
  • [+1]1
  • [-1]0
  • Yes! het was even vogelen, ik had nog nooit een client-side language gebruikt.
    Het wou maar niet werken, alles geprobeerd wat ik kon bedenken, wat bleek nou: ik was de script aankondiging in de head section vergeten -.-'
    (deze:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    Heel erg bedankt voor je hulp!

    xvilo

    • Global Moderator
    • Verslaafd DigitalPlace Lid
    • *****
    • Berichten: 2674
    • Karma: -44
      • Bekijk profiel
      • http://www.xvilo.com
    Re: webpage up-to-date houden zonder refresh
    « Reactie #5 Gepost op: november 04, 2015, 06:52:05 pm »
  • [+1]0
  • [-1]0
  • Yes! het was even vogelen, ik had nog nooit een client-side language gebruikt.
    Het wou maar niet werken, alles geprobeerd wat ik kon bedenken, wat bleek nou: ik was de script aankondiging in de head section vergeten -.-'
    (deze:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    Heel erg bedankt voor je hulp!

    Het is uiteindelijk gelukt?


    Brownbear

    • DigitalPlace Lid
    • *
    • Berichten: 65
    • Karma: 3
      • Bekijk profiel
      • http://www.student.tue.nl/K/c.v.horssen/
    Re: webpage up-to-date houden zonder refresh
    « Reactie #6 Gepost op: november 04, 2015, 08:20:30 pm »
  • [+1]0
  • [-1]0
  • Ja, het is gelukt :) thx!

    Buzzer

    • Ex-Moderator
    • Actief DigitalPlace Lid
    • **
    • Berichten: 853
    • Karma: 13
    • Nodeïst
      • Bekijk profiel
      • http://infamous-irc.com
    Re: webpage up-to-date houden zonder refresh
    « Reactie #7 Gepost op: november 05, 2015, 10:08:35 pm »
  • [+1]0
  • [-1]0
  • Nog een kleine opmerking erbij: de AJAX manier zoals xvilo voordoet is prima voor data die niet zo heel snel bijgewerkt hoeft te worden en was lange tijd sowieso de enige manier om überhaupt extra data van de server te ontvangen nadat de pagina al is geladen. Maar als je echt een "realtime" applicatie gaat maken waarbij het belangrijk is dat wijzigingen zo snel mogelijk zichtbaar zijn (denk aan een beurs monitor, collaboration software, ...) wil je eigenlijk dat de server nieuwe informatie naar de browser kan sturen (push) in plaats van dat je erom moet vragen (poll). Tegenwoordig zijn daar ook technieken voor, dit kan bijvoorbeeld met websockets. Dit is wel lastiger toe te passen dan een polling based systeem, omdat er op de server constant een service moet draaien die de sockets beheert. Bij veel shared webhosting is dat al een probleem omdat je daar meestal niet zomaar eigen processen mag starten. De simpelere techniek genaamd long polling is makkelijker toe te passen in beperkte omgevingen, daarvoor hoef je alleen de HTTP request timeout wat te kunnen oprekken.
    « Laatst bewerkt op: november 05, 2015, 10:12:30 pm door Buzzer »

    グーグル翻訳はうまく翻訳できませんので、グーグル翻訳使用してこの文章を翻訳しないでください。また、任天堂は最高です。

    Brownbear

    • DigitalPlace Lid
    • *
    • Berichten: 65
    • Karma: 3
      • Bekijk profiel
      • http://www.student.tue.nl/K/c.v.horssen/
    Re: webpage up-to-date houden zonder refresh
    « Reactie #8 Gepost op: november 06, 2015, 08:32:03 am »
  • [+1]0
  • [-1]0
  • Bedankt voor je reactie! Een eigen process draaien op de webserver is geen probleem, gezien de server op een vm op mijn eigen pc draait (even als de dns en database servers) maar zoals ik beschreef in de originele post: hij hoeft maar eens in de 5 a 10 minuten te updaten. Al klinkt het wel als een leuk consept om eens uit te proberen, ga ik zeker wat dieper in kijken! Maar niet tot dit projectje af is, vooral omdat (zoals eerder aangegeven) ik hiervoor nog nooit met client-side talen heb gewerkt en ik er behoorlijk moeite mee heb. Al lukt het meeste toch wel :)

    Wat ik wel leuk zou vinden: als ik nu een syntax fout maak in de php file, (of in het ajax script) runt het ajax script gewoon helemaal niet, en geeft hij ook geen fouten en feedback over de php fout, kan dat op enige manier aan gezet worden?
    Ik bedenk me nu ook meteen dat dat misschien wel een server instelling is, zal daar vanmiddag even naar kijken

    xvilo

    • Global Moderator
    • Verslaafd DigitalPlace Lid
    • *****
    • Berichten: 2674
    • Karma: -44
      • Bekijk profiel
      • http://www.xvilo.com
    Re: webpage up-to-date houden zonder refresh
    « Reactie #9 Gepost op: november 06, 2015, 09:52:42 am »
  • [+1]0
  • [-1]0
  • Dat soort dingen kun je ook leuk doen met NodeJS. Daar is buzzer helemaal fan van de laatste tijd!

    Met NodeJS maak je van JavaScript een server Side taal. Het is ook goed te gebruiken voor realtime data applicatie's!


    Ik ben een swagboy 6s plus met Tapatalk


    Buzzer

    • Ex-Moderator
    • Actief DigitalPlace Lid
    • **
    • Berichten: 853
    • Karma: 13
    • Nodeïst
      • Bekijk profiel
      • http://infamous-irc.com
    Re: webpage up-to-date houden zonder refresh
    « Reactie #10 Gepost op: november 06, 2015, 11:00:04 pm »
  • [+1]0
  • [-1]0
  • Citaat
    Bedankt voor je reactie! Een eigen process draaien op de webserver is geen probleem, gezien de server op een vm op mijn eigen pc draait (even als de dns en database servers) maar zoals ik beschreef in de originele post: hij hoeft maar eens in de 5 a 10 minuten te updaten. Al klinkt het wel als een leuk consept om eens uit te proberen, ga ik zeker wat dieper in kijken! Maar niet tot dit projectje af is, vooral omdat (zoals eerder aangegeven) ik hiervoor nog nooit met client-side talen heb gewerkt en ik er behoorlijk moeite mee heb. Al lukt het meeste toch wel :)

    Aan de clientkant valt dit met een goede library juist heel erg mee. Met bijvoorbeeld socket.io kan het zo simpel zijn:
    var socket = io();
    socket.on('message', function(msg) {
        $('#messages').append($('<p></p>').text(msg));
    });
    De serverkant daarentegen is lastiger, vooral omdat je service altijd direct moet weten wat er wanneer verandert en welke client(s) dat te horen moeten krijgen.
    Citaat
    Wat ik wel leuk zou vinden: als ik nu een syntax fout maak in de php file, (of in het ajax script) runt het ajax script gewoon helemaal niet, en geeft hij ook geen fouten en feedback over de php fout, kan dat op enige manier aan gezet worden?
    Ik bedenk me nu ook meteen dat dat misschien wel een server instelling is, zal daar vanmiddag even naar kijken

    Error reporting is inderdaad een configuratieoptie van PHP, in het specifiek display_errors (of er uberhaupt iets weergegeven moet worden) en error_reporting (bitmask voor welke soorten errors worden weergegeven). Deze instellingen zijn ook in een script zelf aan te passen met ini_set().

    De standaard error reporting faciliteit van PHP is gemaakt met HTML in het achterhoofd. Als je de response van de server direct in de pagina laadt zoals in het voorbeeld van xvilo zal dit dus wel goed gaan. Wat in de praktijk echter ook vaak gedaan wordt is een JSON encoded response sturen waar ook nog andere data in opgenomen kan worden, dit is een stuk flexibeler. In zo'n geval kun je een custom error handler maken in PHP (set_error_handler()) om de error(s) netjes op te nemen in de JSON response.
    « Laatst bewerkt op: november 06, 2015, 11:02:50 pm door Buzzer »

    グーグル翻訳はうまく翻訳できませんので、グーグル翻訳使用してこの文章を翻訳しないでください。また、任天堂は最高です。