メニュー

Expand
ページを評価:

Node.jsとExpressを使用したブラウザー通話

This tutorial uses the 1.X version of the Voice JavaScript SDK (formerly called Twilio Client). Click here for information on how to migrate to the 2.X version.

This Node.js Express web application shows how you can use the Twilio Voice JavaScript SDK (formerly known as Twilio Client) to make browser-to-phone and browser-to-browser calls.

このアプリケーションは、「王様のスポーツ」を楽しむ人達に用品を販売する Birchwood Bicycle Polo Co. のサポートサイトを動かします。3 つの主要な機能があります。

  • 悩みを抱えたお客様はサポートチケットを送信し、自分の電話番号と問題を知らせることができます。
  • サポート担当者は、サポートチケットに対応するために、ブラウザーからお客様の電話番号に電話をかけることができます。
  • また、お客様もブラウザーを使って、可能であれば、サポート担当者と直に話すことができます。

このチュートリアルでは、このアプリケーションを実行するための主要なコードをいくつか紹介します。コードを実行する方法については、GitHub のプロジェクトの README をお読みください。

Learn how Zendesk uses the Twilio Voice JavaScript SDK to make phone support available in 40+ countries.

はじめましょう!

サポートチケットを送信する

アプリのホームページには、お客様がサポートチケットを送信するためのフォームが表示されます。Jade Engine を使用してページを駆動します。

Ticket モデル自体には、ごくわずかのフィールドしかありません。

var Ticket = new mongoose.Schema({
  name:String,
  phoneNumber: String,
  description: String,
  createdAt : Date
});

