Kleine Vragen Topic #4

Instellen als usb toetsenbord?

Kan iemand mij uitleggen hoe ik nieuwe berichten automatisch in een chatbox zie als ze er zijn?
Ik had iets gelezen over ajax. maar ik kan er niet echt iets uit vinden?

Jesper schreef:

Kan iemand mij uitleggen hoe ik nieuwe berichten automatisch in een chatbox zie als ze er zijn?
Ik had iets gelezen over ajax. maar ik kan er niet echt iets uit vinden?

Nou je kan met bijv. jQuery een AJAX request sturen naar een PHP bestand dat vervolgens alle (nieuwe) berichten ophaalt (van MySQL).
Dan hoef je de page niet te refreshen.

toevoeging op 22 mei 2015, 11:40:18:
En dat doe je dan bijvoorbeeld iedere seconde zodat het live is.

Stef schreef:

Eerdere citaten tonen

Jesper schreef:

Kan iemand mij uitleggen hoe ik nieuwe berichten automatisch in een chatbox zie als ze er zijn?

Ik had iets gelezen over ajax. maar ik kan er niet echt iets uit vinden?

Nou je kan met bijv. jQuery een AJAX request sturen naar een PHP bestand dat vervolgens alle (nieuwe) berichten ophaalt (van MySQL).
Dan hoef je de page niet te refreshen.

toevoeging op 22 mei 2015, 11:40:18:
En dat doe je dan bijvoorbeeld iedere seconde zodat het live is.

En wat als er geen nieuwe berichten zijn? Dan ben je dus elke seconden headers (dus data) aan het over en weer sturen.
Heel onpraktisch, en heel gebruiksonvriendelijk (onnodig data sturen, vooral leuk voor mbs op mobiele devices)

toevoeging op 22 mei 2015, 11:52:29:

Jesper schreef:

Kan iemand mij uitleggen hoe ik nieuwe berichten automatisch in een chatbox zie als ze er zijn?
Ik had iets gelezen over ajax. maar ik kan er niet echt iets uit vinden?

gebruik websockets en werk met push ipv pull (fetch)

Jessee schreef:

Eerdere citaten tonen

Stef schreef:

Eerdere citaten tonen

Jesper schreef:

Kan iemand mij uitleggen hoe ik nieuwe berichten automatisch in een chatbox zie als ze er zijn?

Ik had iets gelezen over ajax. maar ik kan er niet echt iets uit vinden?

Nou je kan met bijv. jQuery een AJAX request sturen naar een PHP bestand dat vervolgens alle (nieuwe) berichten ophaalt (van MySQL).
Dan hoef je de page niet te refreshen.

toevoeging op 22 mei 2015, 11:40:18:
En dat doe je dan bijvoorbeeld iedere seconde zodat het live is.

En wat als er geen nieuwe berichten zijn? Dan ben je dus elke seconden headers (dus data) aan het over en weer sturen.
Heel onpraktisch, en heel gebruiksonvriendelijk (onnodig data sturen, vooral leuk voor mbs op mobiele devices)

toevoeging op 22 mei 2015, 11:52:29:

Eerdere citaten tonen

Jesper schreef:

Kan iemand mij uitleggen hoe ik nieuwe berichten automatisch in een chatbox zie als ze er zijn?
Ik had iets gelezen over ajax. maar ik kan er niet echt iets uit vinden?

gebruik websockets en werk met push ipv pull (fetch)

kan je uitleggen hoe websockets werken?

Jesper schreef:

Eerdere citaten tonen

Jessee schreef:

Eerdere citaten tonen

Stef schreef:

Eerdere citaten tonen

Jesper schreef:

Kan iemand mij uitleggen hoe ik nieuwe berichten automatisch in een chatbox zie als ze er zijn?

Ik had iets gelezen over ajax. maar ik kan er niet echt iets uit vinden?

Nou je kan met bijv. jQuery een AJAX request sturen naar een PHP bestand dat vervolgens alle (nieuwe) berichten ophaalt (van MySQL).
Dan hoef je de page niet te refreshen.

toevoeging op 22 mei 2015, 11:40:18:
En dat doe je dan bijvoorbeeld iedere seconde zodat het live is.

En wat als er geen nieuwe berichten zijn? Dan ben je dus elke seconden headers (dus data) aan het over en weer sturen.
Heel onpraktisch, en heel gebruiksonvriendelijk (onnodig data sturen, vooral leuk voor mbs op mobiele devices)

toevoeging op 22 mei 2015, 11:52:29:

Eerdere citaten tonen

Jesper schreef:

Kan iemand mij uitleggen hoe ik nieuwe berichten automatisch in een chatbox zie als ze er zijn?
Ik had iets gelezen over ajax. maar ik kan er niet echt iets uit vinden?

gebruik websockets en werk met push ipv pull (fetch)

kan je uitleggen hoe websockets werken?

Ze houden een verbinding open en sturen data zodra dat er is. Als er geen data te versturen valt dan wordt er niks verstuurd.

Jesper schreef:

