Ajax 채팅에서 새 메시지로 스크롤하는 방법은 무엇입니까?

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

문제

개인 채팅 시스템에서 작업하고 있습니다.나는 PHP와 자바 스크립트와 프레임을 많이 사용합니다.: D 

frames:

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

| chat messages here        |                         

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

|send message frame         |

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

채팅 메시지가있는 프레임을 업데이트하고 싶지만 멋진 방법을 원합니다.내가 멋지게 보이지 않는 프레임을 다시로드하면 알다시피.단지 작은 div를 다시로드하면 조금 더 나아지지만, 나는 모른다 ... 나는 이것을 의미합니다 : 

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

내가 무슨 뜻인지 알지, 아니야?... 나의 가난한 영어로 유감스럽게 생각합니다 ... 만약 당신이 나를 이해했다면, 당신은 나를 조금 도울 수 있겠습니까?

도움이 되었습니까?

해결책

View의 맨 아래로 스크롤하는 방법을 의미하는 경우 scrollTop를 사용하십시오.나는 내가 의미하는 것을 여기에 보려면 여기에 예를 보유하고 있습니다 - http://jsfiddle.net/uplwt/

다른 팁

jQuery Ajax Post 에서이 작업을 수행 할 수 있습니다.이 확인을 선택하십시오 (http://api.jquery.com/jquery.post/) div를 업데이트하는 예제가 있습니다.

여기 에이 매우 간단한 Ajax 채팅 예제를 넣고 서버를 폴링하고 최신 25 개의 메시지를 얻을 수 있습니다. 또한 $ ajax.post ()를 사용하여 메시지를 전송합니다.메시지는 단순화를 위해 SQLite에 저장됩니다.아마도 그것은 어떤 관심을 가지고

채팅 페이지 : 

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

채팅 수신기 / 컨트롤러 및 모델 (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
?>
.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top