Amazon Connect Streamsで各種EventをSubscribeする

2017.12.24

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

事業開発部の酒匂です。下記の記事でAmazon Connect Streamsの初期セットアップ手順について記載いたしましたので、今回はAmazon ConnectのCTIサービスから連携される各種イベントを取得できるようにしたいと思います。

Amazon Connect Streamsの初期セットアップ手順

イベントの取得方法

Amazon Connect Streamsの公式ドキュメントの下記の章が参考にしていきます。

Event Subscription

Amazon ConnectのCTIサービスから通知されるイベントは、下記の2種類があります。

  • エージェントに関するイベント
    • エージェントのステータスが変更された、など
  • コンタクト(コール)に関するイベント
    • コール着信した、など

各イベントが発生した際に呼び出されるメソッドを下記のメソッドで設定すると、イベントを受信できるようになります。

  • Event Subscription
    • connect.agent()
      • エージェント情報が更新された際に呼び出されるメソッドを設定する
    • connect.contact()
      • コンタクト(コール)が発生した際に呼び出されるメソッドを設定する

受信できるようになったイベントは下記のメソッドで操作します。

  • Agent API
    • エージェントに関する各イベントが発生した際に呼び出されるメソッドを設定する
    • エージェントに関する情報を取得する
  • Contact API
    • コンタクト(コール)に関する各イベントが発生した際に呼び出されるメソッドを設定する
    • コンタクト(コール)に関する情報を取得する
  • Connection API
    • コンタクト(コール)のコネクション情報を操作する
  • Utility Functions
    • 文字通りユーティリティーメソッド群

イベントの取得サンプル

各イベントを取得したら、テキストエリアにログ出力していくサンプルを用意しました。

HTML部分

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>amazon connect stream sample</title>
<script src="amazon-connect-v1.2.0.js"></script>
</head>
<body>
	<table>
		<tr>
			<td>
				<div id="containerDiv" style="width: 320px; min-width: 200px; height: 465px; min-height: 400px;"></div>
			</td>
			<td>
				<div id="logDiv"><textarea id="logtextarea" rows="40" cols="140"></textarea></div>
			</td>
		</tr>
	</table>
<script>
・・・
(Java Script部分に記載)
・・・
</script>
</body>
</html>

JavaScript部分

//CCPのURLを設定する
var ccpUrl = "https://hogehoge.awsapps.com/connect/ccp#/";

//CCPをロードする
connect.core.initCCP(containerDiv, {
	ccpUrl: ccpUrl,        
	loginPopup: true,          
	softphone: {              
	  disableRingtone: true, 
	  ringtoneUrl: null,
	  allowFramedSoftphone: true 
	   }
	});

//画面上のテキストエリアにログ出力する
function writeLog(message) {
	var logtextarea = document.getElementById('logtextarea');
	var text = logtextarea.value;
	logtextarea.value = text + message;
};

//エージェントイベントのサブスクライブ設定
connect.agent(function(agent) {
	writeLog('エージェントイベントのサブスクライブ(connect.agent)!\n');
	writeLog('エージェントの基本情報の表示\n');

	//基本情報の表示
	var routingProfile = agent.getRoutingProfile();
	writeLog('routingProfile.name = ' + routingProfile.name + '\n');
	writeLog('routingProfile.queues = ' + JSON.stringify(routingProfile.queues) + '\n');
	writeLog('routingProfile.defaultOutboundQueue = ' + JSON.stringify(routingProfile.defaultOutboundQueue) + '\n');

	var name = agent.getName();
	writeLog('name = ' + name + '\n');
	
	var extension = agent.getExtension();
	writeLog('extension = ' + extension + '\n');


	//エージェントが受付可になったイベント
	agent.onRoutable(function(agent) {
		writeLog('エージェントが受付可になった(agent.onRoutable)!\n');
	});

	//エージェントが受付可ではなくなったイベント
	agent.onNotRoutable(function(agent) {
		writeLog('エージェントが受付可ではなくなった(agent.onNotRoutable)!\n');
	});

	//エージェントがオフラインになったイベント
	agent.onOffline(function(agent) {
		writeLog('エージェントがオフラインになった(agent.onOffline)!\n');
	});

	//エージェントがACWになったイベント
	agent.onAfterCallWork(function(agent) {
		writeLog('エージェントがACWになった(agent.onAfterCallWork)!\n');
	});
});