Eerdere citaten tonen

Jessee schreef:

Eerdere citaten tonen

Stef schreef:

Eerdere citaten tonen

Jesper schreef:

Kan iemand mij uitleggen hoe ik nieuwe berichten automatisch in een chatbox zie als ze er zijn?

Ik had iets gelezen over ajax. maar ik kan er niet echt iets uit vinden?

Nou je kan met bijv. jQuery een AJAX request sturen naar een PHP bestand dat vervolgens alle (nieuwe) berichten ophaalt (van MySQL).
Dan hoef je de page niet te refreshen.

toevoeging op 22 mei 2015, 11:40:18:
En dat doe je dan bijvoorbeeld iedere seconde zodat het live is.

En wat als er geen nieuwe berichten zijn? Dan ben je dus elke seconden headers (dus data) aan het over en weer sturen.
Heel onpraktisch, en heel gebruiksonvriendelijk (onnodig data sturen, vooral leuk voor mbs op mobiele devices)

toevoeging op 22 mei 2015, 11:52:29:

Eerdere citaten tonen

Jesper schreef:

Kan iemand mij uitleggen hoe ik nieuwe berichten automatisch in een chatbox zie als ze er zijn?
Ik had iets gelezen over ajax. maar ik kan er niet echt iets uit vinden?

gebruik websockets en werk met push ipv pull (fetch)

kan je uitleggen hoe websockets werken?

Wat Lennard zegt.
Voordeel is dat als er dus geen data is en hij niets verstuurd, er dus ook geen headers verstuurd worden omdat die eenmalig verstuurd worden en de verbinding blijft daarna open. Dus kost geen extra MBs / traffic.
En zodra er iets is dan wordt het in de socket (verbinding) gegooid en dan ontvang je dat real-time op de client, dus geen delay van max 1 min

Jessee schreef:

Eerdere citaten tonen

Jesper schreef:

Eerdere citaten tonen

Jessee schreef:

Eerdere citaten tonen

Stef schreef:

Eerdere citaten tonen

Jesper schreef:

Kan iemand mij uitleggen hoe ik nieuwe berichten automatisch in een chatbox zie als ze er zijn?

Ik had iets gelezen over ajax. maar ik kan er niet echt iets uit vinden?

Nou je kan met bijv. jQuery een AJAX request sturen naar een PHP bestand dat vervolgens alle (nieuwe) berichten ophaalt (van MySQL).
Dan hoef je de page niet te refreshen.

toevoeging op 22 mei 2015, 11:40:18:
En dat doe je dan bijvoorbeeld iedere seconde zodat het live is.

En wat als er geen nieuwe berichten zijn? Dan ben je dus elke seconden headers (dus data) aan het over en weer sturen.
Heel onpraktisch, en heel gebruiksonvriendelijk (onnodig data sturen, vooral leuk voor mbs op mobiele devices)

toevoeging op 22 mei 2015, 11:52:29:

Eerdere citaten tonen

Jesper schreef:

Kan iemand mij uitleggen hoe ik nieuwe berichten automatisch in een chatbox zie als ze er zijn?
Ik had iets gelezen over ajax. maar ik kan er niet echt iets uit vinden?

gebruik websockets en werk met push ipv pull (fetch)

kan je uitleggen hoe websockets werken?

Wat Lennard zegt.
Voordeel is dat als er dus geen data is en hij niets verstuurd, er dus ook geen headers verstuurd worden omdat die eenmalig verstuurd worden en de verbinding blijft daarna open. Dus kost geen extra MBs / traffic.
En zodra er iets is dan wordt het in de socket (verbinding) gegooid en dan ontvang je dat real-time op de client, dus geen delay van max 1 min

Ik begrijp wat je bedoeld. toch wil ik eerst met ajax proberen.
Wat ik nu heb is dit:

setInterval(function(){ 
$.get("includes/show-meldingen.php", function (data) { //data contains the files output

 $("#meldingen").appendTo(data);//insert the new messages into a div in your html

});
}, 3000);

Als er geen nieuwe zijn dan duplicate hij toch alles?
Beetje lastig uit te leggen dit. Er zijn 2 meldingen in de database, en word geen nieuwe toegevoegd maar toch na 3 seconden append hij die 2 nog een x in de site?
Hoe zorg ik dat als er niks nieuws is dat hij niks duplicate?

Je kan de hele chat vervangen (wat kut is en meer werk voor dom)
Of je kan alleen nieuwe berichten returnen in data.
Wat je doet is, bij die get geef je timestamp mee van laatste bericht in de chatbox.
Alle berichten daarboven returnt ie dan in data en dat append je dan.

Jessee schreef:

Je kan de hele chat vervangen (wat kut is en meer werk voor dom)
Of je kan alleen nieuwe berichten returnen in data.
Wat je doet is, bij die get geef je timestamp mee van laatste bericht in de chatbox.
Alle berichten daarboven returnt ie dan in data en dat append je dan.

Hoe kan ik dat doen?

