Medium

How to quickly add chat functionality to an Angular or AngularJS application.

BY -

In this tutorial we will see step by step how to integrate mqtt chat web in an angular application. We will try docked and embedded layouts.

DOWNLOAD CODE
VIDEO DEMO

A normal Angular application executes in the browser, rendering pages in the DOM in response to user actions. This means that the application generally renders more quickly, giving users a chance to view the application layout before it becomes fully interactive.
MQTT CHAT works well with both server side and client side frameworks. For an embedded layout we see no difference. But the use of docked layout in an Angular application is more user-friendly because the user does not have to wait for the chat to load when navigating from one page to another. Like Facebook do.

Let’s start our tutorial by creating new Angular Application.

1- Create new application called mqttchat.

We use Visual Studio Code as editor in this tutorial. Run this CLI command to create new Angular Application.

ng new mqttchat

Once application is created we execute the command below to deploy web application on server and access it at this url http://localhost:4200 on the browser.

ng serve --open

If all goes well you will see the default template like below:

Now remove all html content of app.component.html template and add the following html code to it.


<button>click here!</button>
<div id="mqttchat" class="mqttchat-default"  ></div>

This html code contains two elements:
1- A button which will launch the login() function when clicked on it.
2 -The mqttchat container #mqttchat with the chosen theme assigned to the class attribute.

2- Add Mqtt Chat docked layout.

- Add Mqtt Chat docked script and Mqtt Chat variables to index.html template just before the closing head tag.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Mqttchat</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script>

    var mqttchat_userId=''; // Intentionally left blank
    var mqttchat_userName=''; // Intentionally left blank
    var mqttchat_userSurname=''; // Intentionally left blank
    var mqttchat_userGender=''; // Intentionally left blank
    var mqttchat_userAvatar='skip'; // Intentionally affected 'skip'
    var mqttchat_userLink='skip'; // Intentionally affected 'skip'
    
    (function(d, s, id) { 
       var js, fjs = d.getElementsByTagName(s)[0];
       if (d.getElementById(id)) return;
       js = d.createElement(s); js.id = id;
       js.src = "https://cluster1.telifoun.com/rest/en/mqttchat-docked.js?appId=mqttchat-87226030&uf=0";
       fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'mqttchat-cloud'));
    </script> 
</head>
<body>
  <app-root></app-root>
</body>
</html>

- Now in app.component.ts add the login() function that will be called when user login and will start chat after user login success.
In this tutorial we will affect static data to Mqtt Chat variables already defined in index.html file. In real application user informations should be carried from Server.


import { Component } from '@angular/core';
declare var telifounJQ:any;
declare var mqttchat_userId:any;
declare var mqttchat_userName:any;
declare var mqttchat_userSurname:any;
declare var mqttchat_userGender:any;
declare var mqttchat_userAvatar:any;
declare var mqttchat_width:any;
declare var mqttchat_height:any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'mqttchat';

  login(){
    mqttchat_userId=1;
    mqttchat_userName="user";
    mqttchat_userSurname="angular"; 
    mqttchat_userGender=0;   
 telifounJQ.MQTTchat_Docked.start();
  }
}    

-app.component.html should be updated now to call login() function on button click event.


<button (click)="login()">click here!</button>
<div id="mqttchat" class="mqttchat-default"></div>

If we click on button. MqttChat Docked layout is louched.

3- Add Mqtt Chat embedded layout.

To show Mqtt Chat embedded layout just add two javascript variables to index.html file:
mqttchat_width : Width of Mqtt Chat embedded iframe.
mqttchat_height : Hieght of Mqtt Chat embedded iframe.
And change chat script to load to mqttchat-embedded.js.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Mqttchat</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script>

    var mqttchat_userId=''; // Intentionally left blank
    var mqttchat_userName=''; // Intentionally left blank
    var mqttchat_userSurname=''; // Intentionally left blank
    var mqttchat_userGender=''; // Intentionally left blank
    var mqttchat_userAvatar='skip'; // Intentionally affected 'skip'
    var mqttchat_userLink='skip'; // Intentionally affected 'skip'
    var mqttchat_width='800'; 
    var mqttchat_height='500'; 

(function(d, s, id) { 
       var js, fjs = d.getElementsByTagName(s)[0];
       if (d.getElementById(id)) return;
       js = d.createElement(s); js.id = id;
       js.src = "https://cluster1.telifoun.com/rest/en/mqttchat-embedded.js?appId=mqttchat-87226030&uf=0";
       fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'mqttchat-cloud'));
    </script> 
</head>
<body>
  <app-root></app-root>
</body>
</html>

- In app.component.ts update code like below:


import { Component } from '@angular/core';
declare var telifounJQ:any;
declare var mqttchat_userId:any;
declare var mqttchat_userName:any;
declare var mqttchat_userSurname:any;
declare var mqttchat_userGender:any;
declare var mqttchat_userAvatar:any;
declare var mqttchat_width:any;
declare var mqttchat_height:any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'mqttchat';

  login(){
    mqttchat_userId=1;
    mqttchat_userName="user";
    mqttchat_userSurname="angular"; 
    mqttchat_userGender=0;   
    telifounJQ.MQTTchat_Embedded.start();
  }
}    

If we click on button. MqttChat Docked layout is louched.

If you are facing any issue in this tutorial, please comment in below discussions.


2020 © MQTT-CHAT.com Inc.