Saturday, March 25, 2023
HomeJavascriptIonic Chat App: Group and 1-1 Chat in 3 straightforward steps.
Javascript

Ionic Chat App: Group and 1-1 Chat in 3 straightforward steps.

Updates4Devs.com
By Updates4Devs.com
0
13


This text was initially revealed on the DeadSimpleChat weblog: Ionic Chat App: Group and 1-1 Chat in 3 straightforward steps.

On this information we’ll create an Ionic chat app in 3 straightforward steps.

We will likely be utilizing DeadSimpleChat so as to add chat to our Ionic utility. We can even be exploring how we will use DeadSimpleChat options like

  1. Customization
  2. API and SDK and Webhooks
  3. Language translation
  4. and different to create an superior ionic chat

First, allow us to scaffold our ionic app

💡New to DeadSimpleChat? It is a flip key chat that you may simply add to your web site or App —with none difficult code. For Digital / Dwell occasions, SaaS App, Social Platform, Training, Gaming, Finance Signal Up for Free



Step1. Create your Ionic App.

open your terminal and kind the beneath code to create a brand new ionic app.

now run the code utilizing

ionic begin
Enter fullscreen mode

Exit fullscreen mode

you should have the ionic cli put in first. In the event you do not need the cli set up you may confer with the ionic documentation right here: https://ionicframework.com/docs/intro/cli

now, we will likely be making a clean utility so within the terminal select clean utility and we will likely be utilizing the Vue Js entrance finish expertise. however you may construct this simply utilizing Angular and React as effectively.

So, select the expertise and select the black utility.

Now cd into the appliance I’ve named it

ionic-vue
Enter fullscreen mode

Exit fullscreen mode

however you may title no matter you want.

Now sort the command

ionic serve
Enter fullscreen mode

Exit fullscreen mode

to begin the appliance.

As soon as began you may see the clean starter web page.

Now cd into the Ionic app and open the index.html web page

Subsequent we’ll want the code to embed chat on our ionic app. for that we want an account with the DeadSimpleChat.



Step2: Create an account with DeadSimpleChat

Go to DeadSimpleChat.com and click on on the Get Began button to create a free account.

Image description

Upon getting created and account you’ll wind up within the dashboard web page there click on on the create chat room button to create a chat room

Image description

Upon getting created a chat room you may regulate the settings, customise the chat look to match your app / web site, set language and different parameters.

Upon getting made the settings you may go to the embed web page and get the embed code

Image description

you will have this embed code so as to add the chat to your ionic app.

Copy the embed code and allow us to go in the direction of our ionic utility.



Step 3 Including the Chat to your Ionic Utility.

Within the earlier step we copied the embed code for the DeadSimpleChat

Now, go to your ionic utility and open the HomePage.Vue file and add the script tag or the embed code that you just copied from the DeadSimpleChat

Add the code the place you need the chat to seem in your utility

the code ought to look one thing like this:

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>Clean</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title dimension="massive">Clean</ion-title>
        </ion-toolbar>
      </ion-header>

      <div id="container">
        <iframe src="https://deadsimplechat.com/CGOC0byXC" width="100%" top="600px"></iframe>
      </div>
    </ion-content>
  </ion-page>
</template>
Enter fullscreen mode

Exit fullscreen mode

And you’ve got added the chat in your ionic app. the need appear to be this

As you may see we now have simply added chat in an ionic utility in simply 3 easy steps.

However, that is only the start you are able to do much more like controlling the app through SDK, API and Webhooks.

Controlling the feel and appear together with the font dimension, colour, textual content and dimension of the chat room.

language translation and highly effective moderation options together with the power to create a number of moderators, ban customers, ban unhealthy phrases and delete messages.

You’ll be able to study extra concerning the improvement options and documentation right here:

https://deadsimplechat.com/developer

As a bonus I will likely be explaining among the most used SDK options beneath



Bonus: JavaScript SDK, API and Webhooks

You need to use all of the options of DeadSimpleChat with SDK like

  1. Including customers
  2. Sending messages
  3. Deleting message
  4. and all of the capabilities that may be carried out within the chat can be completed utilizing the SDK
  5. You may as well ship customizations programmatically to every chat room. Customise the look of the chat on completely different pages and / or for various customers.
  6. Use third get together functions with the webhooks performance.

All the pieces might be completed precisely as you want with JavaScript SDK API and webhooks.

Right here is how one can add SDK to your app and among the frequent strategies obtainable within the SDK.



How one can add JavaScript SDK to your Ionic App.

so as to add the SDK to the chat room you will have to import the SDK. It’s worthwhile to paste the script tag to import the SDK to your chat room

<script src="https://cdn.deadsimplechat.com/sdk/1.0/dschatsdk.min.js"></script>
Enter fullscreen mode

Exit fullscreen mode

Go to your Ionic app and open the index. html web page and paste the script tag.

