许 志强

许 志强

1660264200

如何使用 Nuxt 创建实时聊天应用程序

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

这就是我们将在本教程中构建的内容。对于这个应用程序，我们将使用直观的 Vue 框架Nuxt。

现在我们知道我们将要构建什么以及我们将使用的技术，让我们回顾一下我们将使用的聊天 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 天的免费试用帐户。

Robin 会在您创建帐户后 7 天通知您，您可以在账单日期之前移除您的卡。

填写注册表单后，您将被重定向到结算页面以填写您的卡信息。在它重定向您的下一页上，Robin 请求您要创建的应用程序的名称及其身份验证类型。随意使用您选择的任何名称和任何一个身份验证选项。

s_8728EF96CF25BE6F7A46E3619EB658CA92CDD4D1E377FEC5C8707FC59B5068A6_1658071816533_Screenshot+2022-07-17+at+16.29.23

第 3 步 - 获取您的 Robin 凭证

现在我们已经在 Robin 仪表板上创建了一个应用程序，您应该注意一些事情。在 Nuxt 应用程序中使用 Robin 时，您需要几个凭据：

  • API 密钥，
  • 用户令牌，
  • 用户名，
  • 用户和
  • 钥匙

让我们分别回顾一下它们。

  • API 密钥：Robin 在您创建应用程序时会自动创建 API 密钥。您可以从仪表板上的入门或 API 配置页面检索它。它对每个应用程序都是独一无二的。
  • 用户令牌：用户令牌是您 Robin 应用程序的每个用户的唯一标识符。应该传递给此属性的令牌是您的，因为您是在您的网站上使用该应用程序的人。但是，它通常由您（用户）在服务器上创建，然后在客户端使用。
  • 用户名：用户名是 Robin 应用程序的当前用户的名称。在这种情况下，它将是您的名字。如果您希望其他人将您的 Robin 聊天包含在他们的网站或 Web 应用程序中（即您的 Robin 应用程序的另一个用户），它应该是他们的名字。
  • 用户：用户是您 Robin 应用程序上的用户列表。它通常包含他们的用户令牌、个人资料图像和用户名。
  • Keys：这基本上是为了帮助我们灵活地描述用户列表中的用户令牌、个人资料图像和用户名。这是一个例子。如果我们的 keys 对象看起来像这样：
keys: {
  userToken: 'user_token',
  profileImage: 'profile_image',
  userName: 'user_name'
}

然后我们的users数组应该用对象中的值来描述用户的令牌、个人资料图像和名称keys。

无论将使用您的 Robin 应用程序的用户如何，Robin 都需要来自他们的 auserToken和profileImagea 。userNameRobin 需要此显示名称并在平台上唯一标识每个消息发送者和接收者。

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

第 4 步 – 在您的 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 步 – 注册插件

文件中的plugins属性nuxt.config.js是让我们的 Nuxt 应用知道它应该使用的插件。所以如果我们不在那里包含我们的 Robin 插件，它在我们的应用程序中将不可用。

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

第 7 步 – 使用插件

现在剩下的就是让我们将RobinChat组件包含在应用程序的任何位置，并将我们之前讨论过的那些凭据作为道具传递。

再一次，凭据是：

  • API 密钥，
  • 用户令牌，
  • 用户名，
  • 用户和
  • 钥匙

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

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

如何创建用户令牌

我们可以继续在我们将包含聊天 UI 的页面中创建令牌。因为这是出于学习目的，我们可以继续为 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 聊天 UI 所需的一切。哇！
我们现在可以继续使用令牌和其他凭据。

<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在所有用户的令牌都可用时才显示该组件以避免错误。

结果如下所示：

s_8728EF96CF25BE6F7A46E3619EB658CA92CDD4D1E377FEC5C8707FC59B5068A6_1658311851926_Screenshot+2022-07-20+at+11.10.45

该应用程序可在此处获得。

请注意，我为此应用程序使用了先前创建的用户令牌，因为如果每次加载应用程序时都创建令牌，您将无法查看消息。永久令牌是使 Robin 上的消息持续存在的原因。

另外，我为用户 Ayo创建了另一个应用程序。你也可以检查一下。这样，您可以测试 Idorenyin 和 Ayo 之间的实时通信。

结论

您刚刚学习了如何使用 Robin 在 Nuxt 应用程序上实现实时通信。

易于集成使得在您的应用程序中实现聊天系统并专注于构建/维护它的速度非常快。

如果您确保在服务器上创建用户的令牌，那么在前端实现集成不会太难。

建设愉快！

 来源：https ://www.freecodecamp.org/news/create-a-real-time-chat-application-with-nuxt/

#nuxt 

What is GEEK

Buddha Community

如何使用 Nuxt 创建实时聊天应用程序
许 志强

许 志强

1660264200

如何使用 Nuxt 创建实时聊天应用程序

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

这就是我们将在本教程中构建的内容。对于这个应用程序，我们将使用直观的 Vue 框架Nuxt。

现在我们知道我们将要构建什么以及我们将使用的技术，让我们回顾一下我们将使用的聊天 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 天的免费试用帐户。

Robin 会在您创建帐户后 7 天通知您，您可以在账单日期之前移除您的卡。

填写注册表单后，您将被重定向到结算页面以填写您的卡信息。在它重定向您的下一页上，Robin 请求您要创建的应用程序的名称及其身份验证类型。随意使用您选择的任何名称和任何一个身份验证选项。

s_8728EF96CF25BE6F7A46E3619EB658CA92CDD4D1E377FEC5C8707FC59B5068A6_1658071816533_Screenshot+2022-07-17+at+16.29.23

