recherche

Maison  >  Article  >  développement back-end  >  Comment mettre en œuvre une salle de discussion en ligne en utilisant PHP

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

WBOY
WBOYoriginal
2023-06-27 08:56:481586parcourir

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
  1. 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 : 
    2. 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
);
La commande ci-dessus créera une base de données nommée "chat" et y créera une table nommée "messages" pour stocker les enregistrements de discussion. La table contient 4 champs, à savoir "id", "username", "message" et "created_at". Parmi eux, "id" est la clé primaire automatiquement incrémentée, "username" est le nom d'utilisateur de l'expéditeur, "message" est le contenu du message et "created_at" est l'heure d'envoi du message.

HTML et CSS

  1. 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.html

<!DOCTYPE html>
<html>
<head>
    <title>Online Chat Room</title>
    <link rel="stylesheet" type="text/css" href="chat.css">
</head>
<body>
    <div class="chat-container">
        <div class="chat-header">
            <h2>Chat Room</h2>
        </div>
        <div class="chat-messages"></div>
        <div class="chat-form">
            <form>
                <input type="text" name="username" placeholder="Username" required>
                <input type="text" name="message" placeholder="Type your message here" required>
                <button type="submit">Send</button>
            </form>
        </div>
    </div>
    <script src="jquery.min.js"></script>
    <script src="chat.js"></script>
</body>
</html>

chat.css

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

Une salle de discussion de base est créée ici La page contient une zone d'historique de discussion, un formulaire d'envoi de message et d'autres éléments associés.

backend PHP

  1. 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 : 
    2. <?php
/* 设置响应格式为JSON */
header('Content-Type: application/json');

/* 连接数据库 */
define('DB_HOST', 'localhost');
define('DB_USER', 'root');
define('DB_PASSWORD', '123456');
define('DB_NAME', 'chat');

$conn = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);

/* 检查数据库连接是否成功 */
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

/* 处理消息发送请求 */
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $username = $_POST['username'];
    $message = $_POST['message'];

    $sql = "INSERT INTO messages (username, message) VALUES ('$username', '$message')";

    if (mysqli_query($conn, $sql)) {
        echo json_encode(['status' => '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);
Le code ci-dessus contient les trois parties suivantes :

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
Enfin, écrivez le code JavaScript dans chat.js pour gérer la communication en temps réel sur la page. Dans cet exemple, nous utiliserons jQuery pour simplifier le code et gérer les requêtes AJAX. Ce qui suit est la partie principale du fichier chat.js : 
    $(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 = '<p><strong>' + message.username + ':</strong> ' + message.message + '</p>';
                    $('.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);
});
  1. 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 !
Conclusion
  1. 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!

Déclaration：
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
Article précédent：Récupérez les clés des éléments dans un tableau en utilisant la fonction PHP array_keys()Article suivant：Récupérez les clés des éléments dans un tableau en utilisant la fonction PHP array_keys()

Articles Liés

Voir plus