Build an Intercom clone in Nuxt.js - Part Two
Tags: appwrite, database, realtime, nuxt3
Published: 2022-12-29 07:15:58

---
title: Build an Intercom clone in Nuxt.js - Part Two
published: true
description: This article is the second in a two-part series about building an Intercom clone with Nuxt.js.
tags: #appwrite #database #realtime #nuxt3
cover_image: https://res.cloudinary.com/chukwutosin/image/upload/v1671629907/hackmamba%20articles/IMG_7457_a2c0hv.png
# Use a ratio of 100:42 for best results.
# published_at: 2022-12-29 07:11 +0000
---

This article is the second in a two-part series about building an Intercom clone with Nuxt.js. Reading the [first](https://dev.to/hackmamba/build-an-intercom-clone-in-nuxtjs-using-appwrite-part-one-20og) article will help in understanding this article.

In the first article, we focused on building the client area, where users can send messages to be received by the admin. In this article, we will be building the admin end, which interacts with messages sent from the client end.

# Repository
https://github.com/folucode/intercom-clone-nuxtjs-part2

# Setting up the application

To set up our application, we’ll clone this [repository](https://github.com/folucode/intercom-clone-template-part2) and run the command below in the project directory:


    $ npm i

This repository contains all the initial setups we'll need for our app, helping us focus on our app's main functionality.

**Note:** We will encounter some errors if the app is run as is.

# Building the application

Open `index.vue`, which is located in the pages folder. In the scripts tag, paste the code below to initialize the `Appwrite` modules:

```javascript
    <script>
    import { Client, Account, Databases, Query } from 'appwrite';
    import { randomStr } from '../utils';
    
    const client = new Client();
    client
      .setEndpoint('http://localhost/v1') // Our Appwrite Endpoint
      .setProject('[PROJECT-ID]');
    
    const account = new Account(client);
    const database = new Databases(client);
    
    account.createAnonymousSession().then(
      (response) => {
        console.log(response);
      },
      (error) => {
        console.log(error);
      }
    );
    
    const sessionID = randomStr();
    
    ...
```
Only signed-in users can interact with the Appwrite database, so we created an anonymous session in the code above as a workaround. After that, we generate a unique `sessionID`. 

**Note:** The **PROJECT_ID** resides in the Appwrite console.

## Setting up a real-time connection

To set up a real-time connection with [Appwrite](https://appwrite.io/?utm_source=hackmamba&utm_medium=hackmamba-blog) in our app, we check to ensure an active user session in the `mounted` lifecycle method. If so, we set up a real-time connection with Appwrite by subscribing to the documents channel. 

Subscribing to the documents channel means we listen for changes in the documents in our database. The documents are the individual data we store in our database.

```javascript
    ...
    
    export default {
      data() {
        return {
          chatSessions: [],
          sessionID: '',
          messages: [],
          text: '',
        };
      },
      mounted() {
        if (account.get !== null) {
          try {
            client.subscribe('documents', (response) => {
              
            });
          } catch (error) {
            console.log(error, 'error');
          }
        }
      },
    };
    </script>
```
## Fetching chat sessions

We want to see all the active chat sessions from our client app. To do so, we’ll need to create a method called `getChatSessions` and call it in the mounted lifecycle method.

```javascript
    ...
    methods: {
        async getChatSessions() {
          let response = await database.listDocuments(
            '[DATABASE-ID]',
            '[CHAT-SESSIONS-COLLECTION-ID]',
          );
          this.chatSessions = response.documents;
        },
    ...
```
It can be called in the mounted method like so:

```javascript
    ...
    mounted() {
        this.getChatSessions();
    
        if (account.get !== null) {
          try {
            client.subscribe('documents', (response) => {
              this.getChat(this.sessionID)
            });
          } catch (error) {
            console.log(error, 'error');
          }
        }
      },
    ...
```
So, once the component renders, we get a list of chat sessions that users have created.

## Fetching the chats

To be able to see all the messages in a chat session, we need to create a function that fetches all the messages.

In the methods object, create a new method called `getChat`.

```javascript
    ...
    async getChat(sessionID) {
          let response = await database.listDocuments(
            '[DATABASE-ID]',
            '[CONVERSATIONS-COLLECTION-ID]',
            [Query.equal('sessionID', sessionID)]
          );
          this.messages = response.documents;
        },
    ...
```
This function fetches all the chats in the `conversations` collection with the associated `sessionID`. 

In the `mounted` method, call `getChat` in the `subscribe` callback function, like so:

```javascript
    ...
    mounted() {
        this.openChatSession();
    
        if (account.get !== null) {
          try {
            client.subscribe('documents', (response) => {
              this.getChat(sessionID)
            });
          } catch (error) {
            console.log(error, 'error');
          }
        }
      },
    ...
```
When we start up our app, we should see something like this:

![](https://paper-attachments.dropboxusercontent.com/s_721FFA2FC6B85CFF0DB5147D5EA8158278670F0111FFA63D32E9198457E98CB6_1669489266837_Screenshot+2022-11-26+at+20.00.16.png)


Clicking any of the chat sessions on the left-hand side would bring up all the messages in that chat.

## Sending a message

For us to be able to send a message, we’ll add a new method called `sendMessage` in the methods object.

```javascript
    ...
    async sendMessage() {
          await database.createDocument(
            '[DATABASE-ID]',
            '[CONVERSATIONS-COLLECTION-ID]',
            'unique()',
            {
              sessionID,
              message: this.text,
              sender: 'admin',
            }
          );
    
          this.text = '';
        }
    ...
```
The `sendMessage` method adds a new record to the `conversations` collection. This time, the sender is **admin**, so we can differentiate who is sending a message.

After that, we clear the input field. Then, so that we can see our message, we need to add `getChat`.

Our app should now look like this:

![](https://paper-attachments.dropboxusercontent.com/s_721FFA2FC6B85CFF0DB5147D5EA8158278670F0111FFA63D32E9198457E98CB6_1669489775940_Screenshot+2022-11-26+at+20.09.18.png)


If we open a chat session from the client app, it will show up here, and we can reply to messages from the users.

# Conclusion

In this article, we learned how to create a simple clone of the admin end of Intercom by leveraging Appwrite's real-time features. The admin end we built can view the list of open chats. Clicking on a chat opens a real-time chat window that communicates with the client interface built in part one of this series.

# Resources
- [Appwrite’s documentation](https://appwrite.io/docs/installation/?utm_source=hackmamba&utm_medium=hackmamba-blog)
- [Nuxt Documentation](https://nuxtjs.org/docs/get-started/installation)