유니앱에서 스톰프를 사용하는 방법

최신 웹 애플리케이션이 개발되면서 점점 더 많은 개발자가 실시간 통신을 위해 WebSocket 기술을 사용하고 있습니다. 그러나 메시지 브로커, 특히 ActiveMQ 또는 RabbitMQ를 사용해야 하는 경우 STOMP 프로토콜은 고려해 볼 만한 또 다른 옵션입니다. 모바일 애플리케이션을 개발할 때 Uniapp은 크로스 플랫폼 애플리케이션을 보다 효율적인 방식으로 개발하는 데 도움이 될 수 있는 시도해 볼 가치가 있는 개발 프레임워크입니다. 이 기사에서는 Uniapp에서 실시간 통신을 위해 STOMP 프로토콜을 사용하는 방법을 살펴보겠습니다.

먼저 STOMP 프로토콜의 기본 개념과 사용법을 이해해야 합니다. STOMP(Simple (또는 Streaming) Text Oriented Messaging Protocol)는 일반적으로 메시지 브로커 간의 통신에 사용되는 텍스트 기반 프로토콜이지만 브라우저와 서버 간의 통신에도 사용할 수 있습니다. 간단하고 쉽게 구현할 수 있도록 설계되었으며 여러 프로그래밍 언어를 지원합니다. 클라이언트-서버 모델을 기반으로 하며 명령과 메시지 헤더를 사용하여 메시지에 대해 작동합니다.

Uniapp에서 STOMP 프로토콜을 사용하려면 STOMP 클라이언트를 사용해야 합니다. 아래에서는 이를 달성하기 위해 Stompjs라는 JavaScript 라이브러리를 사용하는 방법을 살펴보겠습니다. Stompjs는 널리 사용되고 npm 패키지 관리자를 통해 사용할 수 있는 안정적이고 신뢰할 수 있는 라이브러리입니다.

먼저 Uniapp 프로젝트의 루트 디렉터리에서 터미널을 열고 Stompjs를 설치합니다.

npm install stompjs --save

Uniapp에서는 개발에 Vue.js를 사용하므로 Stompjs와 Vue.js를 통합해야 합니다. 애플리케이션 컨텍스트에 STOMP 클라이언트를 등록하는 Vue.js 플러그인을 만들 수 있습니다.

src/plugins 디렉터리에 Stomp.js라는 파일을 만듭니다. 다음과 같습니다.

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;

플러그인은 Stomp.js 구성 개체를 허용합니다. 여기서 url은 STOMP 프록시의 WebSocket 엔드포인트 주소이고 사용자 이름과 비밀번호는 선택적 STOMP 프록시 자격 증명입니다.

다음으로 아래와 같이 Stomp.js 플러그인과 모든 구성을 Vue 애플리케이션의 main.js 파일에 로드해야 합니다.

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

위 코드는 Stomp.js 플러그인을 Vue에 마운트합니다. , 해당 구성은 옵션 개체와 함께 전달됩니다. 또한 STOMP 클라이언트의 연결 상태를 추적하려면 Vue 애플리케이션의 store.js 파일에서 일부 상태와 작업을 정의해야 합니다. 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,
    },
});

마지막으로 연결이 성공했는지 테스트해야 합니다. Vue 구성 요소에 다음 코드를 추가합니다.

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

위 코드에서는 this.$stompClient를 사용하여 등록된 STOMP 클라이언트 인스턴스를 가져오고 subscribe() 메서드를 통해 데모라는 대기열을 구독합니다. 새 메시지가 도착하면 console.log() 출력을 받게 됩니다.

이제 유니앱에서 실시간 통신을 위해 STOMP 프로토콜을 사용할 수 있습니다. 이러한 실시간 통신은 다양한 애플리케이션 시나리오에서 매우 유용할 수 있습니다. 물론 구체적인 구현 방법은 각 프로젝트에 따라 다르지만 위의 방법만으로도 영감을 주기에 충분합니다.

위 내용은 유니앱에서 스톰프를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!