uniappでstompを使用する方法

最新の Web アプリケーションの開発に伴い、リアルタイム通信に 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() 出力を受け取ります。

これで、Uniapp でのリアルタイム通信に STOMP プロトコルを使用できるようになりました。このようなリアルタイム通信は、多くのアプリケーション シナリオで非常に役立ちます。もちろん、具体的な実装方法はそれぞれのプロジェクトによって異なりますが、インスピレーションを得るには上記の方法で十分です。

以上がuniappでstompを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。