DIV refresh

[ashwood]

ive finally got my form successfully working now its the retrieving what in the database.. i was thinking oh ill refresh every 1 second BUT only thing is ive done that but the page just looks like it hasnt loaded.. what i want to do is for the box to refresh every say 30 seconds.. BUT whenevery a user types a message and submits the box updates for everyone so there is no waiting around for people to see eachothers messages.. just like facebook chat where the chat is refreshed as soon as the user submits and the other person on the other end see's it right away.. hope that makes sence but thats what i want to do basically..

[jacek]

Refreshing a div as you put it is not really the best use for AJAX as it tends to lead to a lot of extra data being sent back and forth that you do not need to send, what would be better is to just send the data (i.e. the raw messages) and create the html with javascript once you have the data. Also using this method you could only send new messages that have happened instead of reloading all of the old ones every time too.

Now for the problem, the best solution would be to have the message added to the box when the user clicks the button, not relying on it going to the database and then the AJAX picking it up at the next check.

[ashwood]

Refreshing a div as you put it is not really the best use for AJAX as it tends to lead to a lot of extra data being sent back and forth that you do not need to send, what would be better is to just send the data (i.e. the raw messages) and create the html with javascript once you have the data. Also using this method you could only send new messages that have happened instead of reloading all of the old ones every time too.

Now for the problem, the best solution would be to have the message added to the box when the user clicks the button, not relying on it going to the database and then the AJAX picking it up at the next check.

half of this i get half i dont.. and i dont want the box to update just for the user i want it to update for whoever is looking at it say you was on mywebsite and i typed a message at my end.. then when i click post not only does the box refresh for me it refreshes for you straight away so you can see my message..

[jacek]

You cant make it that instant, the nature of HTTP means that the server cannot send message to the browser without it first requesting something.

I would go for every 20 seconds or so, and make sure you only have the server send new messages to speed up the requests.

[ashwood]

but ive seen it done? IPB (Invision Power Board) the shoutbox for that whenever you type in it and press shout your message appears into the box straight away and other people see it straight away aswell.. and if it cant be done also how does facebook chat work?

not argueing obviously you no a lot more im just saying ive seen it so surely theres a way?

[jacek]

As far as I know it is not possible.

Most likely is that they have JavaScript append the message straight away so it appears instant for you but the other person has to wait for their browser to check for new messages. Sometimes you might be lucky and send a message 10ms before their browser was about to check.

[ashwood]

so what is the best way to go about it now then? and how often do you recon i should do the refresh?

[Temor]

Check out APE ( Ajax Push Engine ) http://www.ape-project.org/

Not sure if it's what you need, but it looks really useful for web-based instant messaging.

Some guys over at TheNewBoston forum is building a web-based IRC client using this.

[jacek]

Check out APE ( Ajax Push Engine ) http://www.ape-project.org/

That looks like it is essentially relies on keeping HTTP connections open. Generally this has a negative effect on page load times and is not very reliable across browsers.

[ashwood]

this is getting more complicated by the post :\

[jacek]

this is getting more complicated by the post :\

Stick with what you have for now, just check the server for new messages ever 15 seconds. Make sure yo do not reload the entire conversation though as this will be slow and will look bad to the users.

[ashwood]

how do i only load new messages though? at the minute i can reload the div every x seconds but its not quick enough for the users as they will have to wait for the reload to see new messages?

[jacek]

Instead of "reloading the div" you should transfer the new message data only. that way nothing ever has to be removed from the div. you can work out which are new messages by sending the id of the last message the user currently has and seeing if there are any more than that.

[ashwood]

okay so ive been away doing other things and lost track of wqhere i was on my website.. ive read other this and still cant get my head around it.. using simple javascript how would i get the messages out of the database and only get the newest messages every x seconds?

thanks

( sorry for diggin this back up was at the top but better than makin a new post eh )

[jacek]

( sorry for diggin this back up was at the top but better than makin a new post eh )

You are allowed to dig if it's not pointless

how would i get the messages out of the database and only get the newest messages every x seconds?

when you do the ajax request, send the time that the last check happened, so for example you could request messages.php?last_check=1308574129 where aht number is a timestamp, see the time() function.

then the SQL to get new messages would be

SELECT `things` FROM `messages ` WHERE `message_sent` > $time

where

$time = (int)$_GET['last_check'];

Which would then give you, the messages since the last check.

[JelvinJS7]

Most likely is that they have JavaScript append the message straight away so it appears instant for you but the other person has to wait for their browser to check for new messages. Sometimes you might be lucky and send a message 10ms before their browser was about to check.

Is this why in gmail chat you get that message that says "your loser friend is typing…" or "your loser friend had entered text."?

[jacek]

Is this why in gmail chat you get that message that says "your loser friend is typing…" or "your loser friend had entered text."?

no.

[ashwood]

im still abit lost with this the php side i can udnerstand.. the ajax tho hmmm

[jacek]

im still abit lost with this the php side i can udnerstand.. the ajax tho hmmm

You will have to give more information than that.

what is the problem exactly ?

[ashwood]

not a lot at the minute im doing the php its the ajax side of things ive got this..

$(document).ready(function(){
    $("form#sbox").submit(function() {
    var username     = $('#username').attr('value');
    var displayname     = $('#displayname').attr('value');
    var message     = $('#message').attr('value');
    $('.data_loader').show();
        $.ajax({
            type: "POST",
            url: "sbox_data.php",
            data: "username="+ username +"& message="+ message +"& displayname="+ displayname,
            success: function() {
                $('#message').val('');
                $('.data_loader').hide(); 
            }
        });  
    return false;  
    });
});

thats to send it to the database..

with a bit of editing.. changing POST to GET and the data to whats needed.. it will work?

[ashwood]

rite no.. im stuck.. i can do the php if its > than time BUT i cant do showing it and auto checking via ajax/javascript

any guide on how to do this.. remembering the php side is easy and i can do..