PusherとVue.jsを使用してリアルタイムチャットアプリを構築します

このチュートリアルは、Vue.jsとPusher's Chatkitサービスを使用してリアルタイムチャットアプリケーションを構築することをガイドします。 フロントエンドに焦点を当て、ユーザー管理と部屋の作成のためのChatkitのバックエンド機能を活用します。

主要な機能：

マルチチャネル/部屋のサポート。

• リアルタイムメンバーの存在検出。
• インジケーターの入力。

前提条件：

中級からAdvanced Vue.js、Vuex、およびCSSフレームワーク（ここで使用されるBootstrap-Vueなど）の知識が想定されています。 node.jsおよびvue CLIをインストールする必要があります：

npm install -g @vue/cli

プロジェクトのセットアップ：

vue.jsプロジェクトを作成します：

1. 手動機能の選択を選択し、Babel、Vuex、およびVue Routerを選択します。

   vue create vue-chatkit

   依存関係をインストール：

2. npm i @pusher/chatkit-client bootstrap-vue moment vue-chat-scroll vuex-persist

   必要なフォルダーの構造とファイルを作成します（元のチュートリアルの画像に示すように）。 loading.ioからおよび
3. をダウンロードして、

   。loading.cssに配置します。 loading-btn.css src/assets/css

chatkitセットアップ：

PusherのWebサイトでChatkitインスタンスを作成します

Chatkitコンソールにユーザー（「ジョン」、「ソルト」、「ハント」）と部屋（「一般」、「武器」、「戦闘」）を作成します。 instance locator および
4. TESTトークンプロバイダーurl
the
5. credentientivelisents
タブに注意してください。 トークンプロバイダーをテスト
6. 環境変数：
プロジェクトルートでファイルを作成して追加します。



vue.js開発：

チュートリアルでは、Vueコンポーネント（Loginform、ChatNavbar、RoomList、UserList、Messagelist、Messageform）の作成と、州管理のためのVuexとの統合について詳しく説明しています。 これらのコンポーネントのコードは、VUEXアクションと突然変異とともに、元のチュートリアルで広く説明されています。 このプロセスには、Chatkitへの接続、部屋への購読、メッセージの処理、存在の変更、およびタイピングインジケーターが含まれます。 ページのリフレッシュ後の再接続とエラー処理も実装されています。

チュートリアルは、Vue.jsおよびPusherとのリアルタイムチャットアプリケーションの構築のさまざまな側面に対処する包括的なFAQセクションで終了します。 完全なコードはGitHubで利用できます（元のチュートリアルで提供されているリンク）。 プレースホルダーの値を実際のChatkit資格情報に置き換えることを忘れないでください。

以上がPusherとVue.jsを使用してリアルタイムチャットアプリを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。