


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

AI Hentai Generator
Générez AI Hentai gratuitement.

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)

Sujets chauds

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.

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.

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 ? 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é.

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

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.

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.

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.
