Twilio IP メッセージングの事例詳細

2016/03/02 テクノロジー

Twilio IP メッセージングの事例詳細

こんにちは、本間です。

先日の Twilio API 勉強会 Vol.29 - IP メッセージングで変わる Web 開発のかたちにご参加いただいた皆様、ありがとうございました。

発表スライドは以下 Slideshare に投稿しております。

IPメッセージング勉強会「WebのリアルタイムとIPメッセージング」 from Kiminari Homma

その中で私が紹介したキューイングの待ち人数のリアルタイム通知機能に関して、今回はより具体的にご紹介したいと思います。

Twilio の Queue

Twilio の Queue は、対象の電話を入れる部屋のようなものです。部屋に待っている通話は音楽や音声を流して待機することになります。通話待ちに入っている通話は全て取得可能で、発信側はその1番目に待っている通話と接続します。

ということで、具体的に Twilio のどの部分がキューに入った、出たを管理できるのでしょうか。その時点で、 IP メッセージングのメッセージ送信を送れば、リアルタイムでキューの情報を確認できます。

ここで注目すべきページは Enqueue です。それぞれの action, waitUrl でキューに入った、出たを管理できます。つまりこのURLにリクエストが飛んだ瞬間、最新のキュー情報を取得し、先頭に通話が存在したらその通話情報とともにメッセージAPIを呼び出せば良いことになります。

さらにTwilioはactionで送られた中にどのような理由で待ちの通話が終わったのかがわかるようになっています。それが QueueResult です。ほとんどは bridged か hangup になるかと思います。この情報はブラウザに送る情報や今後の統計として有用です。

IP メッセージングの利用

今回はユーザーからメッセージを送信することは一切なく、ただシステムからのイベント通知を受け取るためだけに利用していることになります。そのため、IPメッセージングで提供されているJavaScript SDKのうち利用しているメソッドはほとんどありません。

JavaScript SDK 側では Channel.join() をしてメンバーがチャンネルに加入します。この際、Channelの取得は、messagingClient.getChannelBySid で取得しています。これはTwilioのサンプルコードでは違う方法で取ってきているので注意です。ドキュメントにしかこのメソッドは掲載されていません。

システム側で制御が必要なため、IPメッセージングの Service, API Key, Channel, Role まで全て作成時に一気にREST API で作成しています。実を言うと最近まで API Key を作成する REST API がRuby SDK で提供されていなかったのですが、私がプルリクエストを送ったらいつの間にか機能として追加されていました。

最後に、以下のソースは jQuery の場合の雛形です。もし同じ構成での通知を受け取る構成にしたい場合は参考になると思います。

  var fetchIpmToken = function(callback) {
    $.ajax({
      url: '/console/ipm_token',
      dataType: 'json'
    }).done(function(res) {
      callback(res);
    });
  };

  var setupIpmToken = function() {
    fetchIpmToken(function(res) {
      ipmSetUp(res);
    });
  };

  var ipmSetUp = function(data) {
    accessManager = new Twilio.AccessManager(data.token);
    messagingClient = new Twilio.IPMessaging.Client(accessManager);
    messagingClient.getChannelBySid(data.channel_sid).then(function(channel) {
      if (!channel) return;
      myChannel = channel;
      setupChannel();
    });
    accessManager.on('tokenExpired', function() {
      refreshIpmToken();
    });
  };

  // update token
  var refreshIpmToken = function() {
    fetchIpmToken(function(res) {
      console.log("ipm refresh");
      accessManager.updateToken(res.token);
    });
  };

  var setupChannel = function() {
    myChannel.join().then(function(channel) {
    });
    myChannel.on('messageAdded', function(message) {
      // システム側から通知を受けた時に呼ばれる
    });
    myChannel.getMessages(30).then(function(messages) {
      messages.forEach(function(msg) {
        // 初期ロード時にメッセージ30件取得
      });
    });
  };

終わりに

selfree では常に Twilio の最先端な情報を収集し、CallConnect の改善に努めております。

もし Twilio や CallConnect にご興味をお持ちの場合は、お気軽にお問い合わせください。

ブログ