Okay, so that is the top part of this file.
Then down here in the middle we load jQuery and then we go down and we see the chat code.
And here we got a basic form and post back to ourselves.
We have a text field.
We have a submit.
I've got a little link to chatlist.php in here as well.
And then we got a reset button and then we have
a div and it's called chatcontent with an ID chatcontent.
We stick this ID in because we can grab that with jQuery, right?
And we put a spinner in there.
So that shows loading
with an alt text of loading so the spinner is there while it is loading.
Then continuing down, we have
a function called update messages.
And what this basically does is it will start on a timer every four seconds.
We'll talk about how the timer works.
It does a log, it does an ajax call to get this URL called chatlist.php.
Cache equals false keeps your browser
from only retrieving it once and believing that it already has the data.
It does this by adding a get parameter of the time,
so it forces the browser to get a new one every time.
And if we have a success,
then we get the JSON data back and we log it.
We log the actual data.
We empty out the chatcontent and you will see that this is on a list.
It's a list of an array of arrays with the message, date on it.
And so we write a for loop.
This is a JavaScript for loop, right.
And so for var equals i less than data.length i++.
That's going to loop through
all the chat messages and then it pulls out the chat message and
the sub-0 entry is the actual message and the sub 1 entry is the date of the message.
And then once that's all done,
so once we have cleared out the chat content and read the data from
the returned JSON and stuck it into the chatcontent of div,
we empty it out and then we append each of these things as a separate paragraph.
And then we do a set time out.
This is a JavaScript call,
not a jQuery call.
That says wait four seconds and then call ourselves again.
So update message sort of grabs the data,
empties out the chat div and then puts
all the chats in the chat div and then says call me again in four seconds.
And then it defines the function.
And so startup complete and then it calls update message once at
the beginning of the program to get the whole thing started.
So it retrieves the messages right away.
Now, one of the things I should probably do
here is I should probably just put this sleep in all the time.
In chatlist.php all it does is it sends back JSON to
our application and sleep (5) makes the thing moves
slowly enough so we can see what's happening and I
should probably leave the sleep (5) in all the time.
And so we put a content type header and this is good hygiene.
Everything we've done so far,
it's been application text content type.
But by telling it is real JSON that's good.
So this is a good thing to put in before any data has been sent.
It's another header just like location header except this is
a Content-Type header saying what I'm about to send you is not just HTML,
it's not text, it's not a jpeg image,
it is actual JSON and it's going to be an UTF character set.
So I just checked to see if I had any chats yet.
If I don't I create an empty array.
But then I simply echo using JSON code,
the variable that's in session chats which is an array of
two item arrays where the message and the date.
And so it just takes this whole thing JSON and code,
turns that into a string and echos it up.
So we will see chatlist.php.
So let me show you again how that works.
Let me go in first.