Ajax PHP JavaScript MySQL implémente une salle de discussion en ligne simple et sans actualisation

Cet article présente principalement Ajax PHP JavaScript MySQL pour implémenter une salle de discussion en ligne simple sans actualisation. Il a une certaine valeur de référence. Les amis intéressés peuvent se référer à

pour une meilleure utilisation de ces deux jours. connaissance pertinente d'Ajax et création d'un salon de discussion en ligne simple.

Idée

Pour mettre en œuvre une salle de discussion, il s'agit essentiellement de transmettre des données via Ajax et de laisser PHP se rendre compte de la différence dans les données et recherchez, puis remettez-le au JavaScript frontal pour mettre à jour la page afin d'obtenir la fonction de chat instantané.

Zone d'affichage des messages

La zone d'affichage des messages est un bloc p Nous utiliserons Ajax pour obtenir les informations côté serveur et utiliserons JavaScript pour mettre à jour la page.

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

Envoyer un message

Le module de message, pour parler franchement, est le processus d'insertion de données dans le serveur, qui est également relativement simple.

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

Section

Commencez à utiliser du code pour implémenter une logique métier pertinente.

Affichage des messages

Notre idée est que de temps en temps, le client envoie une requête au serveur et interroge pour obtenir la dernière données.

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

Le plus important est l'utilisation de la fonction setInterval pour obtenir un déclenchement par intervalles des événements de requête.

Envoi de message

Concernant l'envoi de message, il suffit de l'envoyer au serveur via un formulaire. Nous utilisons ici la dernière technologie HTML5, FormData. De manière générale, les navigateurs modernes grand public actuels prennent en charge cette technologie. En utilisant FormData, nous pouvons facilement obtenir les données d'un formulaire.

Remarque : FormData collecte les données du formulaire sous la forme de paires clé-valeur, donc l'élément de formulaire correspondant doit avoir un attribut de nom, sinon le formulaire n'aura aucune donnée une valeur pourrait être collectée pour cet article.

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

Ce qui mérite réflexion, c'est : la fonction implémentée par la fonction setTimeout. Après avoir obtenu les informations de retour du serveur, elles sont mises à jour à temps derrière le bouton d'envoi pour offrir à l'utilisateur une bonne expérience.

Optimisation

Après cela, vous pouvez essentiellement implémenter le chat. Cependant, l’effet obtenu sera très mauvais, principalement à cause des points suivants.
•Il n'y a pas d'affichage défilant, vous devez vérifier manuellement les dernières nouvelles à chaque fois.
•Les données obtenues contiennent beaucoup de données en double, ce qui gaspille du trafic et rend la visualisation des informations peu pratique.

Afficher les données non répétitives

Pour afficher les données répétitives, c'est parce que nous n'utilisons pas l'instruction Where, mais elle semble être obtenue à chaque fois Toutes les données ont disparu. Pensez-y, comment pouvons-nous obtenir les dernières données ?
Et différents clients doivent être pris en charge.

Principe d'Hollywood : Ne viens pas à moi, je viendrai à toi

Ceci il y a aussi beaucoup de logiciels. Une manifestation de la philosophie de développement est de laisser le client décider quelles données obtenir, plutôt que de battre le serveur à mort avec un bâton. Nous devons donc optimiser le client dans l'envoi de demandes de données.

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

Optimiser l'affichage

Optimiser l'interface d'affichage est primordial, personne ne peut tolérer l'envoi d'une donnée et alors vous devez vérifier les dernières nouvelles manuellement. Nous devons donc définir le p de la zone d'affichage.

Ajouter une barre de défilement

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

Afficher les dernières nouvelles à chaque fois

Pour parler franchement, le p en bas est toujours affiché en premier.

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

Code complet

Code frontal

<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>
        
        
        发言：
      
    
  

Structure de la table de base de données

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)

Code côté serveur

<?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);


?>

Résumé et Outlook

Résumé

C'est tout pour le petit exemple complet. Pour rappel, les gains d'aujourd'hui sont :
•Comment interroger pour obtenir des données, à l'aide de la fonction setInterval
•Disparition programmée des données d'invite, à l'aide de la fonction setTimeout
•Comment obtenir le dernières données : envoi contrôlé par le client Le paramètre maxId.
•Comment optimiser l'affichage : le débordement permet d'obtenir un effet de défilement ; pnode.scrollTop contrôle les effets du bas de l'affichage

Outlook
•Peut-être vous constaterez que l’expéditeur du client est fixe, c’est parce que nous ne faisons pas de connexion utilisateur. Si l'utilisateur se connecte, notre expéditeur peut être obtenu dynamiquement à partir de la session. Cela peut également être plus cohérent avec les sentiments subjectifs des gens.

•L'interface est de mauvaise qualité et il n'y a aucun effet d'embellissement. L'effet devrait être génial après l'ajout de Bootstrap.

•L'effet d'adaptation du téléphone mobile n'est pas bon et le contrôle des couleurs ne peut pas être affiché normalement sur Windows Phone.

Recommandations associées :

implémentation php+webSoket d'un exemple de code de salle de discussion (code source ci-joint)

Exemple détaillé de la façon d'implémenter un chatbot à l'aide de l'API Python+Slack

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!