第 3 步 - 获取您的 Robin 凭证

现在我们已经在 Robin 仪表板上创建了一个应用程序，您应该注意一些事情。在 Nuxt 应用程序中使用 Robin 时，您需要几个凭据：

  • API 密钥，
  • 用户令牌，
  • 用户名，
  • 用户和
  • 钥匙

让我们分别回顾一下它们。

  • API 密钥：Robin 在您创建应用程序时会自动创建 API 密钥。您可以从仪表板上的入门或 API 配置页面检索它。它对每个应用程序都是独一无二的。
  • 用户令牌：用户令牌是您 Robin 应用程序的每个用户的唯一标识符。应该传递给此属性的令牌是您的，因为您是在您的网站上使用该应用程序的人。但是，它通常由您（用户）在服务器上创建，然后在客户端使用。
  • 用户名：用户名是 Robin 应用程序的当前用户的名称。在这种情况下，它将是您的名字。如果您希望其他人将您的 Robin 聊天包含在他们的网站或 Web 应用程序中（即您的 Robin 应用程序的另一个用户），它应该是他们的名字。
  • 用户：用户是您 Robin 应用程序上的用户列表。它通常包含他们的用户令牌、个人资料图像和用户名。
  • Keys：这基本上是为了帮助我们灵活地描述用户列表中的用户令牌、个人资料图像和用户名。这是一个例子。如果我们的 keys 对象看起来像这样：
keys: {
  userToken: 'user_token',
  profileImage: 'profile_image',
  userName: 'user_name'
}

然后我们的users数组应该用对象中的值来描述用户的令牌、个人资料图像和名称keys。

无论将使用您的 Robin 应用程序的用户如何，Robin 都需要来自他们的 auserToken和profileImagea 。userNameRobin 需要此显示名称并在平台上唯一标识每个消息发送者和接收者。

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

第 4 步 – 在您的 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 步 – 注册插件

文件中的plugins属性nuxt.config.js是让我们的 Nuxt 应用知道它应该使用的插件。所以如果我们不在那里包含我们的 Robin 插件，它在我们的应用程序中将不可用。

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

第 7 步 – 使用插件

现在剩下的就是让我们将RobinChat组件包含在应用程序的任何位置，并将我们之前讨论过的那些凭据作为道具传递。

再一次，凭据是：

  • API 密钥，
  • 用户令牌，
  • 用户名，
  • 用户和
  • 钥匙

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

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

如何创建用户令牌

我们可以继续在我们将包含聊天 UI 的页面中创建令牌。因为这是出于学习目的，我们可以继续为 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 聊天 UI 所需的一切。哇！
我们现在可以继续使用令牌和其他凭据。

<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在所有用户的令牌都可用时才显示该组件以避免错误。

结果如下所示：

s_8728EF96CF25BE6F7A46E3619EB658CA92CDD4D1E377FEC5C8707FC59B5068A6_1658311851926_Screenshot+2022-07-20+at+11.10.45

该应用程序可在此处获得。

请注意，我为此应用程序使用了先前创建的用户令牌，因为如果每次加载应用程序时都创建令牌，您将无法查看消息。永久令牌是使 Robin 上的消息持续存在的原因。

另外，我为用户 Ayo创建了另一个应用程序。你也可以检查一下。这样，您可以测试 Idorenyin 和 Ayo 之间的实时通信。

结论

您刚刚学习了如何使用 Robin 在 Nuxt 应用程序上实现实时通信。

易于集成使得在您的应用程序中实现聊天系统并专注于构建/维护它的速度非常快。

如果您确保在服务器上创建用户的令牌，那么在前端实现集成不会太难。

建设愉快！

 来源：https ://www.freecodecamp.org/news/create-a-real-time-chat-application-with-nuxt/

#nuxt 

Shannon Atkinson

Shannon Atkinson

1615818017

Create A Super Fast Nuxt.js Server With Vite! Nuxt + Vite Tutorial With Vue.js!

In this tutorial we’ll take a lok at Nuxt.js and Vite. This will create a super fast Nuxt server, with half a second reload times! Vue.js has never been faster!

  • 0:00 Introduction
  • 0:27 Nuxt + Vite Plugin
  • 01:47 Install Nuxt.js App
  • 02:43 Installing Vite To The Nuxt App
  • 04:23 Vue 3 + Nuxt.js Presentation Sebastien Chopin
  • 07:58 NuxtJS Resources, Nuxt Modules
  • 08:31 Conclusion

#nuxt #vite #nuxt #vue

Dahlia Muller

Dahlia Muller

1590512499

Nuxt.js Content Tutorial, Nuxt.js Auto-Import Tutorial

Nuxt.js Content is a Git-based Headless CMS that allows you to fetch Markdown, JSON, YAML and CSV! in this video we look at how easy it is to setup. We also look at Nuxt auto-import components!

#nuxt #nuxt.js

Dahlia Muller

Dahlia Muller

1589905200

What is Nuxt 2020?

With the increasing popularity of Nuxt.js the core team and authors have not been sitting still. In February Sebastien will talk about the progression and plans for Nuxt.js in 2020.

Youtube channel: Vuejs Amsterdam - https://www.youtube.com/watch?v=9CkfX6LgNUU

#nuxt #nuxt.js

Dahlia Muller

Dahlia Muller

1590238260

What is Nuxt 2020?

With the increasing popularity of Nuxt.js the core team and authors have not been sitting still. In February Sebastien will talk about the progression and plans for Nuxt.js in 2020.

#nuxt #nuxt.js