So verwenden Sie Stomp in Uniapp

Mit der Entwicklung moderner Webanwendungen nutzen immer mehr Entwickler die WebSocket-Technologie für die Echtzeitkommunikation. Wenn Sie jedoch einen Nachrichtenbroker, insbesondere ActiveMQ oder RabbitMQ, verwenden müssen, ist das STOMP-Protokoll eine weitere erwägenswerte Option. Bei der Entwicklung mobiler Anwendungen ist Uniapp ein Entwicklungsframework, das einen Versuch wert ist und Ihnen dabei helfen kann, plattformübergreifende Anwendungen effizienter zu entwickeln. In diesem Artikel erfahren Sie, wie Sie das STOMP-Protokoll für die Echtzeitkommunikation in Uniapp verwenden.

Zuerst müssen wir die grundlegenden Konzepte und die Verwendung des STOMP-Protokolls verstehen. STOMP (Simple (or Streaming) Text Oriented Messaging Protocol) ist ein textbasiertes Protokoll, das im Allgemeinen für die Kommunikation zwischen Nachrichtenbrokern verwendet wird, aber auch für die Kommunikation zwischen Browsern und Servern verwendet werden kann. Es ist einfach und leicht zu implementieren konzipiert und unterstützt mehrere Programmiersprachen. Es basiert auf dem Client-Server-Modell und verarbeitet Nachrichten mithilfe von Befehlen und Nachrichtenheadern.

Um das STOMP-Protokoll in Uniapp zu verwenden, müssen wir einen STOMP-Client verwenden. Im Folgenden betrachten wir die Verwendung einer JavaScript-Bibliothek namens stompjs, um dies zu erreichen. Stompjs ist eine stabile, zuverlässige Bibliothek mit weit verbreiteter Verwendung und verfügbar über den npm-Paketmanager.

Öffnen Sie zunächst im Stammverzeichnis des Uniapp-Projekts ein Terminal und installieren Sie stompjs:

npm install stompjs --save

In Uniapp verwenden wir Vue.js für die Entwicklung, daher müssen wir stompjs mit Vue.js integrieren. Wir können ein Vue.js-Plugin erstellen, das den STOMP-Client im Anwendungskontext registriert.

Erstellen Sie eine Datei namens stomp.js im Verzeichnis src/plugins. Sie sieht folgendermaßen aus:

import Stomp from 'stompjs';

const setConnected = connected => {
    store.commit('stomp/setConnected', connected);
};

const stompPlugin = {
    install(Vue, options) {
        const { url, username, password } = options;
        const socket = new WebSocket(url);
        const stompClient = Stomp.over(socket);

        // set stompClient's credentials if needed
        if (username && password) {
            stompClient.connect(username, password, () => {
                setConnected(true);
            });
        } else {
            stompClient.connect({}, () => {
                setConnected(true);
            });
        }

        Vue.prototype.$stompClient = stompClient;
    },
};

export default stompPlugin;

Das Plugin akzeptiert das Konfigurationsobjekt stomp.js. Dabei ist URL die WebSocket-Endpunktadresse des STOMP-Proxys und Benutzername und Passwort sind optionale STOMP-Proxy-Anmeldeinformationen.

Als nächstes müssen wir das stomp.js-Plug-in und alle seine Konfigurationen in die main.js-Datei der Vue-Anwendung laden, wie unten gezeigt:

import Vue from 'vue';
import App from './App';
import router from './router';
import store from './store';

import stompPlugin from '@/plugins/stomp';

Vue.config.productionTip = false;

Vue.use(stompPlugin, {
    url: 'ws://localhost:15674/ws',
    username: 'guest',
    password: 'guest',
});

new Vue({
    router,
    store,
    render: h => h(App),
}).$mount('#app');

Der obige Code mountet das stomp.js-Plug-in Vue und seine Konfiguration werden zusammen mit dem Optionsobjekt übergeben. Darüber hinaus müssen wir einige Zustände und Aktionen in der Datei „store.js“ der Vue-Anwendung definieren, um den Verbindungsstatus des STOMP-Clients zu verfolgen. So sieht die Datei store.js aus:

const stomp = {
    state: {
        connected: false,
    },
    getters: {
        connected: state => state.connected,
    },
    mutations: {
        setConnected(state, connected) {
            state.connected = connected;
        },
    },
    actions: {},
};

export default new Vuex.Store({
    modules: {
        stomp,
    },
});

Abschließend müssen wir testen, ob die Verbindung erfolgreich war. Fügen Sie den folgenden Code zu Ihrer Vue-Komponente hinzu:

export default {
    mounted() {
        // subscribe to our demo channel:
        this.$stompClient.subscribe('/queue/demo', message => {
            console.log(message.body);
        });
    },
};

Im obigen Code verwenden wir this.$stompClient, um die registrierte STOMP-Client-Instanz abzurufen und über ihre subscribe()-Methode eine Warteschlange mit dem Namen demo zu abonnieren. Wenn neue Nachrichten eintreffen, erhalten wir die Ausgabe von console.log().

Jetzt können Sie das STOMP-Protokoll für die Echtzeitkommunikation in Uniapp verwenden. Eine solche Echtzeitkommunikation kann in vielen Anwendungsszenarien sehr nützlich sein. Natürlich variiert die konkrete Umsetzung je nach Projekt, aber die oben beschriebene Methode reicht aus, um Ihnen eine Inspiration zu liefern.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Stomp in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!