Come scorrere verso i nuovi messaggi sulla chat Ajax?

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

Domanda

Sto lavorando a un sistema di chat privato.Io uso PHP e JavaScript e un sacco di frame.: D 

frames:

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

| chat messages here        |                         

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

|send message frame         |

-------------*---------------
.

Voglio aggiornare la cornice in cui sono i messaggi di chat, ma vorrei farlo bene.Sai se ho appena ricarico il telaio che non sembra fresco.Se ho appena ricaricato un piccolo div, che forse un po 'meglio, ma non lo so ... Intendo questo: 

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

Sai cosa intendo, no?... Mi dispiace per il mio povero inglese ... Se mi hai capito, potresti aiutarmi un po '?

È stato utile?

Soluzione

Se si intendeva come scorrere verso il basso nella parte inferiore della vista, utilizzare scrollTop.Ho un esempio qui per vedere cosa intendo - http://jsfiddle.net/upwt/

Altri suggerimenti

Puoi farlo da JQuery Ajax Post.Controlla questo (http://api.jquery.com/jquery.post/) ha un esempio per aggiornare il div.

Qui ha messo insieme questo semplice esempio di chiacchierata Ajax, sonda il server e riceverà gli ultimi 25 messaggi, utilizza anche $ ajax.post () per inviare i messaggi.I messaggi sono memorizzati in SQLite per motivi di semplicità.Forse di qualche interesse.

La pagina della chat: 

<!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>
.

Il ricevitore / controller e modello di chat (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
?>
.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top