Comment mettre en œuvre une salle de discussion en ligne en utilisant PHP

Alors que les gens deviennent de plus en plus dépendants d'Internet, les forums de discussion en ligne en temps réel sont devenus une fonctionnalité standard de nombreux sites Web. Cet article explique comment utiliser PHP pour implémenter une salle de discussion en ligne de base en temps réel.

1. Prérequis

Avant de commencer, assurez-vous d'avoir les conditions suivantes dans votre environnement :

# #PHP5 ou supérieur ;
• Serveur Web (tel qu'Apache, Nginx)
• Base de données HTML et CSS ;
• Créer une base de données et des tables

2. Tout d'abord, créez une base de données MySQL et une table pour enregistrer les enregistrements de discussion. Exécutez la commande suivante :

CREATE DATABASE chat; USE chat; CREATE TABLE messages ( id INT(11) AUTO_INCREMENT PRIMARY KEY, username VARCHAR(50) NOT NULL, message TEXT NOT NULL, created_at DATETIME DEFAULT CURRENT_TIMESTAMP );

Copier après la connexion

HTML et CSS

3. Ensuite, créez le fichier HTML chat.html et le fichier CSS chat.css. Seuls les codes clés HTML et CSS sont affichés ici :

     
  
 
 
Chat Room
 
 
 
 
   Send 
 
 
    

body { margin: 0; padding: 0; font-family: Arial, sans-serif; } .chat-container { width: 80%; margin: 50px auto; border: 1px solid #ccc; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1); } .chat-header { padding: 10px; background-color: #eee; } .chat-header h2 { margin: 0; font-size: 18px; } .chat-messages { height: 300px; overflow: auto; padding: 10px; } .chat-form { padding: 10px; } .chat-form form { display: flex; flex-wrap: wrap; } .chat-form input { flex: 1; margin: 0 5px 0 0; padding: 10px; border: none; border-radius: 3px; } .chat-form button { flex-basis: 100px; padding: 10px; background-color: #0099ff; color: #fff; border: none; border-radius: 3px; cursor: pointer; transition: background-color 0.2s; } .chat-form button:hover { background-color: #0088cc; }

backend PHP

4. Enfin, utilisez PHP pour écrire du code backend afin d'implémenter des fonctions de communication en temps réel. Créez un fichier nommé chat.php qui contient le code suivant :

 'success']); } else { echo json_encode(['status' => 'error', 'message' => mysqli_error($conn)]); } } else { /* 处理消息获取请求 */ $last_id = $_GET['last_id']; $sql = "SELECT * FROM messages WHERE id > $last_id ORDER BY created_at ASC"; $result = mysqli_query($conn, $sql); $messages = []; while ($row = mysqli_fetch_assoc($result)) { $messages[] = $row; } echo json_encode(['status' => 'success', 'messages' => $messages]); } mysqli_close($conn);

Copier après la connexion

Connectez-vous à la base de données : Dans le Fichier PHP, la connexion à la base de données est une opération obligatoire. Dans cet exemple, nous utilisons la fonction mysqli_connect pour établir une connexion avec la base de données ;

Traitement des requêtes d'envoi de messages : Si la méthode de requête soumise par le client est POST, cela signifie que l'utilisateur a envoyé un nouveau message. Dans ce cas, nous pouvons sauvegarder l'historique des discussions en récupérant le nom d'utilisateur et le texte du message du tableau $_POST et en les insérant dans la table des messages. La méthode de requête est GET, ce qui signifie que le client doit obtenir tous les nouveaux messages. Dans ce cas, nous pouvons obtenir l'ID du dernier message du tableau $_GET et récupérer tous les nouveaux messages de la table des messages et les renvoyer sous forme de données JSON.
JavaScript

$(function() { /* 存储最后一条消息的ID */ var last_id = 0; /* 获取所有消息 */ function getMessages() { $.get('chat.php', {'last_id': last_id}, function(data) { if (data.status == 'success') { /* 迭代所有消息并添加到聊天室中 */ $.each(data.messages, function(index, message) { var html = '
' + message.username + ': ' + message.message + '
'; $('.chat-messages').append(html); /* 更新最后一条消息的ID */ last_id = message.id; }); /* 滚动到底部以显示最新的消息 */ $('.chat-messages').scrollTop($('.chat-messages')[0].scrollHeight); } }, 'json'); } /* 获取所有消息 */ getMessages(); /* 处理消息发送表单的提交事件 */ $('.chat-form form').submit(function(e) { e.preventDefault(); /* 获取表单输入 */ var username = $('input[name="username"]').val(); var message = $('input[name="message"]').val(); /* 发送AJAX请求 */ $.post('chat.php', {'username': username, 'message': message}, function(data) { if (data.status == 'success') { /* 清空输入框 */ $('input[name="message"]').val(''); } else { /* 处理错误 */ alert('Error: ' + data.message); } }, 'json'); }); /* 每5秒获取一次消息 */ setInterval(getMessages, 5000); });

Copier après la connexion
5. Le code ci-dessus utilise jQuery et AJAX pour effectuer les tâches suivantes :

Récupérer tous les nouveaux des messages régulièrement et ils sont ajoutés au salon de discussion ;

Utilisez AJAX pour insérer de nouveaux messages dans la base de données lorsque le formulaire d'envoi de message est soumis, et effacez le formulaire après succès ; #Every 5 Recevez tous les nouveaux messages en quelques secondes.

• Test Chat Room
• Maintenant, tout est prêt. Ouvrez le fichier chat.html et saisissez votre nom d'utilisateur et un message, puis cliquez sur le bouton "Envoyer". Si tout va bien, vous devriez voir tous vos messages précédemment envoyés ainsi que celui que vous venez d'envoyer. Félicitations, vous avez réussi à créer un salon de discussion en ligne en temps réel !

6. Dans cet article, nous avons présenté comment créer une salle de discussion en ligne en temps réel à l'aide de PHP et AJAX. Bien que ce salon de discussion soit relativement simple, sur cette base, vous pouvez essayer de l'améliorer vous-même et ajouter plus de fonctionnalités, telles que des messages privés, des émoticônes, etc. J'espère que vous pourrez développer des applications Web plus pratiques sur cette base.

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!