How to quickly add chat functionality to an Angular application.
In this tutorial we will see step by step how to integrate MQTT CHAT web messenger in an angular application. We will try docked and embedded layouts.
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.
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 mqttchatOnce 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 --openIf 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.
Add MQTT CHAT docked layout.
Add MQTT CHAT docked script and MQTT CHAT variables to index.html template just before the closing <head> tag.
To get Custom APP ID for your website domain, you should Register to MQTT CHAT and add your domain in admin panel.
<!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' </script>
<script src="https://cluster1.telifoun.com/webapi/en/mqttchat-docked.js?appid=mqttchat-ffMGt5tJ"></script></head>
<body>
<app-root></app-root>
</body>
</html>
Now in app.component.ts add the login() function that will be called when user 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;@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})export class AppComponent {title = 'mqttchat';login(){mqttchat_userId=1;
mqttchat_userName="user";
mqttchat_userSurname="angular";
mqttchat_userGender=0;
mqttchat_userAvatar="https://www.paris-medecine-esthetique.fr/wp-content/uploads/2021/04/beaute-homme-dr-mayeux-medecine-esthetique-paris8-cover.jpg" ;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-lite"></div>If we click on button. MQTT CHAT DOCKED layout is lounched.
You can of cource change layout or language, in app.component.html update mqttchat div attribute.
<button (click)="login()">click here!</button>
<div id="mqttchat" class="mqttchat-default"></div>
Add MQTT CHAT embedded layout.
To show MQTT CHAT embedded layout just add two more 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 not mqttchat_docked.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';</script>
<script src="https://cluster1.telifoun.com/webapi/en/mqttchat-embedded.js?appid=mqttchat-ffMGt5tJ"></script></head>
<body>
<app-root></app-root>
</body>
</html>
In app.component.js 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.scss']
})export class AppComponent {title = 'mqttchat';login(){mqttchat_userId=1;
mqttchat_userName="user";
mqttchat_userSurname="angular";
mqttchat_userGender=0;
mqttchat_userAvatar="https://www.paris-medecine-esthetique.fr/wp-content/uploads/2021/04/beaute-homme-dr-mayeux-medecine-esthetique-paris8-cover.jpg" ;telifounJQ.mqttchat_embedded.start();}}
If we click on button. MQTT CHAT embedded ayout is lounched.
That is all, If you are facing any issue in this tutorial, please comment in below discussions.
