Esemény elkapás (pusher) JS / DOM manipuláció
2016-11-18T20:11:21+01:00
2016-11-18T21:37:48+01:00
2022-08-10T10:00:29+02:00
OttoMaster2
Sziasztok!
Hisztérikám, és a téma előzménye ITT található. Nagy vonalakban:
Adott egy "weboldal" 1 adott lapja, melyben van egy táblázat íródik ki SQL-ből lekérve (Php nyelven és kiíratva). Ezt a megjelenő táblázatot kellene új rekord beszúrása esetén automatikusan frissíteni, de csak a táblázatot. Az új rekordok TCP/IP socketen és nem web felületen érkeznek, így a hagyományos "chat"-ben is alkalmazott frissítési methódus úgy tűnik, itt nem járható. Sikeresen (és meglepően egyszerűen) sikerült ebbe a felületbe a pusher szolgáltatást "belerakni", szépen működik. Arra keresem a megoldást, hogyan lehetne a pusherből érkező eseményt JS-sel elkapni, és DOM manipulációval elvégezni újra a tábla lekérését.  Előre jelezném, ez egy olyan téma, amelyhez csonthüle vagyok, így ha egy pár soros "hogyan működik" magyarázat is érkezik a témához, azt megköszönöm.
Köszi mindenkinek aki próbálkozik....
Mutasd a teljes hozzászólást!

  • Az előző "kör" végén javasoltam valamit, azt kipróbáltad? Vagy ha lépesekre bontjuk, hol akadsz el?

    1. A cron-ból futó php fájlod nem csak egy Pusher eseményt küld, hanem a frissült adatbázisrekordok alapján összeállíthatsz egy teljes táblázatot, és azt is belenyomhatod a Pusher-be.

    2. Amikor az adat megérkezik, az egész táblázatot egy az egyben beszúrod az azt magába foglaló div-be, pl. a jQuery html függvényével.

    Alternatív megoldásként elég egy egyszerű eseményt küldeni, aminek a hatására a kliensek maguk is indíthatnak Ajax kérést a táblázat frissítése (lecserélése) céljából.

    Akár az is megoldható valamivel komplikáltabb JS kóddal, hogy a táblázatba csak sorokat szúrj, de ha nem iszonyatosan nagy a táblázat, akkor ez csak felesleges bonyolítás.

    Szóval melyik részen akadtál el?
    Mutasd a teljes hozzászólást!
  • Írok egy egészen konkrét példát, amit csak át kell alakítanod:

    PHP-ban elkészíted a táblázatot, majd elküldöd a klienseknek pl.:

    ... $data['message'] = '<table>'; for ($i = 1; $i <= 5; $i++) { $data['message'] .= '<tr>'; $data['message'] .= '<td>Number ' . $i . '</td>'; $data['message'] .= '<td>' . mt_rand(1, 90) . '</td>'; $data['message'] .= '</tr>'; } $data['message'] .= '</table>'; $pusher->trigger('lottery_channel', 'winner_numbers', $data);
    A html-be teszel egy div-et, pl.:

    <div id="winner_lottery_numbers"></div>
    Az eseményt elkapod JS-el és lecseréled a táblázatot:

    var channel = pusher.subscribe('lottery_channel'); channel.bind('winner_numbers', function(data) { $('#winner_lottery_numbers').html(data.message); });
    Ez egy végtelenül egyszerű példa - ami nem adja vissza a nyertes lottószámokat :) -, de ez alapján mennie kell.

    Ha mégis nyernél ezekkel a számokkal, 10%-ot kérek. :)
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd