Comment faire défiler jusqu'aux nouveaux messages sur le chat ajax ?

StackOverflow https://stackoverflow.com//questions/12657206

Question

Je travaille sur un système de chat privé.J'utilise PHP et Javascript et beaucoup de frames.:D 

frames:

-------------*--------------- 

| chat messages here        |                         

-------------*---------------

|send message frame         |

-------------*---------------

Je souhaite mettre à jour le cadre où se trouvent les messages de discussion, mais j'aimerais le faire de manière cool.Vous savez, si je recharge simplement le cadre, cela n'a pas l'air cool.Si je recharge juste un petit div, c'est peut-être un peu mieux, mais je ne sais pas...Je veux dire ceci :

function newMessageShow()
{
print messages ... 
// wait 10-20 sec... somehow
newMessageShow();
}

Tu vois ce que je veux dire, non ?...Je suis désolé pour mon mauvais anglais...Si vous m'avez compris, pourriez-vous m'aider un peu ?

Était-ce utile?

La solution

Si vous vouliez dire comment faire défiler vers le bas de la vue, utilisez scrollTop.J'ai un exemple ici pour voir ce que je veux dire - http://jsfiddle.net/uPLWT/

Autres conseils

Vous pouvez le faire par JQuery Ajax Post.Vérifiez cela (http://api.jquery.com/jquery.post/) a un exemple pour mettre à jour la DIV.

Ici Ive Mettez ensemble cet exemple de chat Ajax très simple, il interrogera votre serveur et obtiendrez les 25 derniers messages, il utilise également le $ AJAX.post () pour envoyer les messages.Les messages sont stockés dans SQLite pour des raisons de simplicité.Peut-être d'un certain intérêt.

la page de discussion: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple AJAX Chat</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function get_chat(){
    var oldscrollHeight = $("#chat_log")[0].scrollHeight;

    $.ajax({ url: "./chat.php", cache: false,
    success: function(data){
        if(data.chat==null){
        }else{
            $("#chat_log").html(data.chat);

            //Scroll to bottom of chat log on new message
            var newscrollHeight = $("#chat_log")[0].scrollHeight;
            if(newscrollHeight > oldscrollHeight){
                $("#chat_log").scrollTop($("#chat_log")[0].scrollHeight);
            }
        }
        poll();
    }, dataType: "json"});
}

function poll(){
    setTimeout(function(){
        get_chat();
    }, 1500);
}

$(document).ready(function(){
    //Send message
    $("button").click(function () {
        var text = $("#chat").val()
        $.post("chat.php", { chat: text } );
    });
    poll();
});
</script>
<style>
#chat_log{
    border:solid 2px #ddd;
    background:#ccc; 
    color:#000;
    padding:4px;
    width:500px;
    height:150px;
    overflow:auto;
}
</style>

</head>

<body>

<h1>AJAX Chat Polling Example</h1>
<p>Chat Log:</p>
<div id="chat_log">Loading chat...</div>
<p>Send Message:</p>
<div id="chat_send">
    <p><input id="chat" type="text" name="chat" size="42"><button>Send</button></p>
</div>

</body>
</html>

le récepteur / contrôleur de conversation et le modèle (chat.php) 

<?php 
// A simple table for chat messages
$chat_table  = array("CREATE TABLE chat ( id INTEGER PRIMARY KEY,
                                          user TEXT,
                                          message TEXT );");
// Create a chat store instance.
$chat_store = new chat_store("sqlite:./chat.db", $chat_table);

// User posted to chat
if(isset($_POST['chat'])){
    $chat_store->insert(array(array('user'=>$_SERVER['REMOTE_ADDR'],'message'=>$_POST['chat'])));
}else{
    // Grab latest 25 messages 
    $result = $chat_store->get_chat_messages(25);
    // Send as json so jquery can use it to insert into #chat_log
    header('Content-Type: application/json');
    // Build an output
    $chat = null;
    foreach($result as $row){
        $chat .= '<p>'.$row['user'].' : '.$row['message'].'</p>';
    }
    //Send the json string
    echo json_encode(array('chat'=>$chat));
    die;
}
//End Logic

/**
 * Chat store class, using sqlite & PDO to store and get your chat messages. 
 */
class chat_store{
    private $db;

    function __construct($dsn,$setup_query){
        $this->dsn = $dsn;
        $this->setup = $setup_query;
        $this->chkSetup();
    }
    /**
     * Connect
     */
    public function connect(){
        try{
            if (!$this->db instanceof PDO){
                $this->db = new \PDO($this->dsn);
                $this->db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
                $this->db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
                $this->db->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE,PDO::FETCH_ASSOC);
            }
        }catch (Exception $e){
            die($e->getMessage());
        }
    }
    /**
     * Get chat messages
     *
     * @param int $count
     * @return array
     */
    public function get_chat_messages($count){
        $this->connect();
        $sql = "SELECT * FROM chat LIMIT ".$count;

        $statement = $this->db->prepare($sql);
        $statement->execute();
        return $statement->fetchAll(PDO::FETCH_ASSOC);
    }

    /**
     * Insert message into store
     *
     * @param array $values
     */
    public function insert($values){
        $this->connect();
        $fieldnames = array_keys($values[0]);
        $fields = '('.implode(' ,',$fieldnames).')';
        $bounds = '(:'.implode(', :',$fieldnames).')';
        $sql = "INSERT INTO chat {$fields} VALUES {$bounds}";
        $statement = $this->db->prepare($sql);
        foreach($values as $vals){
            $statement->execute($vals);
        }
    }

    /**
     * Setup and Create table for store
     */
    function chkSetup(){
        $dso = explode(':',$this->dsn);
        if(file_exists($dso[1])){
            return;
        }else{
            $this->connect();
            //Setup Table
            if(is_array($this->setup)){
                foreach($this->setup as $table){
                    $this->db->query($table);
                }
            }else{
                $this->db->query($this->setup);
            }
            exit(header("refresh:0;url=./"));
        }
    }
}//End Class
?>

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top