TypeScript - IonicアプリからSTOMPを使ってActiveMQブローカーに接続する

私は主にAndroidプラットフォームで実行されるIonic + Capacitorアプリを受け取りました。アプリにリモートのActiveMQブローカーとの通信を統合することを担当されています。これを達成するためにSTOMP JSライブラリを使用し、ブラウザでテストしたところ非常にうまく動作しました。ところが、エミュレーターでテストすると、アプリケーションはActiveMQブローカーに接続できません。私はこれが、ブラウザはWebSocketを標準でサポートしているのに対し、エミュレーターはWS URLを理解できないためだと思います。オンラインで調べたところ、これを簡単に修正する方法としてSockJSを使用でき、現在のコードにも簡単に統合できると書かれていました。以下のチュートリアルを参照しています:

https://stomp-js.github.io/guide/stompjs/rx-stomp/ng2-stompjs/using-stomp-with-sockjs.html

しかし、指示に従ってチュートリアルで提供されたフェールバックコードを追加すると、TypeScriptコンパイラーが投げる奇妙なエラーが発生します。私のコードは以下の通りです:

import {Client, Message, ActivationState, messageCallbackType} from '@stomp/stompjs'
//import StompJs, { Message } from '@stomp/stompjs';
import { Queue } from 'queue-typescript';
import SockJS from 'sockjs-client';

const brokerEndpoint = "ws://localhost:61614";
//const brokerEndpoint = "ws://10.0.2.2:61614";

const items: string[] = [];
const queue = new Queue<string>(...items);

const createClient = () => {
    const client: Client = new Client({
        brokerURL: brokerEndpoint,
        connectHeaders: {
            login: 'admin',
            passcode: 'admin',
        },
        debug: function (str) {
            console.log(str);
        },
        reconnectDelay: 1000,
        heartbeatIncoming: 0,
        heartbeatOutgoing: 0
    });

    client.webSocketFactory = new SockJS('http://localhost:61613/stomp');

    /*
    if (typeof WebSocket !== 'function') {
        console.log("Not WebScoket");
        // For SockJS you need to set a factory that creates a new SockJS instance
        // to be used for each (re)connect
        client.webSocketFactory = function () {
            // Note that the URL is different from the WebSocket URL
            return new SockJS('http://10.0.2.2:15674/stomp');
        };
    } else {
        console.log("Still using websockets");
    }
    */

    return client;
}

const client: Client = createClient()

以下の行でエラーが発生します:

client.webSocketFactory = new SockJS('http://localhost:61613/stomp');

コンパイラーは「タイプ 'WebSocket' はタイプ '() => IStompSocket' に代入できません。タイプ 'WebSocket' はシグネチャ '(): IStompSocket' と一致しません。」と言っています。

チュートリアルによると、私は正しいことをしたようです。しかし、TypeScript は何か互換性の問題があると考えているようです。SockJS + STOMP または私がインポートしたライブラリのいずれかで作業したことがあり、うまく動作させたことがある人はいますか？どんな手がかりでも大変ありがたいです！

回答 #1

私もあなたと同じエラーが発生しました。問題はnpm依存関係@stomp/stompjsのバージョンです。

調べたところ、これを作った人は何か変更を加えたかったようですが、結局めちゃくちゃになってしまい、公式ドキュメントを更新することすら気にしなかったようです。

公式ウェブページでは、まだ webSocketFactory メソッドが WebSocket インターフェースを返すと表示されていますが、実際には IStompSocket を返します。これは WebSocket インターフェースと「同じである」と考えられていますが、実際にはそうではなく、WebSocket を IStompSocket に変換する方法は文書化されていません。だから失敗するのです。

こちらが修正です：

1º 現在のバージョンをアンインストールするには、次のように入力します:

npm uninstall @stomp/stompjs

2º このバージョンで同じ依存関係をインストールする:

npm install @stomp/[email --save

うまくいくと本当にいいなと思います。