Maison développement back-end tutoriel php Ajax PHP JavaScript MySQL implémente une salle de discussion en ligne simple et sans actualisation

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

May 02, 2018 am 10:51 AM
ajax javascript mysql

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 />
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion


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>
Copier après la connexion

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>
Copier après la connexion


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>
Copier après la connexion

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;
Copier après la connexion

Code complet

Code frontal





Ajax 聊天室

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

Copier après la connexion


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)
Copier après la connexion

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


?>
Copier après la connexion


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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Compétences de traitement de structures de données volumineuses de PHP Compétences de traitement de structures de données volumineuses de PHP May 08, 2024 am 10:24 AM

Compétences en matière de traitement de la structure des Big Data : Chunking : décomposez l'ensemble de données et traitez-le en morceaux pour réduire la consommation de mémoire. Générateur : générez des éléments de données un par un sans charger l'intégralité de l'ensemble de données, adapté à des ensembles de données illimités. Streaming : lisez des fichiers ou interrogez les résultats ligne par ligne, adapté aux fichiers volumineux ou aux données distantes. Stockage externe : pour les ensembles de données très volumineux, stockez les données dans une base de données ou NoSQL.

Comment optimiser les performances des requêtes MySQL en PHP ? Comment optimiser les performances des requêtes MySQL en PHP ? Jun 03, 2024 pm 08:11 PM

Les performances des requêtes MySQL peuvent être optimisées en créant des index qui réduisent le temps de recherche d'une complexité linéaire à une complexité logarithmique. Utilisez PreparedStatements pour empêcher l’injection SQL et améliorer les performances des requêtes. Limitez les résultats des requêtes et réduisez la quantité de données traitées par le serveur. Optimisez les requêtes de jointure, notamment en utilisant des types de jointure appropriés, en créant des index et en envisageant l'utilisation de sous-requêtes. Analyser les requêtes pour identifier les goulots d'étranglement ; utiliser la mise en cache pour réduire la charge de la base de données ; optimiser le code PHP afin de minimiser les frais généraux.

Comment utiliser la sauvegarde et la restauration MySQL en PHP ? Comment utiliser la sauvegarde et la restauration MySQL en PHP ? Jun 03, 2024 pm 12:19 PM

La sauvegarde et la restauration d'une base de données MySQL en PHP peuvent être réalisées en suivant ces étapes : Sauvegarder la base de données : Utilisez la commande mysqldump pour vider la base de données dans un fichier SQL. Restaurer la base de données : utilisez la commande mysql pour restaurer la base de données à partir de fichiers SQL.

Comment insérer des données dans une table MySQL en utilisant PHP ? Comment insérer des données dans une table MySQL en utilisant PHP ? Jun 02, 2024 pm 02:26 PM

Comment insérer des données dans une table MySQL ? Connectez-vous à la base de données : utilisez mysqli pour établir une connexion à la base de données. Préparez la requête SQL : Écrivez une instruction INSERT pour spécifier les colonnes et les valeurs à insérer. Exécuter la requête : utilisez la méthode query() pour exécuter la requête d'insertion en cas de succès, un message de confirmation sera généré.

Comment corriger les erreurs mysql_native_password non chargé sur MySQL 8.4 Comment corriger les erreurs mysql_native_password non chargé sur MySQL 8.4 Dec 09, 2024 am 11:42 AM

L'un des changements majeurs introduits dans MySQL 8.4 (la dernière version LTS en 2024) est que le plugin « MySQL Native Password » n'est plus activé par défaut. De plus, MySQL 9.0 supprime complètement ce plugin. Ce changement affecte PHP et d'autres applications

Comment utiliser les procédures stockées MySQL en PHP ? Comment utiliser les procédures stockées MySQL en PHP ? Jun 02, 2024 pm 02:13 PM

Pour utiliser les procédures stockées MySQL en PHP : Utilisez PDO ou l'extension MySQLi pour vous connecter à une base de données MySQL. Préparez l'instruction pour appeler la procédure stockée. Exécutez la procédure stockée. Traitez le jeu de résultats (si la procédure stockée renvoie des résultats). Fermez la connexion à la base de données.

Comment créer une table MySQL en utilisant PHP ? Comment créer une table MySQL en utilisant PHP ? Jun 04, 2024 pm 01:57 PM

La création d'une table MySQL à l'aide de PHP nécessite les étapes suivantes : Connectez-vous à la base de données. Créez la base de données si elle n'existe pas. Sélectionnez une base de données. Créer un tableau. Exécutez la requête. Fermez la connexion.

PHP vs Ajax : solutions pour créer du contenu chargé dynamiquement PHP vs Ajax : solutions pour créer du contenu chargé dynamiquement Jun 06, 2024 pm 01:12 PM

Ajax (Asynchronous JavaScript et XML) permet d'ajouter du contenu dynamique sans recharger la page. En utilisant PHP et Ajax, vous pouvez charger dynamiquement une liste de produits : HTML crée une page avec un élément conteneur et la requête Ajax ajoute les données à l'élément après l'avoir chargé. JavaScript utilise Ajax pour envoyer une requête au serveur via XMLHttpRequest afin d'obtenir des données produit au format JSON à partir du serveur. PHP utilise MySQL pour interroger les données produit de la base de données et les encoder au format JSON. JavaScript analyse les données JSON et les affiche dans le conteneur de pages. Cliquer sur le bouton déclenche une requête Ajax pour charger la liste de produits.

See all articles