A demo application using Angular 2 in Typescript and @stomp/ng2-stompjs, generated with angular-cli.
Please note it is quite advanced. If your needs are simple you may be better off using one of the following samples:
- https://github.com/stomp-js/ng4-stompjs-demo
- https://github.com/stomp-js/ng2-stompjs-demo
This sample demonstrates a special case where more than one StompServices with different configuration are needed.
Install dependencies:
$ npm installor, if using yarn
$ yarnConfigure details for your Stomp Brokers by editing files in
src/api/
The configuration should work as is for a RabbitMQ instance running on localhost with default settings and Web STOMP plugin activated. (see: https://www.rabbitmq.com/web-stomp.html).
Run ng serve for a dev server. Navigate to http://localhost:4200/.
The app will automatically reload if you change any of the source files.
Check the following files:
-
src/app/services/config/config.service.ts- The configuration service. This service fetches a json file from a configurable location. -
Files in
src/app/stomp-servicesfolders define each of the StompServices- A class inherited from StompService is exported. This class is marked @Injectable().
- A factory is created which will create instance of this class. Notice that the factory passes the path from where configuration JSON need to be fetched from. This path can be a full URL as well.
- The class and factory is registered in
src/app/app.module.ts.
-
src/app/app.module.ts- Service provisions for Dependency Injection. See the section about using Factories. -
src/app/components/rawdata/rawdata.component.ts- receives 2 different instances of StompService identified by different class names. These are fully functional and independent instances. In this sample a queue is subscribed using one instance and messages are published using another instance. -
src/app/components/status/status.component.ts- monitoring status of Stomp connection.
MIT