Programmable Chat Quickstart: Javascript Chat

In this guide, we will get you up and running quickly with a sample chat application you can build on as you learn more about Programmable Chat. Sound like a plan? Then let's get cracking!

アカウント情報の収集

The first thing we need to do is grab all the necessary information from our Twilio account. To set up our back-end for Chat, we will need four values from our account:

構成値 説明
Service Instance SID アプリケーションのすべてのデータが保存され、スコープが設定されているサービスインスタンス。ここをクリックして、コンソールで 1 つ生成します
Account SID プライマリ Twilio アカウント識別子 - 調べるにはコンソールのここにアクセスします。
API Key 認証に使用します。ここで生成します。
API Secret 認証に使用します。上記と同じようにここで生成します。

スターターアプリケーションのダウンロード、構成、および実行

適切なサーバー側言語用のダウンロードパッケージを選択します。あなたが基本的にフロントエンドの開発者であり、特に希望するものがない場合は、おそらく Python、Node.js、または Ruby を使用すると、一番早く使い始めることができます。

上記で設定した 4 つの値を使用して、各スターターアプリケーションをその README の手順に従って構成し、マシン上で実行します。

スターターアプリケーションの探求

楽しいのはここからです。スターターアプリケーションのホームページを参照すると、次のようなページが表示されます。

クイックスタートアプリケーションのスクリーンショット

ランダムなユーザーアイデンティティが割り当てられ、general という名前のチャンネルに参加しています。別のブラウザーウィンドウまたはタブでこのページを開くと、あなた自身とカンバセーションを始めることができます!

スターターアプリケーションの HTML と CSS はそれほど面白いものではありませんが、このアプリケーションを 実行する JavaScript コードでは、いくつかの非常に重要な処理が行われています。

  1. Ajax 経由でサーバーから AccessToken をフェッチします。
  2. Initialize the Chat JavaScript SDK
  3. "general" という名前のチャンネルに参加します。
  4. UI イベントを処理して、メッセージを送信するか、新しい着信メッセージを表示します。

ユーザーの管理方法については、ユーザーアイデンティティガイドで探求します。また、チャンネルオブジェクトでできることについては、チャンネルおよびメッセージガイドで説明します。

ヘルプ

Need some extra help? Send us a note at help@twilio.com, and we'll make sure to get you running just as quick as we can. Have fun building with Chat, and make sure to let us know what you're building!