Note that we are using mongoose as MongoDB object modeling tool for defining our models.

        
        
        
        routes/tickets.js

        Now we can create a ticket. Next up, let's work on the dashboard for the support agent.

        サポートエージェント用のダッシュボードを作成する

        サポートダッシュボード

        サポート担当者が /Dashboard を開くと、送信されたすべてのサポートチケットが表示されます。

        Each ticket also has a "Call Customer" button which invokes a JavaScript function we wrote named callCustomer(). That function kicks off a Voice JS SDK call to the phone number passed as its sole parameter.

              
              
              

              Great, now we have an interface good enough for our support agents. Next up, in order to let our agents make calls to their customers through the browser, we need to provide them an access token.

              Let's learn how to generate a Token

              Generate a token

              We use the Twilio helper library to generate and configure our tokens. To allow our support agents to call the phone numbers on our tickets, we use the addGrant method.

              That method requires an identifier for a VoiceGrant object with a TwiML Application. Twilio will send a POST request to our backend every time a user makes a browser call with the Voice JS SDK — the TwiML Application tells Twilio which URL to send that request to.

                    
                    
                    
                    routes/token.js

                    Generate an access token

                    routes/token.js

                    Once we are equipped with our Access Token, the next step is to set up the Twilio Device in the browser.

                    ブラウザー内で動作するJavaScriptを書いてみましょう。

                    Set up a Twilio Device in the Browser

                    To use the Twilio Device in a web browser we use the twilio.js library.

                    We start by retrieving a capability token from the view we defined in the previous step with a POST request through AJAX. Then we enable the Twilio Device for this page by passing our token to Twilio.Device.setup().

                    After that the Twilio.Device.ready() callback will let us know when the browser is ready to make and receive calls.

                          
                          
                          
                          public/js/browser-calls.js

                          Twilio Deviceをセットアップする

                          public/js/browser-calls.js

                          これで必要なものはほぼ全て揃いました。 いよいよチュートリアルの核心部分を見てみましょう。 ブラウザーからエージェントが通話を開始できるようにする方法を見ていきましょう。

                          Call a customer's phone from your browser

                          お客様に電話をかける(ブラウザーから電話)

                          サポート担当者がサポートチケットの「Call Customer」をクリックすると、電話がかけられます。

                          Twilio.Device.connect() を使用して、新規発信通話を開始します。 バックエンドはTwilioにこの通話の処理方法を伝えます。 続いて、call ビューで使用する phoneNumber パラメーターを含めます。

                                
                                
                                
                                public/js/browser-calls.js

                                顧客に架電する

                                public/js/browser-calls.js

                                お見事! これでエージェントが顧客に電話をかけられるようになりました。 続いて、通話を電話番号に接続する方法を確認しましょう。

                                通話を電話番号に接続する

                                通話を電話番号に接続する

                                いずれかのユーザーが電話をかけると、Twilio は TwiML アプリケーションで設定されている URL (このケースでは /call/connect)に POST リクエストを送信します。

                                TwiML を使い、リクエストに応答し、その通話をどのように処理するか Twilio に指示します。Twilio は前のステップの phoneNumber パラメーターをリクエストに受け渡し、TwiML にダイヤルします。

                                      
                                      
                                      
                                      routes/call.js

                                      callビューが応答した後、Twilioはサポートエージェントのブラウザーと顧客の電話の接続を完了します。 ブラウザーに戻ってどのように処理されるのか見てみましょう。

                                      進行中の通話を示す方法を学ぶ

                                      発信中です

                                      We use the Twilio.Device.connect() callback to update some UI elements to notify our users that they are in a call. This function receives a Connection object, which offers some additional details about the call.

                                            
                                            
                                            
                                            public/js/browser-calls.js

                                            通話中であることを知らせる

                                            public/js/browser-calls.js

                                            これで、ブラウザーから電話への通話サンプルはおしまいです。 続いてさらにその先に進み、ブラウザー間のサンプルをお見せしましょう。

                                            顧客がブラウザーから通話を開始できるようにする

                                            サポート担当者に電話をかける(ブラウザーからブラウザー)

                                            サポートチケットは便利ですが、お客様が直ちにヘルプを必要とする場合があります。多少作業が必要ですが、ブラウザーからブラウザーへの通話により、お客様がサポート担当者とライブで話すことができます。

                                            When a customer clicks the Call support button on the home page we again use Twilio.Device.connect() to initiate the call. This time we don't pass any additional parameters — our backend will route this call to our support agent.

                                                  
                                                  
                                                  
                                                  public/js/browser-calls.js

                                                  Setting up the browser-to-browser call was rather simple right? Now let's look at how our backend will route this call to our support agent.

                                                  顧客からの着信通話を接続する

                                                  サポート担当者のクライアントと通話を接続する

                                                  サポート担当者が着信を受けることができるようにするため、ケイパビリティートークンの生成時に allowClientIncoming メソッドを使い、クライアント名として support_agent を受け渡します。

                                                  capability.allowClientIncoming(page == "/dashboard"
                                                                                            ? "support_agent" 
                                                                                            : "customer");
                                                  

                                                  When Twilio sends a POST request to our /call/connect URL, we can connect the call to our support agent by responding with a <Client> TwiML noun and the support_agent name.

                                                        
                                                        
                                                        
                                                        routes/call.js

                                                        これで、着信通話を取るための準備は以上です。 ここでブラウザーに戻って今回の接続の処理方法を見てみましょう。

                                                        電話に応答する

                                                        電話に応答する

                                                        サポート担当者のクライアントは着信を受け取ると、Twilio.Device.incoming() コールバックで定義した関数をトリガーします。

                                                        応答」ボタンに紐づけられた関数内で.accept()メソッドが呼び出されるまで、着信接続 (connection) は保留状態になります。

                                                        また、通話中になると UI を更新するように、.accept() コールバックを設定します。

                                                              
                                                              
                                                              
                                                              public/js/browser-calls.js

                                                              電話に応答する

                                                              public/js/browser-calls.js

                                                              お見事! これで両方のケース、すなわちブラウザーから電話への通話、そしてブラウザー間の通話における仕組みが理解できました! 続いて、電話を切ることにした場合はどうなるか見ていきましょう。

                                                              通話を切断する

                                                              通話を切断する

                                                              In order to finish a call we invoke Twilio.Device.disconnectAll(), which we wired to the Hang up button in our UI.

                                                              We also pass a callback function to Twilio.Device.disconnect() above, to reset some UI elements.

                                                                    
                                                                    
                                                                    
                                                                    public/js/browser-calls.js

                                                                    通話を切断する

                                                                    public/js/browser-calls.js

                                                                    That's it! Our Express application now powers browser-to-phone and browser-to-browser calls using the Twilio Voice JS SDK.

                                                                    次はどこでしょうか?

                                                                    関連トピック

                                                                    Twilio を使う Node.js 開発者であれば、他のチュートリアルもお楽しみください。

                                                                    IVR: スクリーニングと録音

                                                                    IVR (Interactive Voice Response:自動音声応答)システムに通話スクリーニングおよび録音を追加することで、時間を短縮し、気を散らすものを取り除きます。

                                                                    通話のトラッキング

                                                                    一意の電話番号をさまざまな広告に割り当てることで、最もコールレートが良いものを追跡でき、発信者自体のデータを取得できます。

                                                                    これは役に立ちましたか?

                                                                    このチュートリアルをお読みいただき、ありがとうございます。 弊社に知らせたいフィードバックがある場合は、Twitter経由で英語でご連絡ください。 喜んでお話を伺います。

                                                                    Jarod Reyes Maylon Pedroso David Prothero Kat King Samuel Mendes Andrew Baker Jose Oliveros Sarah Stringer Brianna DelValle
                                                                    ページを評価:

                                                                    ヘルプが必要ですか?

                                                                    We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd by visiting Twilio's Community Forums or browsing the Twilio tag on Stack Overflow.

                                                                          
                                                                          
                                                                          

                                                                          フィードバックくださりありがとうございます!

                                                                          We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

                                                                          Sending your feedback...
                                                                          🎉 Thank you for your feedback!
                                                                          Something went wrong. Please try again.

                                                                          Thanks for your feedback!

                                                                          Refer us and get $10 in 3 simple steps!

                                                                          ステップ1

                                                                          Get link

                                                                          Get a free personal referral link here

                                                                          ステップ2:

                                                                          Give $10

                                                                          Your user signs up and upgrade using link

                                                                          ステップ3

                                                                          Get $10

                                                                          1,250 free SMSes
                                                                          OR 1,000 free voice mins
                                                                          OR 12,000 chats
                                                                          OR more