Met jQuery haal je alle elementen uit de chat op
bijvoorbeeld alle divs

Dan doe je

var timestamp = $(.chatContainer:last).data(time);

$.get("includes/show-meldingen.php", { timestamp: timestamp }, function (data) {

PHP:
select * from chats WHERE timestamp > $_GET[timestamp]

en dat echo je dan .
Liefst als json / array
en clientside

data.forEach(function(message) {
  $(.chatContainer).append(<div id="msg-+message.id+" data-time="+message.timestamp+">+message.content+</div>);
});

toevoeging op 22 mei 2015, 14:22:39:
Hoop dat het genoeg voorgekauwd is .

toevoeging op 22 mei 2015, 14:22:54:
(niet lullig bedoeld btw, maw: Ik hoop dat je er wat aan hebt )

@Jessee
Dit is wat ik nu heb

setInterval(function () {
    var timestamp = $(#meldingen:last).data(timestamp);
    $.get("includes/show-meldingen.php", { timestamp: timestamp }, function (data) {

        $("#meldingen").append(data);//insert the new messages into a div in your html

    });
}, 3000);

PHP:

$getMeldingen = $db->query("SELECT * FROM meldingen WHERE timestamp > ".$db->real_escape_string($_GET[timestamp])." ORDER BY timestamp DESC LIMIT 10");
while($fetchMeldingen = $getMeldingen->fetch_array()){

HTML:

<div data-time="timestamp">[COLOR= #0000BB]<?php[/COLOR] [URL="http://www.php.net/echo"]echo[/URL] [COLOR= #0000BB]$fetchMeldingen[/COLOR][COLOR= #007700][[/COLOR][COLOR= #DD0000]timestamp[/COLOR][COLOR= #007700]];[/COLOR] ?></div>

Hij blijft maar duplicaten?

Jessee schreef:

Je kan de hele chat vervangen (wat kut is en meer werk voor dom)

Of je kan alleen nieuwe berichten returnen in data.
Wat je doet is, bij die get geef je timestamp mee van laatste bericht in de chatbox.
Alle berichten daarboven returnt ie dan in data en dat append je dan. Je kunt beter met een ID werken of met een timestamp - 1 seconde, anders kom je in de knoei als er 2 berichten op 1 timestamp zijn verstuurd en er maar 1 naar de client is verzonden.

@Jesper
[c]$(#meldingen:last)[/c] haalt de #meldingen div op. Je hebt het laatste kind uit die div nodig, als er divjes in zitten is dat zo: [c]$(#meldingen div:last)[/c]

toevoeging op 22 mei 2015, 14:42:58:
Oh, je HTML is ook onjuist

[COLOR= #0000BB]<?php[/COLOR]
[URL="http://www.php.net/echo"]echo[/URL] [COLOR= #DD0000]<div data-time="[/COLOR][COLOR= #007700].[/COLOR][COLOR= #0000BB]$fetchMeldingen[/COLOR][COLOR= #007700][[/COLOR][COLOR= #DD0000]timestamp[/COLOR][COLOR= #007700]].[/COLOR][COLOR= #DD0000]" >[/COLOR][COLOR= #007700].[/COLOR][COLOR= #0000BB]$fetchMeldingen[/COLOR][COLOR= #007700][[/COLOR][COLOR= #DD0000]bericht[/COLOR][COLOR= #007700]].[/COLOR][COLOR= #DD0000]</div>[/COLOR][COLOR= #007700];[/COLOR]

toevoeging op 22 mei 2015, 14:43:32:
Anders stuurt hij steeds de text timestamp mee in de request.

Sjoerd schreef:

@Jesper
[c]$(#meldingen:last)[/c] haalt de #meldingen div op. Je hebt het laatste kind uit die div nodig, als er divjes in zitten is dat zo: [c]$(#meldingen div:last)[/c]

toevoeging op 22 mei 2015, 14:42:58:
Oh, je HTML is ook onjuist

[COLOR= #0000BB]<?php[/COLOR]
[URL="http://www.php.net/echo"]echo[/URL] [COLOR= #DD0000]<div data-time="[/COLOR][COLOR= #007700].[/COLOR][COLOR= #0000BB]$fetchMeldingen[/COLOR][COLOR= #007700][[/COLOR][COLOR= #DD0000]timestamp[/COLOR][COLOR= #007700]].[/COLOR][COLOR= #DD0000]" >[/COLOR][COLOR= #007700].[/COLOR][COLOR= #0000BB]$fetchMeldingen[/COLOR][COLOR= #007700][[/COLOR][COLOR= #DD0000]bericht[/COLOR][COLOR= #007700]].[/COLOR][COLOR= #DD0000]</div>[/COLOR][COLOR= #007700];[/COLOR]

toevoeging op 22 mei 2015, 14:43:32:
Anders stuurt hij steeds de text timestamp mee in de request.

Toch blijft hij doorgaan?

Wat misschien het probleem kan zijn dat ik eerst 3 seconden moet wachten als ik de page laad. en dan komen de berichten pas
hoe kan ik dat oplosse