So now, we're going to use JSON to build a very simple chat application. I love to use chat applications to play with JSON because there are so many better ways to build a chat application. The way I'm building it, I'm just using this as a great way to talk about JSON. So what we're really going to end up doing here is we're going to have two windows, each of them will be doing the same thing. They both have a chat button. There's a backend. When we press the Submit and send a new chat message back, the other one is in a loop, and it's pulling, checking to see if there's new chat messages. When there is a new chat message, it uses Ajax to pull that back, the chat messages and array of JSON objects. Then it updates this part here. So that is the idea of JSON is that we can use JavaScript to update some part of the screen and leave the rest of the screen alone. So it's not like this whole screen has to blink. When we're doing things like making menus at the top and moving back and forth, we make it look like certain things are not changing. But in this situation, everything outside that little chat box is not changing. We're going to do a full request response cycle when you type in something and press the chat button. So that's the basic idea of this application. So here is how it's working basically, you see if you watched the network every few seconds, about 4-5 seconds, it is doing a retrieval. So it does retrieval and what it's getting is a JSON array, array of little messages. Then it reads this array, and then it displays them, wipes this window out using jQuery, and then it re displays the messages. In this case, it's not really getting the new message, it's getting all the message, and it's just rewriting the whole thing. So if you got to watch to make sure that you see the new message is coming. So here's a better code, and url is.py. We have just the main view to do the talking. The message is going to be our bit of JSON stuff. Our model.py. It's pretty simple. It's got an owner. We're going to use the owner pattern even though we're going to do a little bit more of that work ourselves. It has a text field, and that's pretty much it other than the stock date fields that we normally have. So if we take a look at the views.py, we're going to do simply a rendering of talk.html. You'll see when we get to talk.html, the dynamic part. You might be surprised like where are all the old messages? The old messages normally would be retrieved right in here, but they're not because we're going to do that in JavaScript, and that bit of retrieve the message is the most recent messages is going to be done in the browser now rather than in the server. So it's going to be a request to show the page, and then the page is going to start and go grab the messages. We just have a normal form, and we're going to grab the message text from that form. Then add the owner to be request user and then save it. Then we're going to redirect it back to ourselves. So that's the view, but it's really quite simple. The interesting part is in the template. So we have a bunch of stuff in the template. This part here is pretty straightforward. We have that form that's at the top, leaving, we got reset, and a chat button, we're going to post back in. Then we have this chatcontent. That's important because the content is that part on the screen that we're going to replace over and over again. So one of the things that we're doing here is we're going to grab a spinner and grab the URL to a little spinner that we've got stored in a static area. That spinner, one of those little dot things that goes around. That's just an animated GIF. What we're going to be doing is you put that out so that if it turns out that somehow your JSON is not working, the spinner stays there, and that's a clue to you at least as a developer and maybe to your current user that it's not running. But the idea is that the spinner will be running, but then it'll be immediately be replaced by the data we pull in from JSON. So here's the interesting part. This is a function that right now we just going to call it a function and we'll get this started up a bit. This function is going to do the hard work. This function is a part that's going to get triggered every once in a while to go retrieve all of the data. So we'll just call this function updateMessage. What it's going to do is it's going to go give us a console log. Then we're going to grab getJSON, which is jQuery to retrieve a JSON URL. Then this getJSON takes two parameters. The first is a string, which is a URL. The second is a bit of code. Then the data that comes back from the JSON, meaning this data right here, which is an array of arrays, is going to be passed in as rows. So until you're really comfortable, I put a console.log So you see each time it's called. Then what I'm going to do is I'm going to do a chatcontent MD. Remember the chatcontent is that little part right there that we're going to wipe that out. That's just a jQuery, wipe it out. Then I'm going to loop through the rowz for [inaudible]. We're going to look, there's two rows here, rows.length is two. Then we're going to grab it. Then we're going to say "We're going to append a paragraph tag and the first part of the row plus a break tag into non-blank spaces that so that it indents to spaces," that's the time underneath the text. Then we're going to take the second element of that row and print out a paragraph tag. So that's what is going to put the rows of the chat and that's going to wipe it out and then fill it back up. We just append it. Append around and go through an append. Then what we're going to do is we're going to set the timeout to call ourselves again in four seconds. So that basically says, this is actually part of vanilla JavaScript. We're saying 4,000 milliseconds from now or four seconds from now, call this again. So it's only going do this after it is successfully got the JSON back. So if the system starts slowing down, after it's done the update of the little part of the screen with the chat messages then is going to say, "Then run me again in four seconds." That's what's going to happen every four seconds. But then what we're going to do is also after that, we're going to trigger that we're going to get this thing started. So we're going to say, under document ready, there's a document ready, these three lines. We're going to tell Ajax and not to cache that data because we expect every time we're going to call, we want the new messages. We're going to just call updateMessage, which is immediately going to start an Ajax request and then rewrite chatcontent and wait four seconds and then do it again and again. So this is like priming our timing loop. Once we've done that, the only thing left to do is look at what is going to happen in that code that's going to give us back all those Ajax messages. So this is the TalkMessages, that's our URL that's going to do that. It's a get request, and we're just going to go read all of the message objects order_by, created_at, the first 10 of them. So that's what that does. We're going to, instead of just sending the messages downward, we're going to augment it. We going to take the message text and then we're called naturaltime. Naturaltime is a thing that says 13 minutes ago or 14 minutes ago instead of some long, ugly time thing. That's something we're getting from Django. That is the result. The result is a new array, messages as an array. Results is the array that looks like this. What we've done is we've changed this second parameter, basically for each of the messages using naturaltime. Then results in this case is an array, but actually it's a list, confusing my JavaScript in my Python right now. So it's a list. Then we just return a JSON response, which serializes that into JSON and sends it all back. So you get the idea of how you build a chat and you can see how this is what's coming back and it's hitting this messages, and this little cash equals false is adding this to the URL, does not seem to be the same URL from the browser's perspective. So it's really just taking a timestamp and appending it so that browser sees it not as the URL it retrieved before, so it doesn't have any chance of caching. So that's really a quick look at how you might use JSON to build a really simple chat application. It is not the best way to build chat application. There's a thing called WebSockets that makes your chat application more efficient and more responsive. But again, this is a very simple background task to retrieve information from the server using Ajax and JSON.
