The best way to update your chat room quickly and reliably?

I know this question has been answered, but I wanted to use another possible solution. This is how these things are, simple, with some catch and caveats, but for a class project that would be enough. The example I propose is not the one I created myself, and the code is untested. And, most likely, you will need a little time to implement the changes and make them work.

But he explores some basic data formats such as the XML and JSON capabilities in PHP and JavaScript. It keeps track of the most recent data capture and only gets new chat information. This way, once the data is returned to the browser, it will only download the new stuff instead of everything.

In your code above, it looks like you are writing the whole chat every time. I'm pretty sure the browser caching issue continues. Rather than requesting the entire html page every time, you can request PHP, which returns JSON data (PHP has built-in JSON functions) that only includes the latest records and you add them to the document.

There is a lot of information in JSON. If you haven't already learned about it, this is a way to express data that is native to JavaScript. It can convert JSON formatted text to arrays, objects and properties. And that's not as much as XML.

In your code, create a timestamp denoted

var lastDataReceived = "";

      

        
        
        
      

    

This will keep the timestamp of the last time new chat data was received from the server. In the success function, $.get()

change the url to the PHP page and set it to receive the JSON data. Also, pass the required information like the name of the room you need the data in and the latest chat data was received:

function update()
{
    $.get({
        url: "/rooms/room/getchatdata.php",
        data: { "room": roomname, "lastDataReceived": lastDataReceived }, 
        success: function(data){
            //..............
        },
        dataType: "json"
    });
}

      

        
        
        
      

    

This will create a request for

"/rooms/room/chatdata.php?room="+roomname+"&lastDataReceived="+lastDataReceived 

      

        
        
        
      

    

On the server side, you can get the querystring parameters like this

$roomname = $_GET["room"];
$lastDataReceived = date_create_from_format('d/M/Y H:i:s', $_GET["lastDataReceived"]);

      

        
        
        
      

    

It looks like you are writing chat information to an HTML file. In this example, the use of XML data is likely to be preferred. There are many, many PHP tutorials on XML. Here's one on W3Schools.com for SimpleXML functions. ( http://www.w3schools.com/php/php_ref_simplexml.asp )

With this, you can load from file:

$xml = simplexml_load_file($roomname.".xml");

      

        
        
        
      

    

You can also create a new XML file if this is a new room, for example:

<?php
    $chats = <<<XML
        <chats>
        </chats>
        XML;

    $xml = new SimpleXMLElement($chats);
    $xml->saveXML($roomname.".xml");
?>

      

        
        
        
      

    

To determine whether to read or write, you can check if a room exists by checking if a file exists for that room:

$xml = NULL;
if (file_exists($roomname.".xml")) {
    //Set to exsiting
    $xml = simplexml_load_file($roomname.".xml");
} else {
    //Create new file   
    $chats = <<<XML
        <chats>
        </chats>
        XML;
    $xml = new SimpleXMLElement($chats);
    $xml->saveXML($roomname.".xml");
}

      

        
        
        
      

    

Either way, you end up with a variable $xml

that you can work with.

So, say you have sent your request back to the server to see if there is any new chat data. You are working with variables $roomname

and $lastDataReceived

that were created earlier. And you've loaded the object $xml

from the file. Now you need to find new additions.

$chats = $xml->chats->children();
$newchats = array();

foreach($chats as $c) {
    if ($c['date'] > $lastDataReceived) {
        array_push($newchats, $c);
    }
}

      

        
        
        
      

    

Now that you have an array of new chat items, write the JSON data back to the browser:

$json = json_encode($newchats);
header('Content-Type: application/json');
echo $json;

      

        
        
        
      

    

Now, back to your JavaScript. In the above example, PHP is $newchats

initialized as a new array. When called on it json_encode()

, if there are no new chats, it echo

will return an empty array. You can check this in JS.

In this case, you will only need to add new elements, so you will need to add a new document to the document. It's very easy with jQuery. Let's say the chats were in a tag <div>

:

<div id="chats">
    <!--all chats here-->
</div>

      

        
        
        
      

    

And you have a template div

that you want all chats to look like

<div class="chat_template" style="display:none;">
    <div class="person_name"></div>
    <div class="chat_text"></div>
    <div class="chat_time"></div>
</div>

      

        
        
        
      

    

You can clone it, load data into it, and add it to your document.

function update()
{
    $.get({
        url: "/rooms/room/chatdata.php",
        data: { "room": roomname, "lastDataReceived": lastDataReceived }, 
        success: function(data){
            if (data.length > 0) {
                for (var i = 0; i < data.length; i++) {[
                    var c = data[i];
                    //I do not know what the exact structure of the data will be.
                    // You may need to output the data to the console to see it structure.
                    // But I am assuming you will have access to the date value, the person name
                    // and the text.

                    //Clone the template and add the values
                    var div = $("div.chat_template").clone(true);
                    div.find("div.person_name").html(name);
                    div.find("div.chat_text").html(text);
                    div.find("div.chat_time").html(date_val);
                    div.show();

                    //Add the new div to the document
                    $("div#chats").append(div);

                    //Set the last received time for the next query
                    lastDataReceived = date_val;
                }

                playMessageSound();
            }
        },
        dataType: "json"
    });
}

      

        
        
        
      

    

When posting new chat information to the server, you can use the same type structure data: { "chattext": text....}

in the jQuery function $.post()

. You will need another PHP file on the server, eg addchatdata.php

. I've already touched on the algorithm that creates or creates a chat room file based on whether it exists.

So, if you want an XML child to look like this:

<chat date="04/Jun/2015 13:18:23" name="George">
    Here is some of George text.
</chat>

      

        
        
        
      

    

Once you get the object $xml

, you can add new XML to it like this:

$chat = $xml->addChild("chat", "Here is some of George text.");
$chat->addAttribute("date", date('d/M/Y H:i:s'));
$chat->addAttribute("name", "George"); //<--Or use a variable name for the name

//Then save the changes back out to the file:
$xml->saveXML($roomname.".xml");

      

        
        
        
      

    

In a general sense, this does what you already did: store data from new chats and then upload that data to other clients connected to the chat. However, here it only fetches new information and loads much faster in the browser.