So verwenden Sie MQTT im Uniapp-Projekt

So verwenden Sie MQTT im Uniapp-Projekt

Da wir einige Echtzeitdaten abrufen und in der mobilen App anzeigen müssen, dachten wir daran, MQTT für Instant Messaging zu verwenden.

Im Folgenden wird der gesamte Prozess der Einführung von MQTT in Uniapp beschrieben:

1. Referenz-Plugins im Uniapp Plugin-Markt

https://ext.dcloud.net.cn/plugin?id=854

2. Spezifischer Einführungsprozess

1. Installieren Sie mqtt und uuid

Führen Sie die Befehlszeilen aus, um mqtt und uuid jeweils im Stammverzeichnis des Uniapp-Projekts zu installieren. Da uuid später zum Generieren der Client-ID von mqtt verwendet wird, werden sie hier zusammen installiert.

npm installiere [email protected]

npm installiere UUID 

Ps.

①Die von mir hier installierte MQTT-Version ist dieselbe wie das von Uniapp bereitgestellte Plug-In. Ich habe auch versucht, die neueste Version zu installieren, und es wird ein Fehler gemeldet, emmmmm...........

②Wenn pakage.json nicht vorhanden ist, wird bei der Installation ein Fehler angezeigt, der jedoch keine Auswirkungen auf die Installation und Verwendung hat. Wenn Sie es bequemer haben möchten, können Sie dem Stammverzeichnis des Projekts eine Datei „pakage.json“ hinzufügen und ihr den folgenden Inhalt hinzufügen:

{
  "Name": "",
  "version": "1.0.0",
  "Beschreibung": "",
  "Autor": "",
  "Lizenz": "MIT",
  "Abhängigkeiten": {
    "mqtt": "^3.0.0",
    "uuid": "^8.3.0"
  },
  "devDependencies": {},
  "Skripte": {}
}

2. Die Seite stellt mqtt und Anrufe vor

①MQTT-Verbindungskonfiguration, platziert in /utils/mqtt.js, global verfügbar.

export const MQTT_IP = '192.168.9.128:8083/mqtt' //MQTT-Adressport const MQTT_USERNAME = 'public' //MQTT-Benutzername const MQTT_PASSWORD = 'public' //Passwort export const MQTT_OPTIONS = {
    VerbindungsTimeout: 5000,
    Client-ID: '',
    Benutzername: MQTT_USERNAME,
    Passwort: MQTT_PASSWORD,
    sauber: falsch
}

②Vue-Seite verweist auf MQTT

Die Client-ID in MQTT verwendet UUID, um einen eindeutigen Identifikationscode zu generieren und so zu verhindern, dass Daten hängen bleiben, wenn verschiedene Seiten unterschiedliche Themen abonnieren.

<Skript>
    importiere { v4 } von 'uuid';
    importieren {
        MQTT_IP,
        MQTT_OPTIONS
    } von '@/utils/mqtt.js';
    var mqtt = erfordern('mqtt/dist/mqtt.js')
    var-Client
    Standard exportieren {
        Daten() {
            zurückkehren {
                Thema: '' // Zu abonnierendes Thema}
        },
        mounted() {this.connect() //verbinden},
        Methoden: {
            verbinden() {
                MQTT_OPTIONS.clientId = v4()
                var das = dies
                // #ifdef H5
                Client = mqtt.connect('ws://' + MQTT_IP, MQTT_OPTIONS)
                // #endif
                // #ifdef MP-WEIXIN||APP-PLUS
                Client = mqtt.connect('wx://' + MQTT_IP, MQTT_OPTIONS)
                // #endif
                client.on('verbinden', Funktion() {
                    console.log('Verbindung erfolgreich')
                    client.subscribe(das.Thema, Funktion(Fehler) {
                        wenn (!err) {
                            console.log('Abonnement erfolgreich')
                        }
                    })
                }).on('Wiederverbinden', Funktion(Fehler) {
                    console.log('Verbindung wird wiederhergestellt...', that.topic)
                }).on('Fehler', Funktion(Fehler) {
                    console.log('Verbindung fehlgeschlagen...', Fehler)
                }).on('Ende', Funktion() {
                    console.log('Verbindung getrennt')
                }).on('Nachricht', Funktion(Thema, Nachricht) {
                    console.log('Push-Informationen empfangen:', message.toString())
                })
            }
        }
    }
</Skript>

3. Operationsergebnisse

Datenänderungen in Echtzeit.

Oben werden Methoden zur Verwendung von MQTT in Uniapp freigegeben.

Oben finden Sie Einzelheiten zur Verwendung von MQTT im Uniapp-Projekt. Weitere Informationen zur Verwendung von MQTT durch Uniapp finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • Detaillierte Erläuterung der dynamischen Änderung des Elementknotenstils in Uniapp
  • Detaillierte Erklärung der schmerzlosen Token-Aktualisierungsmethode von Uniapp
  • Uniapps Erfahrung in der Entwicklung kleiner Programme
  • Ideen und Codes zur Implementierung des Wasserfall-Flow-Layouts im UniApp-Applet
  • Uniapp WeChat-Applet: Lösung bei Schlüsselfehler
  • uniapp realisiert die Aufnahme-Upload-Funktion

<<:  So stellen Sie Redis in einer Linux-Umgebung bereit und installieren es in Docker

>>:  Lösung für MySQL-Fehlercode 1862 Ihr Passwort ist abgelaufen

Artikel empfehlen

Mac VMware Fusion CentOS7 Konfiguration statisches IP-Tutorial-Diagramm

Inhaltsverzeichnis Installieren Sie CentOS7 Konfi...

Erklärung zur Verwendung von JavaScript ECharts

Ich habe ECharts schon einmal bei einem Projekt v...

Der Unterschied und die Verwendung von distinct und row_number() over() in SQL

1 Einleitung Wenn wir SQL-Anweisungen schreiben, ...

Einführung in die Installationsmethode in Vue

Inhaltsverzeichnis 1. Weltweit registrierte Kompo...

Einige Dinge, die beim Erstellen einer Webseite zu beachten sind

--Backup der Homepage 1.txt-Text 2. Scannen Sie da...

Verständnis und Anwendungsszenarien von ES6-Erweiterungsoperatoren

Inhaltsverzeichnis 1. Ersetzen Sie die Apply-Meth...

HTML-Codebeispiel: Detaillierte Erklärung von Hyperlinks

Hyperlinks sind die am häufigsten verwendeten HTM...

JavaScript-Canvas zum Erzielen eines farbenfrohen Uhreffekts

Verwenden Sie Leinwand, um eine bunte Uhr zu schr...

Beispiel für die Installation und Bereitstellung von Docker unter Linux

Nachdem Sie den folgenden Artikel gelesen haben, ...

js Drag & Drop-Tabelle zur Realisierung der Inhaltsberechnung

In diesem Artikelbeispiel wird der spezifische Co...

So verwenden Sie CocosCreator zur Tonverarbeitung bei der Spieleentwicklung

Inhaltsverzeichnis 1. Grundlagen der Audiowiederg...