Nuxt でリアルタイムチャットアプリケーションを作成する方法

リアルタイムチャットアプリケーションでは、受信者は送信者のメッセージをすぐに見ることができます。これは、2 者間での 1 対 1 の会話でも、グループでの会話でもかまいません。

それが、このチュートリアルで構築するものです。このアプリケーションでは、直感的な Vue フレームワークであるNuxtを使用します。

構築するものと使用するテクノロジーがわかったので、使用するチャット API について見ていきましょう。

この記事では、最小限の UI とアプリへの統合が非常に簡単なRobinを使用します。それでは始めましょう。

ステップ 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のサインアップページにアクセスして、30 日間の無料トライアルアカウントを作成します。

Robin は、アカウントを作成してから 7 日後に通知し、請求日の前にカードを削除できます。

サインアップフォームに入力すると、カード情報を入力するための請求ページにリダイレクトされます。リダイレクトされる次のページで、Robin は作成するアプリの名前とその認証タイプを要求します。任意の名前と認証オプションのいずれかを自由に使用してください。

s_8728EF96CF25BE6F7A46E3619EB658CA92CDD4D1E377FEC5C8707FC59B5068A6_1658071816533_スクリーンショット+2022-07-17+at+16.29.23

ステップ 3 – Robin 資格情報を取得する

Robin ダッシュボードでアプリを作成したので、注意すべき点があります。Nuxt アプリで Robin を使用する際に必要な認証情報がいくつかあります。

APIキー、
ユーザートークン、
ユーザー名、
ユーザー、および
キー

それぞれについて個別に見ていきましょう。

API キー: アプリを作成すると、Robin が自動的に API キーを作成します。開始ページまたはダッシュボードの API 構成ページから取得できます。アプリケーションごとに一意です。
ユーザートークン: ユーザートークンは、Robin アプリのすべてのユーザーの一意の識別子です。サイトでアプリを使用しているのはあなたなので、このプロパティに渡されるトークンはあなたのものです。ただし、通常はサーバー上でユーザーが作成し、クライアント側で使用します。
ユーザー名: ユーザー名は、Robin アプリの現在のユーザーの名前です。この場合、それはあなたの名前になります。他の誰かにあなたの Robin チャットを自分のサイトまたは Web アプリ (つまり、Robin アプリの別のユーザー) に含めてもらいたい場合は、その名前にする必要があります。
ユーザー: ユーザーは、Robin アプリのユーザーのリストです。通常、ユーザートークン、プロファイル画像、およびユーザー名が含まれます。
キー: これは基本的に、ユーザーリスト内のユーザートークン、プロファイル画像、およびユーザー名を柔軟に記述できるようにするために存在します。これが例です。キーオブジェクトが次のようになっているとします。

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

次に、users配列は、ユーザーのトークン、プロフィール画像、および名前を、keysオブジェクト内の値で記述する必要があります。

Robin アプリを使用するユーザーに関係なく、Robin はユーザーからとを必要とuserTokenします。Robin は、表示名にこれを必要とし、プラットフォーム上で各メッセージの送信者と受信者を一意に識別します。profileImageuserName

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)

RobinChatコンポーネントには CSS 自体が含まれていないため、CSS をインポートすることに注意してください。

ステップ 6 – プラグインを登録する

ファイル内のpluginsプロパティは、nuxt.config.jsNuxt アプリが使用する必要があるプラグインを Nuxt アプリに知らせるためのものです。したがって、そこに Robin プラグインを含めないと、アプリで使用できなくなります。

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

ステップ 7 – プラグインを使用する

あとはRobinChat、アプリの任意の場所にコンポーネントを含めて、先ほど説明した資格情報を props として渡すだけです。

繰り返しますが、資格情報は次のとおりです。

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 コンポーネントに prop として渡すオブジェクトで定義する必要があることに注意してください。

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

次に、 Robin のドキュメントに記載されているように、Robin インスタンスを作成した後、SDK のcreateUserToken()関数を使用してトークンを作成します。

<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_スクリーンショット+2022-07-20+at+11.10.45

アプリはこちらから入手できます。

アプリが読み込まれるたびにトークンが作成されるとメッセージを表示できなくなるため、このアプリには以前に作成したユーザートークンを使用したことに注意してください。永続的なトークンは、Robin のメッセージを持続させるものです。

また、ユーザー Ayo 用に別のアプリを作成しました。あなたもそれをチェックすることができます。このようにして、イドレニンとアヨの間のリアルタイム通信をテストできます。

結論

Robin を使用して Nuxt アプリケーションにリアルタイム通信を実装する方法を学習しました。

統合が容易なため、アプリにチャットシステムを非常に迅速に実装し、その構築/維持に集中できます。

サーバー上でユーザーのトークンを確実に作成する場合、フロントエンドでの統合の実装はそれほど難しくありません。

ハッピービル！

ソース: https://www.freecodecamp.org/news/create-a-real-time-chat-application-with-nuxt/

#nuxt

What is GEEK

Buddha Community

高橋花子

1660260600

Nuxt でリアルタイムチャットアプリケーションを作成する方法

リアルタイムチャットアプリケーションでは、受信者は送信者のメッセージをすぐに見ることができます。これは、2 者間での 1 対 1 の会話でも、グループでの会話でもかまいません。

