ngx-stomp

Support Stomp.js for Angular or Ionic

Installation

First install the stompjs library to support the browser stomp protocol.

$ npm install @stomp/stompjs --save

Then install this library to support Angular or Ionic

$ npm install ngx-stomp --save 

Usage

If it's Angular project, modify in angular.json or angular-cli.json

{
  "scripts": [
    "node_modules/@stomp/stompjs/lib/stomp.min.js"
  ]
}

If it's Ionic project, first modify package.json, like this:

{
  "name": "library",
  "config": {
    "ionic_copy": "./config/copy.config.js"
  }
}

Create file copy.config

// path config/copy.config.js
module.exports = {
  copyCropperjs: {
    src: ["{{ROOT}}/node_modules/@stomp/stompjs/lib/stomp.min.js"],
    dest: "{{BUILD}}"
  }
};

Add stomp.min.js the index.html

<!-- src/index.html -->
<script src="build/stomp.min.js"></script>

After that, Angular and Ionic use are the same.

Modify in the app.module.ts

import {NgxStompConfig, NgxStompService} from 'ngx-stomp';
 
@NgModule({
  providers: [
    NgxStompService,
    {
      provide: NgxStompConfig,
      useValue: {
        url: '', // Websockets Url
        reconnect_delay: 0, // Client Reconnect Delay
        debug: null, // Client Debug
        username: '', // Connect Username
        password: '', // Connect Password
        incoming: 0, // Heartbeat Incoming
        outgoing: 0, // Heartbeat Outgoing
        vhost: '' // Client Vhost
      }
    }
  ]
})

Connect to the stomp service

...
constructor(private stomp: NgxStompService) {
 
}
 
this.stomp.connect();
...

Subscribe to the message queue

this.stomp.ready.subscribe(({client,frame}) => {
  client.subscribe('/exchange/some', message => {
    console.log(message);
  });
});

Destory service and disconnect

this.stomp.destory();