在实时聊天应用程序中，收件人几乎可以立即查看发件人的信息。这既可以是两方之间的一对一对话，也可以是小组对话。

而这正是我们在本教程中要建立的。对于这个应用程序，我们将使用Nuxt，即直观的Vue框架。

现在我们知道了我们要建立的东西和我们要使用的技术，让我们来看看我们要使用的聊天API。

在这篇文章中，我们将使用Robin，因为它的UI最小，而且很容易集成到我们的应用程序中。说完这些，让我们开始吧。

第1步 - 创建Nuxt应用程序

首先，我们需要用以下任何一个命令来创建Nuxt应用程序：

yarn create nuxt-app nuxt-chat-app
// OR
npx create-nuxt-app nuxt-chat-app
// OR
npm init nuxt-app nuxt-chat-app

第2步 - 创建一个Robin账户

现在我们的应用程序已经准备好了，在使用之前，我们需要有一个Robin账户。前往Robin的注册页面，创建一个30天的免费试用账户。

在创建账户后的7天内，Robin会通知你，你可以在计费日期前删除你的卡。

填写完注册表后，你会被重定向到一个账单页面，填写你的银行卡信息。在它重定向你的下一个页面，罗宾要求提供你想创建的应用程序的名称和它的认证类型。请随意使用您选择的任何名称和任何一种认证选项。

第3步 - 获取你的Robin凭证

现在我们已经在Robin仪表板上创建了一个应用程序，有一些东西你应该注意到。在Nuxt应用程序中使用Robin时，你需要一些证书：

API密钥
用户令牌
用户名称
用户和
钥匙

让我们逐一来看看它们的情况：

API密钥。当你创建一个应用程序时，罗宾会自动创建API密钥。你可以从你的仪表板上的入门或API配置页面获取它。它对每个应用程序都是唯一的。
用户令牌。用户令牌是你的Robin应用程序的每个用户的唯一标识。由于你是在你的网站上使用该应用程序的人，所以应该传递给这个属性的令牌是你的。然而，它是由你，用户，通常在服务器上创建，然后在客户端使用。
用户名：用户名是你的Robin应用程序的当前用户的名字。在这种情况下，它将是你的名字。如果您想让其他人在他们的网站或网络应用中包括您的Robin聊天（即您的Robin应用程序的另一个用户），它应该是他们的名字。
用户。用户是您的Robin应用程序上的用户列表。它通常包含他们的用户令牌，个人资料图片和用户名。
密钥。这个基本的存在是为了帮助我们灵活地描述用户列表中的用户令牌，个人资料图片和用户名。这里有一个例子。如果我们的keys对象看起来像这样：

keys: {
  userToken: 'user_token',
  profileImage: 'profile_image',
  userName: 'user_name'
}

那么我们的users 数组应该用keys 对象中的值来描述用户的令牌、个人资料图片和名字。

无论哪些用户会使用你的Robin应用程序，Robin都需要他们提供一个userToken ，profileImage 和一个userName 。Robin需要这个来显示名字，并在平台上唯一地识别每个信息发送者和接收者：

users: [
  {
    'user_token': 'ABCDEF098765GH',
    'profile_image': 'https://url-to-image',
    'user_name': 'Article Reader'
  }
]

第四步 - 在你的Nuxt应用程序中安装Robin

既然我们有了所需的一切，我们就可以继续安装Robin了：

npm i robin-vue
// OR
yarn add robin-vue

第5步 - 设置Robin插件

在你的plugins 目录中，创建一个带有插件设置的robin.js 文件：

import Vue from 'vue'
import RobinChat from 'robin-vue'
import 'robin-vue/dist/style.css'

Vue.use(RobinChat)

注意，我们要导入CSS，因为RobinChat 组件本身并不包括任何CSS。

第6步 - 注册该插件

nuxt.config.js 文件中的plugins 属性是为了让我们的Nuxt应用程序知道它应该使用的插件。因此，如果我们不在这里包括我们的Robin插件，它将不能在我们的应用程序中使用：

export default {
  // ...
  plugins: [
    { src: '~/plugins/robin.js', mode: 'client' }
  ]
}

第7步 - 使用该插件

现在剩下的就是让我们在应用中的任何地方包含RobinChat 组件，并将我们之前讨论过的那些证书作为道具传递。

