Comment utiliser Stomp dans Uniapp

Avec le développement d'applications Web modernes, de plus en plus de développeurs utilisent la technologie WebSocket pour communiquer en temps réel. Cependant, si vous devez utiliser un courtier de messages, en particulier ActiveMQ ou RabbitMQ, le protocole STOMP est une autre option à considérer. Lors du développement d'applications mobiles, Uniapp est un framework de développement qui vaut la peine d'être essayé, qui peut vous aider à développer des applications multiplateformes de manière plus efficace. Dans cet article, nous explorerons comment utiliser le protocole STOMP pour la communication en temps réel dans Uniapp.

Tout d'abord, nous devons comprendre les concepts de base et l'utilisation du protocole STOMP. STOMP (Simple (or Streaming) Text Oriented Messaging Protocol) est un protocole basé sur du texte qui est généralement utilisé pour la communication entre les courtiers de messages, mais peut également être utilisé pour la communication entre les navigateurs et les serveurs. Il est conçu pour être simple, facile à mettre en œuvre et prend en charge plusieurs langages de programmation. Il est basé sur le modèle client-serveur et opère sur les messages à l'aide de commandes et d'en-têtes de message.

Pour utiliser le protocole STOMP dans Uniapp, nous devons utiliser un client STOMP. Ci-dessous, nous examinerons l'utilisation d'une bibliothèque JavaScript appelée stompjs pour y parvenir. Stompjs est une bibliothèque stable et fiable, largement utilisée et disponible via le gestionnaire de packages npm.

Tout d'abord, dans le répertoire racine du projet Uniapp, ouvrez un terminal et installez stompjs :

npm install stompjs --save

Dans Uniapp, nous utilisons Vue.js pour le développement, nous devons donc intégrer stompjs avec Vue.js. Nous pouvons créer un plugin Vue.js qui enregistrera le client STOMP dans le contexte de l'application.

Créez un fichier appelé stomp.js dans le répertoire src/plugins. Il ressemblera à ceci :

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;

Le plugin accepte l'objet de configuration stomp.js. où url est l'adresse du point de terminaison WebSocket du proxy STOMP, et le nom d'utilisateur et le mot de passe sont des informations d'identification facultatives du proxy STOMP.

Ensuite, nous devons charger le plug-in stomp.js et toutes ses configurations dans le fichier main.js de l'application Vue, comme indiqué ci-dessous :

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');

Le code ci-dessus monte le plug-in stomp.js sur Vue , et sa configuration est transmise avec l'objet options. De plus, nous devons définir certains états et actions dans le fichier store.js de l'application Vue afin de suivre l'état de connexion du client STOMP. Voici à quoi ressemble le fichier store.js :

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,
    },
});

Enfin, nous devons tester si la connexion a réussi. Ajoutez le code suivant à votre composant Vue :

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

Dans le code ci-dessus, nous utilisons this.$stompClient pour obtenir l'instance client STOMP enregistrée et vous abonner à une file d'attente nommée demo via sa méthode Subscribe(). Lorsque de nouveaux messages arriveront, nous recevrons la sortie console.log().

Vous pouvez désormais utiliser le protocole STOMP pour la communication en temps réel dans Uniapp. Une telle communication en temps réel peut s’avérer très utile dans de nombreux scénarios d’application. Bien entendu, la mise en œuvre spécifique variera en fonction du projet concerné, mais la méthode ci-dessus suffit à vous inspirer.

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!