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-Markthttps://ext.dcloud.net.cn/plugin?id=854 2. Spezifischer Einführungsprozess1. Installieren Sie mqtt und uuidFü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. OperationsergebnisseDatenä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:
|
<<: 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
Inhaltsverzeichnis VARCHAR- und CHAR-Typen Abschl...
Nach viel Mühe habe ich endlich den Yum-Installat...
Inhaltsverzeichnis 1. Was ist die Anti-Shake-Funk...
Optimieren von Abfragen Verwenden der Explain-Anw...
Kürzlich habe ich dem Footer-Postfach des Kunden e...
Inhaltsverzeichnis 1. Einführung in die Priorität...
1. Einleitung Im Projekt wird MySQL verwendet. Ic...
Vorwort JavaScript erfreut sich weiterhin wachsen...
Inhaltsverzeichnis 1. Props übergeordnete Kompone...
Lassen Sie mich Ihnen ohne weitere Umschweife den...
Vorwort Wenn wir in der täglichen Entwicklung MyS...
Kein Lazy Loading verwenden importiere Vue von „v...
Vorwort In diesem Artikel wird der Vorgang zum He...
KILL [VERBINDUNG | ABFRAGE] Prozesslisten-ID In M...
In diesem Artikelbeispiel wird der spezifische Co...