Cara menambah pemberitahuan masa nyata ke tapak web anda menggunakan PHP dan MQTT-tutorial php-php.cn

Cara menambah pemberitahuan masa nyata ke tapak web anda menggunakan PHP dan MQTT

王林

Lepaskan： 2023-07-08 20:46:01

asal

1528 orang telah melayarinya

Cara menambah fungsi pemberitahuan masa nyata pada tapak web anda menggunakan PHP dan MQTT

Fungsi pemberitahuan masa nyata untuk aplikasi web semakin popular di kalangan tapak web moden. Pemberitahuan masa nyata boleh digunakan untuk pelbagai tujuan, seperti sembang langsung, ulasan masa nyata dan makluman mesej baharu. Dalam artikel ini, kami akan menerangkan cara menambah fungsi pemberitahuan masa nyata pada tapak web anda menggunakan protokol PHP dan MQTT.

Apakah itu protokol MQTT?

MQTT (Message Qeuing Telemetry Transport) ialah protokol penghantaran mesej ringan yang direka untuk menyediakan komunikasi segera yang cekap. Ia direka bentuk untuk persekitaran rangkaian jalur lebar rendah dan tidak stabil, dan sangat sesuai untuk penghantaran mesej untuk aplikasi IoT.

Protokol MQTT adalah berdasarkan model terbitkan/langganan Pelanggan boleh melanggan topik tertentu (topik) Apabila mesej baharu diterbitkan kepada topik tersebut, pelanggan akan menerima pemberitahuan dalam masa nyata.

Persediaan

Sebelum kita mula, kita perlu memastikan syarat berikut dipenuhi:

Pelayan yang menjalankan broker MQTT, seperti Mosquitto.
Persekitaran pembangunan PHP, termasuk pemasangan sambungan MQTT Mosquitto.

Pasang sambungan Mosquitto MQTT dan anda boleh menggunakan arahan pecl:

pecl install Mosquitto-alpha

Salin selepas log masuk

Laksanakan fungsi pemberitahuan masa nyata

Dalam contoh ini, kami akan mencipta aplikasi sembang mudah di mana pengguna boleh menghantar mesej dan menerima mesej yang dihantar oleh orang lain pengguna dalam masa nyata. Kami akan menggunakan PHP dan MQTT untuk melaksanakan fungsi ini.

Pertama, kita perlu mencipta pelanggan MQTT, mewujudkan hubungan dengan broker MQTT, dan melanggan topik. Kami akan menggunakan perpustakaan phpMQTT untuk memudahkan pelaksanaan pelanggan MQTT. Pustaka phpMQTT boleh dipasang melalui kod berikut:

composer require bluerhinos/phpmqtt

Salin selepas log masuk

Kemudian, kami mencipta fail bernama chat.php dan menambah kod berikut: 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代理失败";
}

Salin selepas log masuk

在上述代码中，我们首先创建了一个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>

Salin selepas log masuk

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

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

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

Dalam kod di atas, kami mula-mula mencipta mqtt contoh, dan gunakan localhost dan 1883 sebagai hos dan port broker MQTT. Kemudian, kami mewujudkan sambungan dengan broker MQTT melalui kaedah $mqtt->connect(). Jika sambungan berjaya, gunakan $mqtt->subscribe("chat_room", 0) untuk melanggan topik bernama chat_room. Akhir sekali, kami menggunakan kaedah $mqtt->proc() untuk mengekalkan sambungan kepada broker MQTT.

Seterusnya, kami mencipta fail bahagian hadapan yang dipanggil index.html dan menambah kod berikut:

rrreee

Dalam kod di atas, kami mula-mula menambah kod berikut dalam

mqtt.onConnectionLost Kaedah mengendalikan peristiwa kehilangan sambungan dengan broker MQTT. Dalam kaedah <code>mqtt.onMessageArrived

, apabila kami menerima mesej baharu, kami menambahkannya pada sejarah sembang. 🎜🎜Dengan memanggil kaedah mqtt.connect() dan menyediakan fungsi panggil balik, langgan topik chat_room selepas sambungan berjaya. Kemudian, kami menggunakan jQuery untuk melaksanakan fungsi penghantaran mesej melalui kaedah $("#send_button").klik apabila halaman dimuatkan. 🎜🎜Akhir sekali, kami membuka fail index.html dalam penyemak imbas dan anda boleh melihat antara muka sembang. 🎜🎜Ringkasan🎜🎜Artikel ini menerangkan cara menambahkan fungsi pemberitahuan masa nyata pada tapak web anda menggunakan protokol PHP dan MQTT. Kami telah mencipta aplikasi sembang ringkas dengan menggunakan perpustakaan phpMQTT di mana pengguna boleh menghantar mesej dan menerima mesej daripada pengguna lain dalam masa nyata. Melalui contoh ini, kita dapat melihat cara menggunakan protokol MQTT untuk mencapai komunikasi segera yang cekap bagi memenuhi keperluan laman web moden. 🎜

Atas ialah kandungan terperinci Cara menambah pemberitahuan masa nyata ke tapak web anda menggunakan PHP dan MQTT. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!