recherche

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

Comment ajouter des notifications en temps réel à votre site Web à l'aide de PHP et MQTT

王林
王林original
2023-07-08 20:43:441542parcourir

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

La fonctionnalité de notification en temps réel pour les applications Web devient de plus en plus populaire parmi les sites Web modernes. Les notifications en temps réel peuvent être utilisées à diverses fins, telles que le chat en direct, les commentaires en temps réel et les alertes de nouveaux messages. Dans cet article, nous expliquerons comment ajouter une fonctionnalité de notification en temps réel à votre site Web à l'aide des protocoles PHP et MQTT.

Qu'est-ce que le protocole MQTT ?

MQTT (Message Queuing Telemetry Transport) est un protocole léger de transmission de messages conçu pour fournir une communication instantanée efficace. Il est conçu pour les environnements réseau à faible bande passante et instables, et convient parfaitement à la transmission de messages pour les applications IoT.

Le protocole MQTT est basé sur le modèle de publication/abonnement. Le client peut s'abonner à un sujet spécifique (topic). Lorsque de nouveaux messages sont publiés sur le sujet, les abonnés recevront des notifications en temps réel.

Préparation

Avant de commencer, nous devons nous assurer que les conditions suivantes sont remplies :

  1. Un serveur exécutant un courtier MQTT, tel que Mosquitto.
  2. Environnement de développement PHP, y compris l'installation de l'extension Mosquitto MQTT.

Installez l'extension Mosquitto MQTT et vous pourrez utiliser la commande pecl : 

pecl install Mosquitto-alpha

Implémentez la fonction de notification en temps réel

Dans cet exemple, nous allons créer une application de chat simple où les utilisateurs peuvent envoyer des messages et recevoir des messages envoyés par d'autres utilisateurs en temps réel. Nous utiliserons PHP et MQTT pour implémenter cette fonctionnalité.

Tout d'abord, nous devons créer un client MQTT, établir une connexion avec le courtier MQTT et nous abonner à un sujet. Nous utiliserons la bibliothèque phpMQTT pour simplifier l'implémentation des clients MQTT. La bibliothèque phpMQTT peut être installée via le code suivant : 

composer require bluerhinos/phpmqtt

Ensuite, nous créons un fichier appelé chat.php et ajoutons le code suivant : chat.php的文件，并添加以下代码：

<?php
require("phpMQTT.php");

$mqtt = new phpMQTT("localhost", 1883, "clientId_" . uniqid());
if ($mqtt->connect()) {
    $mqtt->subscribe("chat_room", 0);
    while ($mqtt->proc()) {
    }
    $mqtt->close();
} else {
    echo "连接MQTT代理失败";
}

在上述代码中，我们首先创建了一个mqtt实例，并使用localhost和1883作为MQTT代理的主机和端口。然后，我们通过$mqtt->connect()方法建立与MQTT代理的连接。如果连接成功，则使用$mqtt->subscribe("chat_room", 0)订阅一个名为chat_room的主题。最后，我们使用$mqtt->proc()方法来保持与MQTT代理的连接。

接下来，我们创建一个名为index.html的前端文件，并添加以下代码：

<!DOCTYPE html>
<html>
<head>
    <title>实时聊天</title>
    <meta charset="utf-8">
    <style>
        #chat_log {
            height: 300px;
            overflow-y: scroll;
        }
    </style>
</head>
<body>
    <h1>实时聊天</h1>
    <div id="chat_log"></div>
    <input type="text" id="message" placeholder="请输入消息">
    <button id="send_button">发送</button>
  
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        var clientId = 'web_' + new Date().getTime();
        var mqtt = new Paho.MQTT.Client("localhost", 1883, clientId);
        var topic = "chat_room";
      
        mqtt.onConnectionLost = function(responseObject) {
            console.log('连接丢失');
        };
      
        mqtt.onMessageArrived = function(message) {
            var msg = message.payloadString;
            $("#chat_log").append('<p>' + msg + '</p>');
        };
      
        mqtt.connect({
            onSuccess: function() {
                mqtt.subscribe(topic);
            }
        });
      
        $(document).ready(function() {
            $("#send_button").click(function() {
                var message = $("#message").val();
                mqtt.send(topic, message);
                $("#message").val('');
            });
        });
    </script>
</body>
</html>

在上述代码中，我们首先在mqtt.onConnectionLost方法中处理与MQTT代理的连接丢失事件。在mqtt.onMessageArrived方法中，我们接收到新消息时向聊天记录中添加该消息。

通过调用mqtt.connect()方法并提供一个回调函数，在连接成功后订阅chat_room主题。然后，我们使用jQuery在页面加载时通过$("#send_button").click方法来实现发送消息功能。

最后，我们在浏览器中打开index.htmlrrreee

Dans le code ci-dessus, nous créons d'abord un mqtt instance et utilisez localhost et 1883 comme hôte et port du courtier MQTT. Ensuite, nous établissons une connexion avec le courtier MQTT via la méthode $mqtt->connect(). Si la connexion réussit, utilisez $mqtt->subscribe("chat_room", 0) pour vous abonner à un sujet nommé chat_room. Enfin, nous utilisons la méthode $mqtt->proc() pour maintenir la connexion au courtier MQTT.

Ensuite, nous créons un fichier frontal appelé index.html et ajoutons le code suivant :

rrreee

Dans le code ci-dessus, nous ajoutons d'abord le code suivant dans mqtt.onConnectionLost La méthode gère l'événement de perte de connexion avec le courtier MQTT. Dans la méthode <code>mqtt.onMessageArrived, lorsque nous recevons un nouveau message, nous l'ajoutons à l'historique des discussions. 🎜🎜En appelant la méthode mqtt.connect() et en fournissant une fonction de rappel, abonnez-vous au sujet chat_room une fois la connexion établie. Ensuite, nous utilisons jQuery pour implémenter la fonction d'envoi de message via la méthode $("#send_button").click lorsque la page est chargée. 🎜🎜Enfin, nous ouvrons le fichier index.html dans le navigateur et vous pouvez voir l'interface de chat. 🎜🎜Résumé🎜🎜Cet article explique comment ajouter une fonctionnalité de notification en temps réel à votre site Web à l'aide des protocoles PHP et MQTT. Nous avons créé une application de chat simple en utilisant la bibliothèque phpMQTT où les utilisateurs peuvent envoyer des messages et recevoir des messages d'autres utilisateurs en temps réel. A travers cet exemple, nous pouvons voir comment utiliser le protocole MQTT pour obtenir une communication instantanée efficace afin de répondre aux besoins des sites Web modernes. 🎜

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 jquery html 回调函数 事件 物联网
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：Contrôle de la fréquence d'envoi des SMS et conception du mécanisme de notification des utilisateurs dans des cas réels d'amarrage de l'interface SMS PHP et Alibaba CloudArticle suivant：Contrôle de la fréquence d'envoi des SMS et conception du mécanisme de notification des utilisateurs dans des cas réels d'amarrage de l'interface SMS PHP et Alibaba Cloud

Articles Liés

Voir plus