本文是关于与nuxt.js建立对讲克隆的两部分系列的第二篇。阅读第一篇文章将有助于理解本文。

在第一篇文章中，我们专注于构建客户区域，用户可以在该领域发送管理员要接收的消息。在本文中，我们将构建管理员端，该端与从客户端端发送的消息交互。

存储库

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

设置应用程序

要设置我们的应用程序，我们将this repository克隆并在项目目录中运行下面的命令：

$ npm i

此存储库包含我们应用程序所需的所有初始设置，帮助我们专注于应用程序的主要功能。

注意：如果该应用按原样运行。

，我们将遇到一些错误

构建应用程序

打开index.vue，位于页面文件夹中。在脚本标签中，粘贴以下代码以初始化Appwrite模块：

    <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();

    ...

仅签名用户可以与AppWrite数据库进行交互，因此我们在上面的代码中创建了一个匿名会话作为解决方法。之后，我们生成一个唯一的sessionID。

注意： project_id 位于AppWrite控制台中。

建立实时连接

要在我们的应用程序中与AppWrite建立实时连接，我们检查以确保在mounted Lifececle方法中进行活动的用户会话。如果是这样，我们通过订阅Documents Channel来建立与AppWrite的实时连接。

订阅文档频道意味着我们聆听数据库中文档中的更改。文档是我们存储在数据库中的单个数据。

    ...

    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>

提取聊天会议

我们希望查看我们客户端应用程序中的所有活动聊天会话。为此，我们需要创建一种称为getChatSessions的方法，并在固定的生命周期方法中称为。

    ...
    methods: {
        async getChatSessions() {
          let response = await database.listDocuments(
            '[DATABASE-ID]',
            '[CHAT-SESSIONS-COLLECTION-ID]',
          );
          this.chatSessions = response.documents;
        },
    ...

可以在固定的方法中称为：

    ...
    mounted() {
        this.getChatSessions();

        if (account.get !== null) {
          try {
            client.subscribe('documents', (response) => {
              this.getChat(this.sessionID)
            });
          } catch (error) {
            console.log(error, 'error');
          }
        }
      },
    ...

因此，一旦组件渲染，我们将获得用户创建的聊天会话列表。

获取聊天

要能够在聊天会话中查看所有消息，我们需要创建一个获取所有消息的函数。

在方法对象中，创建一个称为getChat的新方法。

    ...
    async getChat(sessionID) {
          let response = await database.listDocuments(
            '[DATABASE-ID]',
            '[CONVERSATIONS-COLLECTION-ID]',
            [Query.equal('sessionID', sessionID)]
          );
          this.messages = response.documents;
        },
    ...

此函数可与关联的sessionID获取conversations集合中的所有聊天。

在mounted方法中，在subscribe回调函数中调用getChat，就像：

    ...
    mounted() {
        this.openChatSession();

        if (account.get !== null) {
          try {
            client.subscribe('documents', (response) => {
              this.getChat(sessionID)
            });
          } catch (error) {
            console.log(error, 'error');
          }
        }
      },
    ...

当我们启动应用程序时，我们应该看到这样的东西：

单击左侧的任何聊天会话都会在该聊天中引起所有消息。

发送消息

让我们能够发送消息，我们将在方法对象中添加一个名为sendMessage的新方法。

    ...
    async sendMessage() {
          await database.createDocument(
            '[DATABASE-ID]',
            '[CONVERSATIONS-COLLECTION-ID]',
            'unique()',
            {
              sessionID,
              message: this.text,
              sender: 'admin',
            }
          );

          this.text = '';
        }
    ...

sendMessage方法为conversations集合添加了新记录。这次，发件人是 admin ，因此我们可以区分谁发送消息。

之后，我们清除输入字段。然后，以便我们可以看到我们的消息，我们需要添加getChat。

我们的应用现在应该看起来像这样：

如果我们从客户端应用程序打开聊天会话，它将在此处显示，我们可以回复用户的消息。

结论

在本文中，我们通过利用AppWrite的实时功能来学习如何创建对讲机的简单克隆。我们构建的管理局可以查看开放聊天的列表。单击聊天打开一个实时聊天窗口，该窗口与本系列中的第一个内置的客户端接口通信。

存储库