//コンタクトイベントのサブスクライブ設定
connect.contact(function(contact) {
	//有効なコネクションがあるかどうかチェック
	if (contact.getActiveInitialConnection() && contact.getActiveInitialConnection().getEndpoint()) {
		var conn = contact.getActiveInitialConnection();
		var phoneNumber = contact.getActiveInitialConnection().getEndpoint().phoneNumber;
	}

	writeLog('コンタクトイベントのサブスクライブ(connect.contact)!\n' );
	writeLog('contact.getActiveInitialConnection().getEndpoint().phoneNumber = ' + phoneNumber + '\n');
	writeLog('contact.getQueue().name = ' + contact.getQueue().name + '\n');
	writeLog('initialConn.getType() = ' + conn.getType() + '\n');


	//コンタクト情報がリフレッシュされたイベント
	contact.onRefresh(function(contact) {
		writeLog('コンタクト情報がリフレッシュされた(connect.onRefresh)!\n');

		//コンタクトのコネクションを確認する
		var conns = contact.getConnections();
		writeLog('コンタクトのコネクション = ' + JSON.stringify(conns) + '\n');
		
		//保留中かどうかチェックする
		var conn = contact.getActiveInitialConnection();
		if (conn.isOnHold()) {
			writeLog('保留中です!\n');
		}
	});

	//コールが着信したイベント
	contact.onIncoming(function(contact) {
		writeLog('コールが着信した(connect.onIncoming)!\n');
		writeLog('contactId =' + contact.getContactId() + '\n');
	});

	//コールに応答したイベント
	contact.onAccepted(function(contact) {
		writeLog('コールに応答した(connect.onAccepted)!\n');	
		writeLog('contactId =' + contact.getContactId() + '\n');
	});

	//コールが切断された(もしくは切断した)イベント
	contact.onEnded(function(contact) {
		writeLog('コールが切断された(もしくは切断した)(connect.onEnded)!\n');	
		writeLog('contactId =' + contact.getContactId() + '\n');			
	});	

	//コールが確立されたイベント
	contact.onConnected(function() {
		writeLog('コールが確立された(connect.onConnected)!\n');
		writeLog('contactId =' + contact.getContactId() + '\n');					
	});
});

動作確認

エージェントイベントのサブスクライブ、受付可以外のステータスに変更した場合


→ エージェントイベントが発生している
→ エージェントの基本情報を取得できている(名前、電話番号、ルーティングプロファイルなど)
→ エージェントのステータス変更イベントが発生している

オフラインのステータスに変更した場合


→ エージェントのステータス変更イベントが発生している

受付可のステータスに変更した場合


→ エージェントのステータス変更イベントが発生している

電話が着信した場合


→ コンタクトイベントが発生している
→ コンタクトに関する情報が取得できている(着信したキュー、発信者電話番号、コール種別(今回はインバウンド)、コネクション情報)
→ コンタクト情報が更新されたイベントが発生している

着信に応答し、通話が確立した場合


→ コールに応答したイベントが発生している
→ コールに応答し、確立したイベントが発生している
→ コンタクトに関する情報が取得できている(コネクション情報)
→ コンタクト情報が更新されたイベントが発生している

通話を保留した場合


→ コンタクトに関する情報が取得できている(コネクション情報)
→ コンタクト情報が更新されたイベントが発生している
→ 現在のコネクションが保留中の状態かどうか判別できている

通話の保留を解除した場合


→ コンタクトに関する情報が取得できている(コネクション情報)
→ コンタクト情報が更新されたイベントが発生している
→ 現在のコネクションが保留中の状態かどうか判別できている

通話を切断し、ACWのステータスになった場合


→ コールが切断されたイベントが発生している
→ コンタクトに関する情報が取得できている(コネクション情報)
→ コンタクト情報が更新されたイベントが発生している
→ エージェントのステータス変更イベントが発生している

おわりに

全てのAPIを確認できているわけではないですが、Amazon Connect StreamsライブラリのおかげでAmazon ConnectのCTIサービスとの連携がしやすくなっていると思いました。

補足

電話が着信した際にcontact.onIncomingイベントを取得できる仕様のはずなのですが、実際には取得できませんでした。現時点では原因不明です。

その後の調査で、コールバック時の着信の際に発生するイベントであることが分かりました。下記のブログの「補足:着信時のイベントを取得する方法について」欄を参照ください。

Amazon Connectのコンタクトフロー上で、問い合わせ属性の設定ブロックで設定した値を画面上に表示する方法