それが、このチュートリアルで構築するものです。このアプリケーションでは、直感的な Vue フレームワークであるNuxtを使用します。

構築するものと使用するテクノロジーがわかったので、使用するチャット API について見ていきましょう。

この記事では、最小限の UI とアプリへの統合が非常に簡単なRobinを使用します。それでは始めましょう。

ステップ 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のサインアップページにアクセスして、30 日間の無料トライアルアカウントを作成します。

Robin は、アカウントを作成してから 7 日後に通知し、請求日の前にカードを削除できます。

サインアップフォームに入力すると、カード情報を入力するための請求ページにリダイレクトされます。リダイレクトされる次のページで、Robin は作成するアプリの名前とその認証タイプを要求します。任意の名前と認証オプションのいずれかを自由に使用してください。

s_8728EF96CF25BE6F7A46E3619EB658CA92CDD4D1E377FEC5C8707FC59B5068A6_1658071816533_スクリーンショット+2022-07-17+at+16.29.23

ステップ 3 – Robin 資格情報を取得する

Robin ダッシュボードでアプリを作成したので、注意すべき点があります。Nuxt アプリで Robin を使用する際に必要な認証情報がいくつかあります。

APIキー、
ユーザートークン、
ユーザー名、
ユーザー、および
キー

それぞれについて個別に見ていきましょう。

API キー: アプリを作成すると、Robin が自動的に API キーを作成します。開始ページまたはダッシュボードの API 構成ページから取得できます。アプリケーションごとに一意です。
ユーザートークン: ユーザートークンは、Robin アプリのすべてのユーザーの一意の識別子です。サイトでアプリを使用しているのはあなたなので、このプロパティに渡されるトークンはあなたのものです。ただし、通常はサーバー上でユーザーが作成し、クライアント側で使用します。
ユーザー名: ユーザー名は、Robin アプリの現在のユーザーの名前です。この場合、それはあなたの名前になります。他の誰かにあなたの Robin チャットを自分のサイトまたは Web アプリ (つまり、Robin アプリの別のユーザー) に含めてもらいたい場合は、その名前にする必要があります。
ユーザー: ユーザーは、Robin アプリのユーザーのリストです。通常、ユーザートークン、プロファイル画像、およびユーザー名が含まれます。
キー: これは基本的に、ユーザーリスト内のユーザートークン、プロファイル画像、およびユーザー名を柔軟に記述できるようにするために存在します。これが例です。キーオブジェクトが次のようになっているとします。

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

次に、users配列は、ユーザーのトークン、プロフィール画像、および名前を、keysオブジェクト内の値で記述する必要があります。

Robin アプリを使用するユーザーに関係なく、Robin はユーザーからとを必要とuserTokenします。Robin は、表示名にこれを必要とし、プラットフォーム上で各メッセージの送信者と受信者を一意に識別します。profileImageuserName

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)

RobinChatコンポーネントには CSS 自体が含まれていないため、CSS をインポートすることに注意してください。

ステップ 6 – プラグインを登録する

ファイル内のpluginsプロパティは、nuxt.config.jsNuxt アプリが使用する必要があるプラグインを Nuxt アプリに知らせるためのものです。したがって、そこに Robin プラグインを含めないと、アプリで使用できなくなります。

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

ステップ 7 – プラグインを使用する

あとはRobinChat、アプリの任意の場所にコンポーネントを含めて、先ほど説明した資格情報を props として渡すだけです。

繰り返しますが、資格情報は次のとおりです。

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 コンポーネントに prop として渡すオブジェクトで定義する必要があることに注意してください。

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

次に、 Robin のドキュメントに記載されているように、Robin インスタンスを作成した後、SDK のcreateUserToken()関数を使用してトークンを作成します。

<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_スクリーンショット+2022-07-20+at+11.10.45

アプリはこちらから入手できます。

アプリが読み込まれるたびにトークンが作成されるとメッセージを表示できなくなるため、このアプリには以前に作成したユーザートークンを使用したことに注意してください。永続的なトークンは、Robin のメッセージを持続させるものです。

また、ユーザー Ayo 用に別のアプリを作成しました。あなたもそれをチェックすることができます。このようにして、イドレニンとアヨの間のリアルタイム通信をテストできます。

結論

Robin を使用して Nuxt アプリケーションにリアルタイム通信を実装する方法を学習しました。

統合が容易なため、アプリにチャットシステムを非常に迅速に実装し、その構築/維持に集中できます。

サーバー上でユーザーのトークンを確実に作成する場合、フロントエンドでの統合の実装はそれほど難しくありません。

ハッピービル！

ソース: https://www.freecodecamp.org/news/create-a-real-time-chat-application-with-nuxt/

#nuxt

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

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

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

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

Nuxt でリアルタイム チャット アプリケーションを作成する方法

ユーザートークンの作成方法

RobinChat コンポーネントで資格情報を使用する方法

What is GEEK

Buddha Community

Nuxt でリアルタイム チャット アプリケーションを作成する方法

ユーザートークンの作成方法

RobinChat コンポーネントで資格情報を使用する方法

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

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

What is Nuxt 2020?

What is Nuxt 2020?

Nuxt でリアルタイムチャットアプリケーションを作成する方法

Nuxt でリアルタイムチャットアプリケーションを作成する方法