Amazon-connect-streams を React FC / TypeScript で書く(イベント処理)

はじめに

タイトルのことを、最近の React / Function Conponents / TypeScript で書こうとして苦労したので備忘録

第２弾です。

今回は　amazon-connect-streams　にある、イベントの処理を追加します。

開発環境

1. Visual Studio Code
2. React 16.13
3. Create-React-App
4. AmazonConnect Streams

参照：https://github.com/amazon-connect/amazon-connect-streams

手順

前回構築した環境にイベントの処理を追加します。

マニュアルには下記のように記述がありますが、これを TypeScript で書きます。

前回構築ソースの useEffect 内に記述します。
イベントが処理されたら、コンソールにログを出力するよう記述します。

    connect.contact( (contact: connect.Contact) => {
      // onRefresh
      contact.onRefresh( function () {
        console.log("onRefresh");
      });
      // onIncoming
      contact.onIncoming( function () {
        console.log("onIncoming");
      });
      // onPending
      contact.onPending( function () {
        console.log("onPending");
      });
      // onConnecting
      contact.onConnecting( function () {
        console.log("onConnecting");
      });
      // onAccepted
      contact.onAccepted( function () {
        console.log("onAccepted");
      });
      // onMissed
      contact.onMissed( function () {
        console.log("onMissed");
      });
      // onEnded
      contact.onEnded( function () {
        console.log("onEnded");
      });
    });

続いて　Agent についても同様に記述します。

    connect.agent( (agent: connect.Agent) => {
      // onRefresh
      agent.onRefresh( function () {
        console.log("onRefresh");
      });
      // onStateChange
      agent.onStateChange( function () {
        console.log("onStateChange");
      });
      // onRoutable
      agent.onRoutable( function () {
        console.log("onRoutable");
      });
      // onNotRoutable
      agent.onNotRoutable( function () {
        console.log("onNotRoutable");
      });
      // onOffline
      agent.onOffline( function () {
        console.log("onOffline");
      });
      // onError
      agent.onError( function () {
        console.log("onError");
      });
      // onSoftphoneError
      agent.onSoftphoneError( function () {
        console.log("onSoftphoneError");
      });
      // onAfterCallWork
      agent.onAfterCallWork( function () {
        console.log("onAfterCallWork");
      });


    });

TypeScript なので、型を気にして記述しました。

解説

完成したコードを実行した結果が以下です。

電話を受信し、顧客側から切断しました。onEnded イベントやonRefresh イベントをキャッチしています。

最終的に完成したソースです。

App.tsx

import React, {useRef,useEffect} from 'react';
import logo from './logo.svg';
import './App.css';
import 'amazon-connect-streams';
import pkg from '../package.json';
import { Agent } from 'http';
import moment from "moment";

const style = {
  minWidth: 64,       // 数値は"64px"のように、pxとして扱われます
  lineHeight: "32px",
  borderRadius: 4,
  border: "none",
  padding: "0 16px",
  height: "500px",
  color: "#fff",
//  background: "#639"
};
declare var connect: any;

function App() {

//  let containerDiv = React.createRef<HTMLDivElement>();
  const El = useRef<HTMLDivElement>(null);
  useEffect( ()=>{
    connect.core.initCCP(El.current, {
      ccpUrl: 'https://xxx.awsapps.com/connect/ccp-v2/',
      loginPopup: true,               // optional, defaults to `true`
      region: "ap-northeast-1",         // REQUIRED for `CHAT`, optional otherwise
      softphone: {                    // optional
        allowFramedSoftphone: true,   // optional
        disableRingtone: false,       // optional    });
      }
    });

    connect.contact( (contact: connect.Contact) => {
      // onRefresh
      contact.onRefresh( function () {
        console.log("onRefresh");
      });
      // onIncoming
      contact.onIncoming( function () {
        console.log("onIncoming");
      });
      // onPending
      contact.onPending( function () {
        console.log("onPending");
      });
      // onConnecting
      contact.onConnecting( function () {
        console.log("onConnecting");
      });
      // onAccepted
      contact.onAccepted( function () {
        console.log("onAccepted");
      });
      // onMissed
      contact.onMissed( function () {
        console.log("onMissed");
      });
      // onEnded
      contact.onEnded( function () {
        console.log("onEnded");
      });

    });

    connect.agent( (agent: connect.Agent) => {
      // onRefresh
      agent.onRefresh( function () {
        console.log("onRefresh");
      });
      // onStateChange
      agent.onStateChange( function () {
        console.log("onStateChange");
      });
      // onRoutable
      agent.onRoutable( function () {
        console.log("onRoutable");
      });
      // onNotRoutable
      agent.onNotRoutable( function () {
        console.log("onNotRoutable");
      });
      // onOffline
      agent.onOffline( function () {
        console.log("onOffline");
      });
      // onError
      agent.onError( function () {
        console.log("onError");
      });
      // onSoftphoneError
      agent.onSoftphoneError( function () {
        console.log("onSoftphoneError");
      });
      // onAfterCallWork
      agent.onAfterCallWork( function () {
        console.log("onAfterCallWork");
      });


    });

    },);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
      <main>
        <div className="ccp">
          {/* ccp */}
          <div style={style} ref={El} />
        </div>
        <div className="content" />
      </main>
      <footer>
        <p className="version">version: {pkg.version}</p>
      </footer>
    </div>
);
}

export default App;

最後に

自分のための備忘録です。

次はカスタムのUIに挑戦してきたいと思います。