Cara menggunakan stomp dalam uniapp

Dengan pembangunan aplikasi web moden, semakin ramai pembangun menggunakan teknologi WebSocket untuk komunikasi masa nyata. Walau bagaimanapun, jika anda perlu menggunakan broker mesej, khususnya ActiveMQ atau RabbitMQ, maka protokol STOMP ialah pilihan lain yang patut dipertimbangkan. Apabila membangunkan aplikasi mudah alih, Uniapp ialah rangka kerja pembangunan yang patut dicuba, yang boleh membantu anda membangunkan aplikasi merentas platform dengan cara yang lebih cekap. Dalam artikel ini, kami akan meneroka cara menggunakan protokol STOMP untuk komunikasi masa nyata dalam Uniapp.

Pertama, kita perlu memahami konsep asas dan penggunaan protokol STOMP. STOMP (Simple (atau Streaming) Text Oriented Messaging Protocol) ialah protokol berasaskan teks yang biasanya digunakan untuk komunikasi antara broker mesej, tetapi juga boleh digunakan untuk komunikasi antara penyemak imbas dan pelayan. Ia direka bentuk untuk ringkas, mudah dilaksanakan dan menyokong berbilang bahasa pengaturcaraan. Ia berdasarkan model pelayan pelanggan dan beroperasi pada mesej menggunakan arahan dan pengepala mesej.

Untuk menggunakan protokol STOMP dalam Uniapp, kita perlu menggunakan klien STOMP. Di bawah ini kita akan melihat menggunakan perpustakaan JavaScript yang dipanggil stompjs untuk mencapai ini. Stompjs ialah perpustakaan yang stabil dan boleh dipercayai dengan penggunaan meluas dan tersedia melalui pengurus pakej npm.

Pertama, dalam direktori akar projek Uniapp, buka terminal dan pasang stompjs:

npm install stompjs --save

Dalam Uniapp, kami menggunakan Vue.js untuk pembangunan, jadi kami perlu menggabungkan stompjs dengan Vue .js bersepadu. Kami boleh mencipta pemalam Vue.js yang akan mendaftarkan klien STOMP dalam konteks aplikasi.

Buat fail bernama stomp.js dalam direktori src/plugins Ia akan kelihatan seperti ini:

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;

Pemalam menerima objek konfigurasi stomp.js. dengan url ialah alamat titik akhir WebSocket proksi STOMP, dan nama pengguna serta kata laluan ialah kelayakan proksi STOMP pilihan.

Seterusnya, kita perlu memuatkan pemalam stomp.js dan semua konfigurasinya dalam fail main.js aplikasi Vue, seperti yang ditunjukkan di bawah:

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

Kod di atas akan memuatkan stomp Pemalam .js Lekapkannya pada Vue dan lulus konfigurasinya bersama objek pilihan. Selain itu, kami perlu mentakrifkan beberapa keadaan dan tindakan dalam fail store.js aplikasi Vue untuk menjejak status sambungan klien STOMP. Beginilah rupa fail 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,
    },
});

Akhir sekali, kami perlu menguji sama ada sambungan berjaya. Tambahkan kod berikut pada komponen Vue anda:

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

Dalam kod di atas, kami menggunakan ini.$stompClient untuk mendapatkan contoh klien STOMP berdaftar, dan melanggan satu demo bernama melalui baris gilir kaedah subscribe(). Apabila mesej baharu tiba, kami akan menerima output console.log().

Kini anda boleh menggunakan protokol STOMP untuk komunikasi masa nyata dalam Uniapp. Komunikasi masa nyata sedemikian boleh menjadi sangat berguna dalam banyak senario aplikasi. Sudah tentu, pelaksanaan khusus akan berbeza-beza bergantung pada projek masing-masing, tetapi kaedah di atas sudah cukup untuk memberi anda inspirasi.

Atas ialah kandungan terperinci Cara menggunakan stomp dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!