再一次，这些凭证是：

API密钥
用户令牌
用户名称
用户以及
密钥

在这个列表中，我们目前没有的是我们的用户令牌和我们应用上的用户的令牌。

回顾一下，这些令牌通常是在服务器上创建的。但我们没有这个条件。因此，我们可以在Robin的JavaScript SDK的帮助下，继续创建它们。我们之前安装的Vue SDK依赖于这个JavaScript SDK。所以我们不需要安装它，因为它已经存在于我们的应用程序中。

如何创建用户令牌

我们可以继续前进，在我们要包含聊天用户界面的页面中创建令牌。因为这是为了学习，我们可以继续为5个用户创建令牌，包括我们自己。我们需要为他们每个人想出用户名：

<template>
  <!-- ... -->
</template>


<script>
export default {
  data () {
    return {
      users: [
        {
          user_token: '',
          profile_image: '',
          user_name: 'idorenyin'
        },
        {
          user_token: '',
          profile_image: '',
          user_name: 'ayo'
        },
        {
          user_token: '',
          profile_image: '',
          user_name: 'elvis'
        },
        {
          user_token: '',
          profile_image: '',
          user_name: 'favour'
        },
        {
          user_token: '',
          profile_image: '',
          user_name: 'enoch'
        }
      ],
    }
  }
}
</script>

注意，users 数组中每个用户对象的键都必须在keys 对象中定义，我们将把这个对象作为一个道具传递给Robin组件：

keys: {
  userToken: 'user_token',
  profileImage: 'profile_image',
  userName: 'user_name'
},

接下来，我们使用SDK的createUserToken() 函数，在创建一个Robin实例后，按照Robin的文档中所说的，创建令牌：

<template>
  <!-- ... -->
</template>

<script>
import { Robin } from 'robin.io-js'

export default {
  data () {
    return {
      keys: {
        userToken: 'user_token',
        profileImage: 'profile_image',
        userName: 'user_name'
      },
      users: [
        // ...
      ]
    }
  },
  created () {
    this.createTokens()
  },
  methods: {
    async createTokens () {
      const robin = new Robin('API_KEY', true)
      for (let i = 0; i < this.users.length; i++) {
        await robin.createUserToken({
          meta_data: {
            username: this.users[i].user_name
          }
        }).then((res) => {
          this.users[i].user_token = res.data.user_token
        })
      }
    }
  }
}
</script>

如何在RobinChat组件上使用凭证

现在我们有了在我们的应用程序上显示Robin聊天用户界面所需的一切。呜呼!
我们现在可以继续使用令牌和其他凭证了：

<template>
  <!-- ... -->
  <RobinChat
    v-if="tokensAreAvailable"
    :api-key="apiKey"
    :user-token="users[0].user_token"
    user-name="Idorenyin Udoh"
    :keys="keys"
    :users="users"
  />
</template>

<script>
import { Robin } from 'robin.io-js'

export default {
  data () {
    return {
      tokensAreAvailable: false,
      apiKey: 'API_KEY',
      keys: {
        userToken: 'user_token',
        profileImage: 'profile_image',
        userName: 'user_name'
      },
      users: [
        {
          user_token: '',
          profile_image: '',
          user_name: 'idorenyin'
        },
        {
          user_token: '',
          profile_image: '',
          user_name: 'ayo'
        },
        {
          user_token: '',
          profile_image: '',
          user_name: 'elvis'
        },
        {
          user_token: '',
          profile_image: '',
          user_name: 'favour'
        },
        {
          user_token: '',
          profile_image: '',
          user_name: 'enoch'
        }
      ]
    }
  },
  created () {
    this.createTokens()
  },
  methods: {
    async createTokens () {
      const robin = new Robin(this.apiKey, true)
      for (let i = 0; i < this.users.length; i++) {
        await robin.createUserToken({
          meta_data: {
            username: this.users[i].user_name
          }
        }).then((res) => {
          this.users[i].user_token = res.data.user_token
        })
      }
      this.tokensAreAvailable = true
    }
  }
}
</script>

请注意，我们只在所有用户的令牌都可用时才显示RobinChat ，以避免错误。

如何用Nuxt创建一个实时的聊天应用程序