


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('var data = '+ajax.responseText); // 遍历data数组,把内部的信息一个个的显示到页面上 var s = ""; for(var i = 0 ; i < data.length;i++){ data[i]; s += "("+data[i].add_time+") >>>"; s += "<p style='color:"+data[i].color+";'>"; 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('get','./chatroom.php'); 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('form')[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('post','./chatroom_insert.php'); xhr.send(formdata); document.getElementById("msg").value=""; //return false; } // 2秒后实现提示信息的消失 function hideresult(){ document.getElementById('result').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('var data = '+ajax.responseText); // 遍历data数组,把内部的信息一个个的显示到页面上 var s = ""; for(var i = 0 ; i < data.length;i++){ data[i]; s += "("+data[i].add_time+") >>>"; s += "<p style='color:"+data[i].color+";'>"; 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('get','./chatroom.php?maxId='+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
Ajax 聊天室 <script> // 记录当前获取到的id的最大值,防止获取到重复的信息 var maxId = 0; function showmessage(){ var ajax = new XMLHttpRequest(); // 从服务器获取并处理数据 ajax.onreadystatechange = function(){ if(ajax.readyState==4) { //alert(ajax.responseText); // 将获取到的字符串转换成实体 eval('var data = '+ajax.responseText); // 遍历data数组,把内部的信息一个个的显示到页面上 var s = ""; for(var i = 0 ; i < data.length;i++){ data[i]; s += "("+data[i].add_time+") >>>"; s += "<p style='color:"+data[i].color+";'>"; 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('get','./chatroom.php?maxId='+maxId); ajax.send(null); } // 更新信息的执行时机 window.onload = function(){ //showmessage(); // 制作轮询,实现自动的页面更新 setInterval("showmessage()",3000); } </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('localhost','root','mysql'); mysql_select_db('test'); mysql_query('set names utf8'); $maxId = $_GET['maxId']; // 防止获取重复数据,本次请求的记录结果id要大鱼上次获得的id $sql = "select * from message where id >"."'$maxId'"; $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!

Outils d'IA chauds

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

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

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

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

Vous pouvez ouvrir PHPMYADMIN via les étapes suivantes: 1. Connectez-vous au panneau de configuration du site Web; 2. Trouvez et cliquez sur l'icône PHPMYADMIN; 3. Entrez les informations d'identification MySQL; 4. Cliquez sur "Connexion".

MySQL est un système de gestion de la base de données relationnel open source, principalement utilisé pour stocker et récupérer les données rapidement et de manière fiable. Son principe de travail comprend les demandes des clients, la résolution de requête, l'exécution des requêtes et les résultats de retour. Des exemples d'utilisation comprennent la création de tables, l'insertion et la question des données et les fonctionnalités avancées telles que les opérations de jointure. Les erreurs communes impliquent la syntaxe SQL, les types de données et les autorisations, et les suggestions d'optimisation incluent l'utilisation d'index, les requêtes optimisées et la partition de tables.

Redis utilise une architecture filetée unique pour fournir des performances élevées, une simplicité et une cohérence. Il utilise le multiplexage d'E / S, les boucles d'événements, les E / S non bloquantes et la mémoire partagée pour améliorer la concurrence, mais avec des limites de limitations de concurrence, un point d'échec unique et inadapté aux charges de travail à forte intensité d'écriture.

La position de MySQL dans les bases de données et la programmation est très importante. Il s'agit d'un système de gestion de base de données relationnel open source qui est largement utilisé dans divers scénarios d'application. 1) MySQL fournit des fonctions efficaces de stockage de données, d'organisation et de récupération, en prenant en charge les systèmes Web, mobiles et de niveau d'entreprise. 2) Il utilise une architecture client-serveur, prend en charge plusieurs moteurs de stockage et optimisation d'index. 3) Les usages de base incluent la création de tables et l'insertion de données, et les usages avancés impliquent des jointures multiples et des requêtes complexes. 4) Des questions fréquemment posées telles que les erreurs de syntaxe SQL et les problèmes de performances peuvent être déboguées via la commande Explication et le journal de requête lente. 5) Les méthodes d'optimisation des performances comprennent l'utilisation rationnelle des indices, la requête optimisée et l'utilisation des caches. Les meilleures pratiques incluent l'utilisation des transactions et des acteurs préparés

MySQL est choisi pour ses performances, sa fiabilité, sa facilité d'utilisation et son soutien communautaire. 1.MySQL fournit des fonctions de stockage et de récupération de données efficaces, prenant en charge plusieurs types de données et opérations de requête avancées. 2. Adoptez l'architecture client-serveur et plusieurs moteurs de stockage pour prendre en charge l'optimisation des transactions et des requêtes. 3. Facile à utiliser, prend en charge une variété de systèmes d'exploitation et de langages de programmation. 4. Avoir un solide soutien communautaire et fournir des ressources et des solutions riches.

Apache se connecte à une base de données nécessite les étapes suivantes: Installez le pilote de base de données. Configurez le fichier web.xml pour créer un pool de connexion. Créez une source de données JDBC et spécifiez les paramètres de connexion. Utilisez l'API JDBC pour accéder à la base de données à partir du code Java, y compris l'obtention de connexions, la création d'instructions, les paramètres de liaison, l'exécution de requêtes ou de mises à jour et de traitement des résultats.

La surveillance efficace des bases de données Redis est essentielle pour maintenir des performances optimales, identifier les goulots d'étranglement potentiels et assurer la fiabilité globale du système. Le service Redis Exporter est un utilitaire puissant conçu pour surveiller les bases de données Redis à l'aide de Prometheus. Ce didacticiel vous guidera à travers la configuration et la configuration complètes du service Redis Exportateur, en vous garantissant de créer des solutions de surveillance de manière transparente. En étudiant ce tutoriel, vous réaliserez les paramètres de surveillance entièrement opérationnels

Le processus de démarrage de MySQL dans Docker se compose des étapes suivantes: Tirez l'image MySQL pour créer et démarrer le conteneur, définir le mot de passe de l'utilisateur racine et mapper la connexion de vérification du port Créez la base de données et l'utilisateur accorde toutes les autorisations sur la base de données
