Home/ Questions/Q 8973665
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T18:29:58+00:00

I am creating a chat program. This chat program has two sides(client and user).

  • 0

I am creating a chat program. This chat program has two sides(client and user). All the data is going into a database(mysql). Currently, the chat works fine. Each side types and i have a listener function that uses ajax to load the database file into the window each second or two.

The problem is, this is eating up too much bandwidth!

I was thinking about terminating the chat after a set duration or I was thinking there is a way to only update when an event happens.

Ideally this would work best in my opinion:

If the user enters new data, then it will be detected on the client side and then it will activate the function to update the chat window only at that time.

Does anything exist like this to listen in ajax/jquery/javascript?

Here is the code I am currently using to listen:

/* set interval of listener */ 

 setInterval(function() {
listen()
}, 2500);

 /* actual listener */

 function listen(){
    /* send listen via post ajax */
    $.post("listenuser.php", {
        chatsession: $('#chatsession').val(),       
/* Do some other things after response and then update the chat window with response content from database window */
    }, function(response){
        $('#loadingchat').hide();
         $('#chatcontent').show();
        $('#messagewindow').show();
        setTimeout("finishAjax('messagewindow', '"+escape(response)+"')", 450);
    });
    return false; 
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There are many ways to do it, but looking at your design I will suggest to use a technique called Comet, basically is a way to get web servers to “send” data to the client without having any need for the client to request it. It is kind of a hack if you read the code, as per my opinion.
    but here goes a example that i found of how to implement this, using a simple text file:

    SERVER

    <?php

  $filename  = dirname(__FILE__).'/data.txt';

  // store new message in the file
  $msg = isset($_GET['msg']) ? $_GET['msg'] : '';
  if ($msg != '')
  {
    file_put_contents($filename,$msg);
    die();
  }

  // infinite loop until the data file is not modified
  $lastmodif    = isset($_GET['timestamp']) ? $_GET['timestamp'] : 0;
  $currentmodif = filemtime($filename);
  while ($currentmodif <= $lastmodif) // check if the data file has been modified
  {
    usleep(10000); // sleep 10ms to unload the CPU
    clearstatcache();
    $currentmodif = filemtime($filename);
  }

  // return a json array
  $response = array();
  $response['msg']       = file_get_contents($filename);
  $response['timestamp'] = $currentmodif;
  echo json_encode($response);
  flush();

?>

    CLIENT:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Comet demo</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="prototype.js"></script>
</head>
<body>

<div id="content">
</div>

<p>
<form action="" method="get" onsubmit="comet.doRequest($('word').value);$('word').value='';return false;">
    <input type="text" name="word" id="word" value="" />
    <input type="submit" name="submit" value="Send" />
</form>
</p>

<script type="text/javascript">
    var Comet = Class.create();
    Comet.prototype = {

        timestamp: 0,
        url: './backend.php',
        noerror: true,

        initialize: function() { },

        connect: function()
        {
            this.ajax = new Ajax.Request(this.url, {
                method: 'get',
                parameters: { 'timestamp' : this.timestamp },
                onSuccess: function(transport) {
                    // handle the server response
                    var response = transport.responseText.evalJSON();
                    this.comet.timestamp = response['timestamp'];
                    this.comet.handleResponse(response);
                    this.comet.noerror = true;
                },
                onComplete: function(transport) {
                    // send a new ajax request when this request is finished
                    if (!this.comet.noerror)
                    // if a connection problem occurs, try to reconnect each 5 seconds
                        setTimeout(function(){ comet.connect() }, 5000);
                    else
                        this.comet.connect();
                    this.comet.noerror = false;
                }
            });
            this.ajax.comet = this;
        },

        disconnect: function()
        {
        },

        handleResponse: function(response)
        {
            $('content').innerHTML += '<div>' + response['msg'] + '</div>';
        },

        doRequest: function(request)
        {
            new Ajax.Request(this.url, {
                method: 'get',
                parameters: { 'msg' : request
                });
        }
    }
    var comet = new Comet();
    comet.connect();
</script>

</body>
</html>

    I hope it helps.

    heres a URL with more examples and some documentation (I got the example from here):
    http://www.zeitoun.net/articles/comet_and_php/start

    • 0