Ajax PHP JavaScript MySQL implementiert einen einfachen, aktualisierungsfreien Online-Chatroom

Dieser Artikel stellt hauptsächlich Ajax PHP JavaScript zur Implementierung eines einfachen Online-Chatrooms ohne Aktualisierung vor. Interessierte Freunde können sich auf

beziehen, um diese zwei Tage besser zu nutzen relevante Kenntnisse über Ajax erworben und einen einfachen Online-Chatroom erstellt.

Idee

Um einen Chatroom zu implementieren, müssen im Wesentlichen Daten über Ajax weitergeleitet werden und PHP den Unterschied in den Daten erkennen lassen und suchen Sie und übergeben Sie es dann an das Front-End-JavaScript, um die Seite zu aktualisieren und die Funktion eines Instant-Chats zu erreichen.

Nachrichtenanzeigebereich

Der Nachrichtenanzeigebereich ist ein p-Block. Wir verwenden Ajax, um die serverseitigen Informationen abzurufen, und verwenden JavaScript, um die Seite zu aktualisieren.

<h3>消息显示区</h3>
<p id="up">
</p>
<hr />

Nachricht senden

Das Nachrichtenmodul ist, um es ganz klar auszudrücken, der Prozess des Einfügens von Daten in den Server, der ebenfalls relativ einfach ist.

<h3>发言栏</h3>
  <p id="bottom">
    <form action="./chatroom_insert.php">
      <p id="chat_up">
        <span>颜色</span>
        <input type="color" name="color"/>
        <span>表情</span>
        <select name="biaoqing">
          <option value="微笑地">微笑地</option>
          <option value="猥琐地">猥琐地</option>
          <option value="和蔼地">和蔼地</option>
          <option value="目不转睛地">目不转睛地</option>
          <option value="傻傻地">傻傻地</option>
        </select>
        <span>聊天对象</span>
        <select name="receiver">
          <option value="">所有的人</option>
          <option value="老郭">老郭</option>
          <option value="小郭">小郭</option>
          <option value="大郭">大郭</option>
        </select>
      </p>
      <p id="chat_bottom">
        <textarea id="msg" name="msg" style="width:380px;height:auto;"></textarea>
        <input type="button" value="发言" onclick="send()" />
        发言：<span id="result"></span>
      </p>
    </form>
  </p>

Abschnitt

Beginnen Sie mit der Verwendung von Code, um relevante Geschäftslogik zu implementieren.

Nachrichtenanzeige

Unsere Idee ist, dass der Client hin und wieder eine Anfrage an den Server sendet und abfragt, um die neuesten Informationen zu erhalten Daten.

<script>

