CODEWITHSUNDEEP
phpajaxlong-integerpolling
Yassin
Yassin

Reputation: 1059

Long polling chat system

I know that long polling is the best way for making chat updates its contents and i know about web-socket but i think that long polling is best because many browsers doesn't support web-socket . The problem is that i dont know how to write the long polling script , i have an regular ajax and a regular php get and post script , so how can i make this php code and ajax code works in long polling way ? ( i don't want it to keep requesting every second i want it to echo any new messages from the database ... )

here is my ajax code :-

var chat = {}

chat.fetchMessages = function () {
$.ajax({
    url: 'ajax/ajax/chat.php',
    type: 'POST',
    data: { method: 'fetch' },
    success: function(data) {
        $('#chats').html(data);
        $('#chatshere').scrollTop($('#chatshere')[0].scrollHeight);
   }
}); 

}

chat.interval = setInterval(chat.fetchMessages, 1000);
chat.fetchMessages();

and here is my php code :-

<?php
require '../core/init.php';
if(isset($_POST['method']) === true && empty($_POST['method']) === false) {

$chat = new Chat();
$method = trim($_POST['method']);

if($method === 'fetch') {

    $messages = $chat->fetchMessages();

    if(empty($messages) === true) {
        echo 'There is no any messages !';
    }
    else
    {
        foreach($messages as $message) {
        $log_username = $_SESSION['username'];

            if($message['user1'] == $log_username){
            ?>
            <ul class="mychat">
            <li class="first">
            <div class="sOutline">
            <div class="suser">
            <a href="#">
            <img style="height:30px; width:30px;" title="belowfs" alt="belowfs" class="profilepic-belowfs" src="http://demo.scritterscript.com/images/membersprofilepic/thumbs/default-s.jpg">
            </a>
            </div>
            </div>
            </li>                                          
            <li style="margin-left:-5px;">
            <div style="border:1px solid #0099CC; border-radius:5px; background:#0099CC; color:#FFFFFF; padding:7px; max-width:165px;">
            <?php echo nl2br($message['message']); ?>
            </div>
            </li>
            </ul>
            <?php
            }else if($message['user2'] == $log_username){
            ?>
            <ul style="float:right;" class="hischat">
            <li class="first">
            <div class="sOutline">
            <div class="suser">
            <a href="#">
            <img style="height:30px; width:30px;" title="belowfs" alt="belowfs" class="profilepic-belowfs" src="http://demo.scritterscript.com/images/membersprofilepic/thumbs/default-s.jpg">
            </a>
            </div>
            </div>
            </li>                                          
            <li style="margin-right:-5px;">
            <div style="border:1px solid #999; border-radius:5px; background:#999; color:#FFFFFF; padding:7px; max-width:165px;">
            <?php echo nl2br($message['message']); ?>
            </div>
            </li>
            </ul>
            <?php
            }
        }
    }
}
else if($method === 'throw' && isset($_POST['message']) === true) { 
    $message = trim($_POST['message']);
    if(empty($message) === false) {
        $chat->throwMessage($_SESSION['user'], $message);   
    }
}
 }
 ?>

Thanks alot ...

Upvotes: 3

Views: 5201

Answers (2)

Kabylzki
Kabylzki

Reputation: 37

Here is a link where the different methods are clearly explained :

What are Long-Polling, Websockets, Server-Sent Events (SSE) and Comet?

The Long-Polling system :

  • A client requests a webpage from a server using regular http (see http above).
  • The requested webpage executes javascript which requests a file from the server.
  • The server does not immediately respond with the requested information but waits until there's new information available.
  • When there's new information available, the server responds with the new information.
  • The client receives the new information and immediately sends another request to the server, re-starting the process.

If there is an interval for the messages to be fetched, you may want to look at the Ajax Polling section.

Upvotes: 1

Ejaz
Ejaz

Reputation: 8872

you might want to do 

chat.interval = setInterval(function(){chat.fetchMessages()}, 5000);

instead of 

chat.interval = setInterval(chat.fetchMessages, 1000);

for fetching messages every 5 seconds. Rest is up to your PHP code to echo new messages.

Upvotes: 2

Related Questions