使用 Ionic App 中的 STOMP 连接到 ActiveMQ 代理答案

【问题标题】：Connect to ActiveMQ broker using STOMP from Ionic App使用 Ionic App 中的 STOMP 连接到 ActiveMQ 代理
【发布时间】：2021-09-21 15:22:19
【问题描述】：

我得到了一个 Ionic + Capacitor 应用程序，该应用程序将主要编译为在 Android 平台上运行。我的任务是将与远程 ActiveMQ 代理的通信集成到应用程序中。我使用 STOMP JS 库来实现这一点，并且当我在浏览器上测试它时效果非常好。现在，当我在模拟器上进行测试时，应用程序无法连接到 ActiveMQ 代理。我相信这是因为浏览器支持开箱即用的 WebSockets，而模拟器无法理解 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 或我导入的任何库，并让它成功运行？任何线索将不胜感激！

【问题讨论】：

您在 Ionic 项目中使用 Angular 吗？你使用 stomp-js (@stomp/ng2-stompjs) 的 Angular 实现吗？
@DanilProkhorenko：实际上这个应用程序使用的是 Vue，而不是 Angular。我猜同一个库不能用于此目的？而且，我正在使用 stompjs [link] (github.com/stomp-js/stompjs) 的正常实现。事实上，我愿意使用其他协议连接到 ActiveMQ。只是根据我的研究，STOMP 最有意义
嗯...我对vue不熟悉。你检查过这个：stomp-js.github.io/guide/stompjs/rx-stomp/ng2-stompjs/… 吗？
@DanilProkhorenko：是的，我做到了。但是，由于我的浏览器支持 Websockets，我不确定它是否适用于我。只是当这个 Ionic 应用程序为 Android 平台编译时，它无法工作，因为它无法理解 WS URL。 SockJS 似乎可以解决这个问题。但是，我无法使用 SockJS 连接到代理。你有使用 SockJS 或任何其他类似库的经验吗？我也愿意改变我的整个方法。只需要能够从我的 Ionic ap 连接到 ActiveMQ 代理（来自 Android 和浏览器）。
我不熟悉SockJS，但我认为您的问题与缺少类型定义或某些全局设置有关。你能试着找到出现问题的地方吗？另外，您可以尝试手动将类型转换为需要的类型。

标签： typescript ionic-framework stomp sockjs

【解决方案1】：

我遇到了和你一样的错误，问题是 npm 依赖 @stomp/stompjs 的版本。

正如我调查的那样，似乎制作它的人想要做一些改变，但最终做的一团糟，即使他甚至不关心更新官方文档。

官网还是显示webSocketFactory方法返回一个WebSocket接口，实际返回IStompSocket，“应该”和WebSocket接口一样，其实不是，也没有将 WebSocket 转换为 IStompSocket 的记录方法。这就是它失败的原因。

解决方法如下：

1º卸载当前版本，输入：

npm 卸载 @stomp/stompjs

2º 安装与此版本相同的依赖项：

npm install @stomp/stompjs@5.2.0 --save

我真的希望它有效。

【讨论】：