The code will likely be like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Ionic App</title>

    <base href="https://dev.to/" />

    <meta title="color-scheme" content material="gentle darkish" />
    <meta
      title="viewport"
      content material="viewport-fit=cowl, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <meta title="format-detection" content material="phone=no" />
    <meta title="msapplication-tap-highlight" content material="no" />

    <hyperlink rel="shortcut icon" sort="picture/png" href="<%= BASE_URL %>belongings/icon/favicon.png" />

    <!-- add to homescreen for ios -->
    <meta title="apple-mobile-web-app-capable" content material="sure" />
    <meta title="apple-mobile-web-app-title" content material="Ionic App" />
    <meta title="apple-mobile-web-app-status-bar-style" content material="black" />
  </head>

  <physique>
    <div id="app"></div>
    <script src="https://cdn.deadsimplechat.com/sdk/1.0/dschatsdk.min.js"></script>
  </physique>

</html>
Enter fullscreen mode

Exit fullscreen mode

Now we now have added the chat SDK and now allow us to join the SDK to the iframe

To try this we’ll want three issues

  1. ID of the iframe
  2. Chat Room ID
  3. Public API key

For the iframe Id let me give the iframe and id of chat-frame

go to HomePage.Vue

and add an id tag to the iframe like this:

<iframe id="chat-frame" src="https://deadsimplechat.com/CGOC0byXC" width="100%" top="600px"></iframe>
Enter fullscreen mode

Exit fullscreen mode

Now we now have added the id tag to the iframe

  1. **Chat room ID: **the chat room id is the a part of the usl after the deadsimplechat.com/

On this case our chat room id is : CGOC0byXC

You may as well see the chat room id within the dashboard -> chat rooms and there you may see an inventory of chat rooms with their chat room ids

  1. Public API Key.

For the general public API key go to the Dashboard -> developer -> public API key

To your reference I’ve added a picture beneath:

Image description

Now that we now have the three issues which are required to attach the SDK to the chat room allow us to name the join perform to attach the sdk to the chat room.

Open the HomePage.vue and kind the beneath code.

<script lang="ts">
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
import { defineComponent } from 'vue';

let sdk:any = null;

let DSChatSDK = window.DSChatSDK;

export default defineComponent({
  title: 'HomePage',
  async ionViewDidEnter() {
    console.log("View Entered");
    sdk = new DSChatSDK("CGOC0byXC", "chat-frame", "pub_7172586270477a656a3863587a594f46566e736839307737544b532d3463484c4e524b5743676b7733336d5151767a4b")
    await sdk.join();
  },
  strategies: {
    logout: perform() {
      sdk.logout();
    }
  },
  elements: {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar
  }
});
</script>
Enter fullscreen mode

Exit fullscreen mode

We have already got the script tag added above together with the id that’s chat-frame

We declare the var SDK and assign it the worth null.

we declare DSChatSDK and assign it the worth of window.DSChatSDK that is the script tag within the index.html that we added to import the chat SDK.

then within the outline part, we now have add the the ionic lifecycle technique

ionViewDidEnter();
Enter fullscreen mode

Exit fullscreen mode

On this technique we’re initializing a brand new occasion of DSChatSDK and assigning it to the SDK .

Within the strategies Object beneath we now have created the logout perform and we’re utilizing the SDK’s logout technique to logout the consumer.

Coming to the ion template. Right here we’re making a logout button which when clicked will name the logout technique which in flip will name the SDKs logout technique and the logout the consumer from the chat room

 <button v-on:click on="logout()">Logout</button>
Enter fullscreen mode

Exit fullscreen mode

The ultimate code of the HomePage.Vue appears to be like like this:

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>Ionic Chat Utility</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title dimension="massive">Ionic Chat Utility</ion-title>
        </ion-toolbar>
      </ion-header>

      <div id="container">
        <iframe id="chat-frame" src="https://deadsimplechat.com/CGOC0byXC" width="100%" top="600px"></iframe>
      </div>

      <button v-on:click on="logout()">Logout</button>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
import { defineComponent } from 'vue';

let sdk:any = null;

let DSChatSDK = window.DSChatSDK;

export default defineComponent({
  title: 'HomePage',
  async ionViewDidEnter() {
    console.log("View Entered");
    sdk = new DSChatSDK("CGOC0byXC", "chat-frame", "pub_7172586270477a656a3863587a594f46566e736839307737544b532d3463484c4e524b5743676b7733336d5151767a4b")
    await sdk.join();
  },
  strategies: {
    logout: perform() {
      sdk.logout();
    }
  },
  elements: {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar
  }
});


</script>
<fashion scoped>
#container {
  text-align: heart;

  place: absolute;
  left: 0;
  proper: 0;
  prime: 50%;
  rework: translateY(-50%);
}

#container robust {
  font-size: 20px;
  line-height: 26px;
}

#container p {
  font-size: 16px;
  line-height: 22px;

  colour: #8c8c8c;

  margin: 0;
}

#container a {
  text-decoration: none;
}
</fashion>
Enter fullscreen mode

