recherche

Maison >développement back-end >tutoriel php >Comment ajouter une fonctionnalité de chat utilisateur en temps réel à votre site Web à l'aide de PHP et MQTT

Comment ajouter une fonctionnalité de chat utilisateur en temps réel à votre site Web à l'aide de PHP et MQTT

WBOY
WBOYoriginal
2023-07-08 19:46:371538parcourir

Comment utiliser PHP et MQTT pour ajouter une fonction de chat utilisateur en temps réel au site Web

À l'ère d'Internet d'aujourd'hui, les utilisateurs de sites Web ont de plus en plus besoin de communication et de communication en temps réel. Afin de répondre à cette demande, nous pouvons utiliser PHP et MQTT pour. ajoutez des utilisateurs en temps réel à la fonction de chat. Cet article expliquera comment utiliser PHP et MQTT pour implémenter la fonction de chat utilisateur en temps réel du site Web et fournira des exemples de code.

  1. Assurer la préparation de l'environnement
    Avant de commencer, assurez-vous d'avoir installé et configuré l'environnement d'exécution de PHP et MQTT. Vous pouvez utiliser un environnement de développement intégré tel que XAMPP, ou vous pouvez configurer les environnements d'exécution de PHP et MQTT séparément. Dans le même temps, vous avez également besoin d'un courtier MQTT. Vous pouvez utiliser un courtier MQTT open source tel que Mosquitto.
  2. Installer l'extension PHP MQTT
    Pour pouvoir utiliser le protocole MQTT en PHP, nous devons installer l'extension PHP MQTT. Vous pouvez télécharger, compiler et installer l'extension PHP MQTT depuis GitHub, ou utiliser Composer pour l'installer.
  3. Connectez-vous au courtier MQTT
    Dans le code PHP, nous devons d'abord nous connecter au courtier MQTT afin d'envoyer et de recevoir des messages. Voici un exemple de connexion à MQTT Broker : 
<?php
require("phpMQTT.php");

$mqtt = new phpMQTT("mqtt.example.com", 1883, "phpMQTT Chat Client");
if (!$mqtt->connect()) {
    exit("连接MQTT Broker失败");
}

Dans le code ci-dessus, nous utilisons la classe phpMQTT pour nous connecter à MQTT Broker. Notez que vous devez remplacer « Mqtt.example.com » par l'adresse de votre propre courtier MQTT.

  1. Envoi et réception de messages
    Une fois connectés avec succès au courtier MQTT, nous pouvons envoyer et recevoir des messages en publiant et en nous abonnant à des sujets. Voici un exemple d'envoi de message : 
<?php
$topic = "chat";
$message = "Hello, World!";
$mqtt->publish($topic, $message);

Dans le code ci-dessus, nous avons publié un sujet nommé "chat" et envoyé un message.

Ce qui suit est un exemple de réception de messages : 

<?php
$topic = "chat";
$mqtt->subscribe($topic);
while($mqtt->proc()){
    $message = $mqtt->message;
    echo "收到消息：".$message;
}

Dans le code ci-dessus, nous nous abonnons au sujet « chat » et utilisons une boucle pour recevoir en continu des messages et les imprimer.

  1. Ajouter une interface de discussion au site Web
    Pour ajouter une fonction de chat au site Web, nous devons intégrer une fenêtre de discussion dans l'interface frontale, recevoir des messages de MQTT Broker via JavaScript et les afficher dans la fenêtre de discussion.

Ce qui suit est le code HTML d'une simple fenêtre de discussion : 

<!DOCTYPE html>
<html>
<head>
    <title>实时用户聊天</title>
</head>
<body>
    <div id="chat-window">
        <ul id="chat-messages"></ul>
        <input type="text" id="message-input" placeholder="输入消息">
        <button id="send-button">发送</button>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="mqttws31.js"></script>
    <script>
        var mqtt = new Paho.MQTT.Client("mqtt.example.com", Number(1883), "jsMQTT Chat Client");
        mqtt.onMessageArrived = function(message) {
            $("#chat-messages").append("<li>" + message.payloadString + "</li>");
        };
        mqtt.connect({onSuccess:function() {
            mqtt.subscribe("chat");
        }});
        
        $(document).ready(function() {
            $("#send-button").click(function() {
                var message = $("#message-input").val();
                var message = new Paho.MQTT.Message(message);
                message.destinationName = "chat";
                mqtt.send(message);
                $("#message-input").val("");
            });
        });
    </script>
</body>
</html>

Dans le code ci-dessus, nous utilisons la classe Paho.MQTT.Client pour nous connecter au courtier MQTT et implémenter le chat en nous abonnant à des sujets, en recevant des messages et Fonction d'envoi de messages.

En enregistrant le code ci-dessus sous forme de fichier HTML et en remplaçant l'adresse du courtier MQTT par votre propre adresse, vous pouvez utiliser la fonction de chat utilisateur en direct sur votre site Web.

Résumé
Cet article explique comment ajouter une fonctionnalité de chat utilisateur en temps réel à votre site Web à l'aide de PHP et MQTT. En nous connectant à MQTT Broker, en envoyant et en recevant des messages et en ajoutant une interface de chat au site Web, nous pouvons implémenter une simple fonction de chat utilisateur en temps réel. J'espère que cet article pourra vous aider à accomplir cette tâche.

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!

php JavaScript composer html 循环 并发 github
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：Exemples de mise à l'échelle élastique et de configuration de sauvegarde automatique dans l'accueil de l'interface API PHP Tencent Cloud ServerArticle suivant：Exemples de mise à l'échelle élastique et de configuration de sauvegarde automatique dans l'accueil de l'interface API PHP Tencent Cloud Server

Articles Liés

Voir plus