How to quickly add chat functionality to an 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 mqttchat
ng serve --open
<button>click here!</button>
<div id="mqttchat" class="mqttchat-default" ></div>

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'
</script>

<script src="https://cluster1.telifoun.com/webapi/en/mqttchat-docked.js?appid=mqttchat-ffMGt5tJ"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>
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();}}
<button (click)="login()">click here!</button>
<div id="mqttchat" class="mqttchat-lite"></div>
<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>
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();}}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store