function showmessage(){
  var ajax = new XMLHttpRequest();
  // 从服务器获取并处理数据
  ajax.onreadystatechange = function(){
    if(ajax.readyState==4) {
      //alert(ajax.responseText); 
      // 将获取到的字符串转换成实体
      eval(&#39;var data = &#39;+ajax.responseText);
      // 遍历data数组，把内部的信息一个个的显示到页面上
      var s = "";
      for(var i = 0 ; i < data.length;i++){
        data[i];
        s += "("+data[i].add_time+") >>>";
        s += "<p style=&#39;color:"+data[i].color+";&#39;>";  
        s += data[i].sender +" 对 " + data[i].receiver +"  "+ data[i].biaoqing+"说：" + data[i].msg;
        s += "</p>";

      }
      // 开始向页面时追加信息
      var showmessage = document.getElementById("up");
      showmessage.innerHTML += s;

    }
  }
  ajax.open(&#39;get&#39;,&#39;./chatroom.php&#39;);
  ajax.send(null);  

}

// 更新信息的执行时机
window.onload = function(){
  //showmessage();  
  // 制作轮询,实现自动的页面更新
  setInterval("showmessage()",3000);
}
</script>

Wichtiger ist die Verwendung der setInterval-Funktion, um eine Intervallauslösung von Anforderungsereignissen zu erreichen.

Nachrichtenversand

Was den Nachrichtenversand betrifft, senden Sie ihn einfach über ein Formular an den Server. Wir verwenden hier die neueste Technologie von Html5, FormData. Im Allgemeinen unterstützen die aktuellen gängigen modernen Browser diese Technologie. Mit FormData können wir die Daten eines Formulars einfach abrufen.

Hinweis: FormData sammelt Formulardaten in Form von Schlüssel-Wert-Paaren, daher muss das entsprechende Formularelement über ein Namensattribut verfügen, andernfalls enthält das Formular keine Daten Für diesen Artikel konnte ein Wert erfasst werden.

 <script>
  function send(){
    // 向服务器差入相关的数据
    var form = document.getElementsByTagName(&#39;form&#39;)[0];
    var formdata = new FormData(form);
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
      if(xhr.readyState==4) {
        //alert(xhr.resposneText);
        document.getElementById("result").innerHTML = xhr.responseText;
        setTimeout("hideresult()",2000);
      }
    }
    xhr.open(&#39;post&#39;,&#39;./chatroom_insert.php&#39;);
    xhr.send(formdata);
    document.getElementById("msg").value="";
    //return false;
  }

  // 2秒后实现提示信息的消失
  function hideresult(){
    document.getElementById(&#39;result&#39;).innerHTML = "";  
  }
</script>

Was es wert ist, darüber nachzudenken, ist: die von der setTimeout-Funktion implementierte Funktion. Nachdem die Feedback-Informationen vom Server erhalten wurden, werden sie rechtzeitig hinter der Schaltfläche „Senden“ aktualisiert, um dem Benutzer ein gutes Erlebnis zu bieten.

Optimierung

Danach können Sie grundsätzlich den Chat implementieren. Der erzielte Effekt wird jedoch sehr schlecht sein, hauptsächlich aufgrund der folgenden Punkte.
•Es gibt keine scrollende Anzeige, Sie müssen jedes Mal manuell nach den neuesten Nachrichten suchen.
•Die erhaltenen Daten enthalten viele doppelte Daten, was Datenverkehr verschwendet und die Anzeige von Informationen erschwert.

Nicht wiederkehrende Daten anzeigen

Für die Anzeige sich wiederholender Daten liegt dies daran, dass wir die Where-Anweisung nicht verwenden, sie jedoch jedes Mal abgerufen zu werden scheint Alle Daten sind weg. Denken Sie nur einmal darüber nach: Wie können wir an die neuesten Daten gelangen?
Und es müssen unterschiedliche Kunden betreut werden.

Hollywood-Prinzip: Komm nicht zu mir, ich komme zu dir

Das ist auch eine Menge Software. Ein Ausdruck der Entwicklungsphilosophie besteht darin, den Kunden entscheiden zu lassen, welche Daten er erhalten möchte, anstatt den Server mit einem Stock zu Tode zu schlagen. Daher müssen wir den Client beim Senden von Datenanfragen optimieren.

<script>
// 记录当前获取到的id的最大值，防止获取到重复的信息
var maxId = 0;
function showmessage(){
  var ajax = new XMLHttpRequest();
  // 从服务器获取并处理数据
  ajax.onreadystatechange = function(){
    if(ajax.readyState==4) {
      //alert(ajax.responseText); 
      // 将获取到的字符串转换成实体
      eval(&#39;var data = &#39;+ajax.responseText);
      // 遍历data数组，把内部的信息一个个的显示到页面上
      var s = "";
      for(var i = 0 ; i < data.length;i++){
        data[i];
        s += "("+data[i].add_time+") >>>";
        s += "<p style=&#39;color:"+data[i].color+";&#39;>";  
        s += data[i].sender +" 对 " + data[i].receiver +"  "+ data[i].biaoqing+"说：" + data[i].msg;
        s += "</p>";
        // 把已经获得的最大的记录id更新
        maxId = data[i].id;
      }
      // 开始向页面时追加信息
      var showmessage = document.getElementById("up");
      showmessage.innerHTML += s;
      //showmessage.scrollTop 可以实现p底部最先展示
      // pnode.scrollHeight而已获得p的高度包括滚动条的高度
      showmessage.scrollTop = showmessage.scrollHeight-showmessage.style.height;
    }
  }
  ajax.open(&#39;get&#39;,&#39;./chatroom.php?maxId=&#39;+maxId);
  ajax.send(null);  

}

// 更新信息的执行时机
window.onload = function(){
  //showmessage();  
  // 制作轮询,实现自动的页面更新
  setInterval("showmessage()",3000);
}
</script>

Optimierung der Anzeige

Die Optimierung der Anzeigeoberfläche ist unerlässlich, wenn ein Datenelement manuell gesendet werden muss . Sehen Sie sich die neuesten Nachrichten an. Wir müssen also den p des Anzeigebereichs festlegen.

Fügen Sie eine Bildlaufleiste hinzu

<style>
  #up {
    height:320px;
    width:100%;
    overflow:auto; 
  }
</style>

Zeigen Sie jedes Mal die neuesten Nachrichten an

Um es ganz klar auszudrücken: Das p unten wird immer zuerst angezeigt.

//showmessage.scrollTop 可以实现p底部最先展示
// pnode.scrollHeight而已获得p的高度包括滚动条的高度
showmessage.scrollTop = showmessage.scrollHeight-showmessage.style.height;

Vollständiger Code

Front-End-Code

<script>
// 记录当前获取到的id的最大值，防止获取到重复的信息
var maxId = 0;
function showmessage(){
  var ajax = new XMLHttpRequest();
  // 从服务器获取并处理数据
  ajax.onreadystatechange = function(){
    if(ajax.readyState==4) {
      //alert(ajax.responseText); 
      // 将获取到的字符串转换成实体
      eval(&#39;var data = &#39;+ajax.responseText);
      // 遍历data数组，把内部的信息一个个的显示到页面上
      var s = "";
      for(var i = 0 ; i < data.length;i++){
        data[i];
        s += "("+data[i].add_time+") >>>";
        s += "<p style=&#39;color:"+data[i].color+";&#39;>";  
        s += data[i].sender +" 对 " + data[i].receiver +"  "+ data[i].biaoqing+"说：" + data[i].msg;
        s += "</p>";
        // 把已经获得的最大的记录id更新
        maxId = data[i].id;
      }
      // 开始向页面时追加信息
      var showmessage = document.getElementById("up");
      showmessage.innerHTML += s;
      //showmessage.scrollTop 可以实现p底部最先展示
      // pnode.scrollHeight而已获得p的高度包括滚动条的高度
      showmessage.scrollTop = showmessage.scrollHeight-showmessage.style.height;
    }
  }
  ajax.open(&#39;get&#39;,&#39;./chatroom.php?maxId=&#39;+maxId);
  ajax.send(null);  

}

// 更新信息的执行时机
window.onload = function(){
  //showmessage();  
  // 制作轮询,实现自动的页面更新
  setInterval("showmessage()",3000);
}
</script>





  
消息显示区
  

  
  

  
发言栏
  

    

      

        颜色
        
        表情
        
          微笑地
          猥琐地
          和蔼地
          目不转睛地
          傻傻地
        
        聊天对象
        
          所有的人
          老郭
          小郭
          大郭
        
      
      

<script>
  function send(){
    // 向服务器差入相关的数据
    var form = document.getElementsByTagName(&#39;form&#39;)[0];
    var formdata = new FormData(form);
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
      if(xhr.readyState==4) {
        //alert(xhr.resposneText);
        document.getElementById("result").innerHTML = xhr.responseText;
        setTimeout("hideresult()",2000);
      }
    }
    xhr.open(&#39;post&#39;,&#39;./chatroom_insert.php&#39;);
    xhr.send(formdata);
    document.getElementById("msg").value="";
    //return false;
  }

  // 2秒后实现提示信息的消失
  function hideresult(){
    document.getElementById(&#39;result&#39;).innerHTML = "";  
  }
</script>
        
        
        发言：
      
    
  

Datenbanktabellenstruktur

mysql> desc message;
+----------+--------------+------+-----+---------+----------------+
| Field  | Type     | Null | Key | Default | Extra     |
+----------+--------------+------+-----+---------+----------------+
| id    | int(100)   | NO  | PRI | NULL  | auto_increment |
| msg   | varchar(255) | NO  |   | NULL  |        |
| sender  | varchar(30) | NO  |   | NULL  |        |
| receiver | varchar(30) | NO  |   | NULL  |        |
| color  | varchar(10) | YES |   | NULL  |        |
| biaoqing | varchar(10) | YES |   | NULL  |        |
| add_time | datetime   | YES |   | NULL  |        |
+----------+--------------+------+-----+---------+----------------+
7 rows in set (0.00 sec)

Serverseitiger Code

<?php

// 获得最新的聊天信息
$conn = mysql_connect(&#39;localhost&#39;,&#39;root&#39;,&#39;mysql&#39;);
mysql_select_db(&#39;test&#39;);
mysql_query(&#39;set names utf8&#39;);

$maxId = $_GET[&#39;maxId&#39;];

// 防止获取重复数据，本次请求的记录结果id要大鱼上次获得的id
$sql = "select * from message where id >"."&#39;$maxId&#39;";
$qry = mysql_query($sql);

$info = array();
while($rst = mysql_fetch_assoc($qry)){
  $info[] = $rst;
}


// 通过json格式给客户端提供数据
echo json_encode($info);


?>

Zusammenfassung und Ausblick

Zusammenfassung

Das war's für das komplette kleine Beispiel. Zur Übersicht: Die heutigen Gewinne sind:
•Wie man mit Hilfe der setInterval-Funktion Daten abfragt
•Zeitgesteuertes Verschwinden von Eingabeaufforderungsdaten mit Hilfe der setTimeout-Funktion
•Wie man die erhält Aktuelle Daten: Clientgesteuertes Senden Der maxId-Parameter.
•So optimieren Sie die Anzeige: Überlauf erzielt Scrolleffekt; pnode.scrollTop steuert die unteren Anzeigeeffekte

Outlook
•Vielleicht Sie werden feststellen, dass der Client-Absender festgelegt ist, weil wir keine Benutzeranmeldung durchführen. Wenn sich der Benutzer anmeldet, kann unser Absender dynamisch aus der Sitzung abgerufen werden. Dies kann auch besser mit den subjektiven Gefühlen der Menschen übereinstimmen.

•Die Benutzeroberfläche ist schlecht gemacht und es gibt keinen Verschönerungseffekt. Der Effekt sollte nach dem Hinzufügen von Bootstrap großartig sein.

•Der Anpassungseffekt für Mobiltelefone ist nicht gut und die Farbsteuerung kann auf Windows Phone nicht normal angezeigt werden.

Verwandte Empfehlungen:

php+webSoket-Implementierung des Chatroom-Beispielcodes (Quellcode im Anhang)

Detailliertes Beispiel für die Implementierung eines Chatbots mithilfe der Python+Slack-API

Das obige ist der detaillierte Inhalt vonAjax PHP JavaScript MySQL implementiert einen einfachen, aktualisierungsfreien Online-Chatroom. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!