试图在angular2中使用stomp.js.

时间:2016-05-03 21:11:00

标签: javascript node.js typescript angular webpack

我正在尝试使用stomp.js实现Stomp Websocket客户端。

我正在使用angular2与typescript和webpack,并且我对所有这些技术都是新手。 我的angular2项目建立在这个种子上: https://github.com/angular/angular2-seed

作为实现stomp.js客户端的指南,我使用了https://github.com/sjmf/ng2-stompjs-demo

我目前得到的错误如下:

?d41d:73 EXCEPTION: TypeError: Cannot read property 'client' of undefined in [null]

此方法发生错误:

  public configure() : void {

    // Check for errors
    if (this.state.getValue() != STOMPState.CLOSED) {
      throw Error("Already running!");
    }

    let scheme : string = 'ws';
    if( AppSettings.IS_SSL ) {
      scheme = 'wss';
    }

    this.client = Stomp.client(
      scheme + '://'
      + AppSettings.HOST + ':'
      + AppSettings.WEBSOCK_PORT
      + AppSettings.WEBSOCK_ENDPOINT
    );

    this.client.heartbeat.incoming = AppSettings.HEARTBEAT;
  }

所以Stomp似乎未定义。

我正在导入:

import {Stomp} from "stompjs";

我已经像这样使用npm安装了stomp.js

npm install --save stompjs

我的stompjs模块看起来像这样:

declare module "stompjs" {

  export interface Client {
    heartbeat: any;

    debug(...args: string[]);

    connect(...args: any[]);
    disconnect(disconnectCallback: () => any, headers?: any);

    send(destination: string, headers?:any, body?: string);
    subscribe(destination: string, callback?: (message: Message) => any, body?: string);
    unsubscribe();

    begin(transaction: string);
    commit(transaction: string);
    abort(transaction: string);

    ack(messageID: string, subscription: string, headers?: any);
    nack(messageID: string, subscription: string, headers?: any);
  }

  export interface Message {
    command: string;
    headers: any;
    body: string;

    ack(headers?: any);
    nack(headers?: any);
  }

  export interface Frame {
    constructor(command: string, headers?: any, body?: string);

    toString(): string;
    sizeOfUTF8(s: string);
    unmarshall(datas: any);
    marshall(command: string, headers?, body?);
  }

  export interface Stomp {
    client: Client;
    Frame: Frame;

    over(ws: WebSocket);
  }
}

我想我错过了我的模块和实际库之间的联系,但我真的不知道如何做到这一点,我也无法从github演示中找到它。

提前感谢您的帮助!

2 个答案:

答案 0 :(得分:1)

您是否尝试在界面旁边导出变量?

export var Stomp: Stomp;

答案 1 :(得分:0)

直接在Angular2(或Angular4)中使用Stomp.js绝对不是一件容易的事。

对于使用Observables的正确Angular2(和Angular4)类型StompService,请参阅https://github.com/stomp-js/ng2-stompjs

还有Angular2和Agular4的示例应用程序。