JQuery : <Div> <UL> 안에 새로운 <Li> 추가

페이지에 채팅 메시지를 추가하면 페이지가 새로 고쳐지 자마자 모든 채팅 메시지가 사라집니다. 또한 채팅 수신자가 메시지를받을 방법이 없습니다. 모든 메시지는 하나 (임시) 페이지에만 표시되며 보낸 사람 만 볼 수 있습니다.

이를 해결하려면 채팅 메시지를 어딘가에 저장하고 적절한 사용자에게 표시해야합니다. 이를 위해서는 PHP 또는 ASP.NET과 같은 서버 기반 도구를 사용해야합니다. PHP가 가장 일반적이며 로컬 컴퓨터에 XAMPP 또는 WAMP / MAMP / LAMP (Windows / Mac / Linux)를 설치할 때 (또는 거의 모든 저렴한 호스팅 계정을 사용하여 거의 모든 온라인) PHP에 액세스 할 수 있습니다. LAMP 사용). XAMPP와 같은 앞서 언급 한 도구는 로컬 컴퓨터에 dev LAMP 호스팅 환경을 만듭니다.

채팅 메시지를 수신 / 저장 / 다시 표시하기위한 두 가지 옵션이 있습니다 : FORMs 또는 AJAX. AJAX는 페이지를 새로 고치지 않고 매우 간단하기 때문에 권장됩니다. <form>구조가 서버에 데이터를 전송하는 기존의 방법입니다, AJAX는 우리가 현재이 작업을 수행하는 방법이다.

사용자가 SEND를 클릭하면 jQuery / js를 사용 하여 사용자 메시지와 함께 <input>또는 <textarea>필드 를 읽습니다 . 그런 다음 AJAX 코드 블록을 사용하여 데이터를 서버로 보냅니다 (데이터를 수신하고 데이터베이스에 플렁크하는 PHP 파일로).

다음은 AJAX 사용 방법에 대한 몇 가지 간단한 예 입니다. 매우 쉽습니다. 예제를 복사하여 시스템에 재현했는지 확인하십시오. 이번 분기에 보낼 최고의 15 분.

코드는 다음과 같습니다 (불완전 / 미확인 / FYI).

가정 : 사용자가 index.php에 로그인하고 채팅 시스템을 위해 chats.php로 리디렉션됩니다.

chats.php

<?php
    session_start(); //Must be first instruction on page
    if ( !isset($_SESSION['userID'] ) header('Location: ' . 'index.php'); //2nd instruction on page
    $msgs = get_chat_messages($_SESSION['user_id']); //Note that user has logged in somehow
?>

<div class="panel-collapse">
    <div class="panel-body" style="overflow-y: scroll; height: 250px;">
        <ul class="chat" id="list"> 

<?php
    $out = '';
    while ($row = mysql_fetch_array($msgs)) {
        $out = '
           <li class="left clearfix">
                <span class="chat-img pull-left">
                    <img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle" />
                </span>
                <div class="chat-body clearfix">
                     <div class="header">
                         <strong class="primary-font">USER NAME</strong> <small class="pull-right text-muted">
                         <span class="glyphicon glyphicon-time"></span>12 mins ago</small>
                      </div>
                      <p>' .$row['msg_db_field_name']. '</p>
                </div>
           </li>
           <li> ALL ATTRIBUTES IN PREVIOUS LI AND NEW MESSAGE WILL BE HERE </li>
        ';
    }
    echo $out;
?>
        </ul>
    </div>

    <div class="panel-footer">
        <div class="input-group">
            <input id="chat-input" type="text" class="form-control input-sm" placeholder="Type your message here..." />
            <span class="input-group-btn">
                <button class="btn btn-warning btn-sm" id="btn-chat" type="submit"> Send</button>
            </span>
         </div>
    </div>

</div>

<script>
    var msg;
    $(function(){
        msg = $('#chat-input').val();
        $.ajax({
            type: 'post',
             url: 'my_ajax_processor.php',
            data: 'msg=' + msg,
            success: function(d){
                //if (d.length) alert(d); //uncomment for troubleshooting
                $('#list').append('\
                   <li class="left clearfix">\
                        <span class="chat-img pull-left">\
                            <img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle" />\
                        </span>\
                        <div class="chat-body clearfix">\
                             <div class="header">\
                                 <strong class="primary-font">USER NAME</strong> <small class="pull-right text-muted">\
                                 <span class="glyphicon glyphicon-time"></span>12 mins ago</small>\
                              </div>\
                              <p>' +msg+ '</p>\
                        </div>\
                   </li>\           
                ');
            }//END success fn
        });//END ajax code block
    });//END document.ready
</script>

my_ajax_processor.php

<?php
    $msg = $_POST['msg'];
    //now, store message into database. Of course, you need more than just the message. You also need the senderID and the recipID, plus maybe date, time etc.

위는 채팅 시스템에 대한 전체적인 개요입니다. codecourse.com에는 훌륭한 비디오 자습서가 있습니다. 예전에는 무료 였지만 이제는 한 달에 약 $ 10를 청구합니다. 1 개월 액세스 권한을 구입하고 등록 / 로그인 튜트를 진행합니다 (절차 및 OOP 과정이 모두 있습니다. 절차가 더 쉽고 업계에서 일하려는 경우 OOP가 더 유용합니다). 모든 페니 가치가 있습니다. 추가 비용이 청구되기 전에 계정을 취소해야합니다. 이것은 프로필-내 돈-사전 승인 된 지불-업데이트의 페이팔 계정에서 수행됩니다.