Exit fullscreen mode

and this how the index.html appears to be like like:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Ionic App</title>

    <base href="https://dev.to/" />

    <meta title="color-scheme" content material="gentle darkish" />
    <meta
      title="viewport"
      content material="viewport-fit=cowl, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <meta title="format-detection" content material="phone=no" />
    <meta title="msapplication-tap-highlight" content material="no" />

    <hyperlink rel="shortcut icon" sort="picture/png" href="<%= BASE_URL %>belongings/icon/favicon.png" />

    <!-- add to homescreen for ios -->
    <meta title="apple-mobile-web-app-capable" content material="sure" />
    <meta title="apple-mobile-web-app-title" content material="Ionic App" />
    <meta title="apple-mobile-web-app-status-bar-style" content material="black" />
  </head>

  <physique>
    <div id="app"></div>
    <script src="https://cdn.deadsimplechat.com/sdk/1.0/dschatsdk.min.js"></script>
  </physique>

</html>
Enter fullscreen mode

Exit fullscreen mode

Now, you’ve efficiently added the chat SDK and linked the iframe to the chat SDK.

Subsequent, allow us to attempt among the frequent strategies of the chat SDK. you may study extra about the way to add the chat SDK to your app and the way to join the chat SDK to your app right here: https://deadsimplechat.com/developer/sdk/quick-start/

Login consumer

to login the consumer to the chat room we will likely be utilizing the joinRoom(Choices) technique.

If we have a look at the documentation right here for JoinRoom: https://deadsimplechat.com/developer/sdk/strategies/be part of

We are able to see that we will be part of room utilizing three completely different parameters:

  1. username
  2. accessToken
  3. electronic mail

For this demo we will likely be utilizing the username to affix the consumer to the chat room.

the tactic is :

sdk.joinRoom({
    username,
    roomPassword,
    accessToken: accessToken,
    electronic mail,
    password
});
Enter fullscreen mode

Exit fullscreen mode

Allow us to create one other technique known as the JoinRoom in our HomePage.Vue and name the SDKs be part of room technique with the username John

so, I’ve created a technique known as joinRoom and known as the SDKs joinRoom technique inside it with the username John.

I’ve additionally created a button known as Add John to talk room the code appears to be like like:

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>Ionic Chat Utility</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title dimension="massive">Ionic Chat Utility</ion-title>
        </ion-toolbar>
      </ion-header>

      <div id="container">
        <iframe id="chat-frame" src="https://deadsimplechat.com/CGOC0byXC" width="100%" top="600px"></iframe>
      </div>

      <button v-on:click on="logout()">Logout</button>
      <button v-on:click on="joinRoom()">Add John to talk room</button>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
import { defineComponent } from 'vue';

let sdk:any = null;

let DSChatSDK = window.DSChatSDK;

export default defineComponent({
  title: 'HomePage',
  async ionViewDidEnter() {
    console.log("View Entered");
    sdk = new DSChatSDK("CGOC0byXC", "chat-frame", "pub_7172586270477a656a3863587a594f46566e736839307737544b532d3463484c4e524b5743676b7733336d5151767a4b")
    await sdk.join();
  },
  strategies: {
    logout: perform() {
      sdk.logout();
    },
    joinRoom: perform(){
      sdk.joinRoom({
        username: "John"
      })
    }

  },
  elements: {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar
  }
});
Enter fullscreen mode

Exit fullscreen mode

Now, After we open the Ionic app in a brand new tab and click on on the Add john to the chat room button a consumer is joined within the chat room and assigned the username John

Image description

Image description

thus we now have added the consumer john to our chat room.

You’ll be able to study extra concerning the full listing of SDK strategies, API and Webhooks that DeadSimpleChat has to supply within the developer documentation

There are numerous extra options and capabilities that can be utilized with the SDK like

  1. Language translation
  2. Banning Dangerous phrases
  3. Creating Moderators
  4. File Sharing
  5. Picture Sharing
  6. Integrating with third get together software program
  7. delete messages
  8. Banning customers
  9. Computerized Single Signal On

DeadSimpleChat can deal with Hundreds of thousands of concurrent chat members and is probably the most scalable chat software program.

DeadSimpleChat can also be your flip key chat resolution. Including chat to your web site or app might be completed in seconds and could be very straightforward to make use of.

Conclusion

On this article I’ve defined how one can simply add chat to your Ionic Utility with Vue Js in 3 straightforward steps

You probably have any questions you may contact us at: suppor[at]deadsimplechat.com

Previous article
Pure CSS Customized Checkbox Model
Next article
Sensible Python Initiatives E-book – Yasoob Khalid
Updates4Devs.com
Updates4Devs.comhttps://updates4devs.com
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Load more

Recent Comments

ABOUT US

updates4devs is your web development, react , Nodejs fashion website. We provide you with the latest breaking news and videos straight from the web development industry.

POPULAR POSTS

POPULAR CATEGORY

copy right 2022 opy; updates4devs.com. All rights reserved