Tag: mqtt angular2 ng2 install

Setup MQTT in Angular 2 project.

Today we’re going to be using MQTT in our angular 2 program. Gathering on;y bits and pieces after hours of browsing the internet, I’ve decided to combine everything in this I hope easier to follow guide to get you going.

The solution I’ve found (may not be the most up to date nor correct), did prove to run the code I need for my application.

In this guide, I’m going to assume you’ve got your project folder setup, any you’re ready to start adding mqtt services to it.

For reference, Usually I like to boiler-plate off the angular 2 Tour Of Heroes demo, and using the Visual Code as IDE, but you could easily add this to any existing project.

Installing Mqtt

Command prompt to your project directory and issue the following commands

npm install mqtt --save

As it’s just javascript, and we want to make it typescript’able; we’re gonna need its typings:

npm install --save-dev @types/mqtt

Now  we can use mqtt in our program:

import 'mqtt';
import { Client, Packet, connect } from 'mqtt';
import { ClientOptions } from 'mqtt';

I’ve created a seperate service that’ll take care of the mqtt bits.

Implementation

Now for the actual implementation of the service I’m going to be referring to this Chinese Site. I did find the host parameter missing in their config.json file. Couldn’t comment on their site so I’ll correct it here then: Could comment using the wechat app.

{
 "host": "127.0.0.1",
 "port": 9001,
 "ssl": false,

"user": "john",
 "pass": "smith",

"subscribe": [
 "Test"
 ],
 "publish": [
 "Test"
 ],

"keepalive": 10
}

In my config, you’ll see I’m using port 9001, a websocket port I discussed in my other blog.

 

Advertisements