保存して送信SendGridとの転写をチャット

36152 ワード

このチュートリアルでは、我々はSendGridを使用して電子メールでチャット転写のコピーを送信するチャットアプリケーションを構築します.彼らのクライアントの1つがあなたのサポートチームとチャットしたとき、自動的にあなたのセールスチームに知らせることができることを想像してください.このアプリは、直接チャットとSendGridを使用して販売員のメールアドレスに直接チャットのトランスクリプトを送信します.

このポストは、あなたを案内しますGit Repository Here . 始めましょう!

ストリームチャットは何ですか?


Build real-time chat in less time. Rapidly ship in-app messaging with our >highly reliable chat infrastructure. Drive in-app conversion, engagement, and >retention with the Stream Chat messaging platform API & SDKs.


要件

  • node.js
  • React
  • 無料のStream 試用口座
  • 無料のSendGrid 試用口座
  • の初歩的理解React Hooks and Express も役に立つでしょう.
  • このチュートリアルを読んでください。

  • チャット文章を収集するために、response useeffect ()を使う方法を学びましょう
  • ストリームとsendgridを使用してメールでチャット転写を送信する
  • フロントエンド/バックエンドストリームのチャットアプリを設定する
  • これらのトピックはエクスプレスJSを使用してカバーされ、反応するが、方法論は、ほとんどの言語やフレームワークに移植することができます.

    カバーしない


    このチュートリアルでは、チャット転写のコレクションと送信に焦点を当てます.このプロジェクトのGithub Repoは、ストリームチャットのための完全な機能登録フォームとフロントエンドが含まれていますが、すべての側面が深さでカバーされるわけではありません.反応登録フォームの詳細については、ストリームチャットクライアントの開始、チェックアウトthis post .

    アカウント設定


    ストリーム設定


    一度あなたの自由なストリームの試用アカウントを設定している場合は、あなたの新しいアプリを作成する必要がありますStream dashboard . 必ず「開発」モードを選択してください.

    APIキーをコピーし、生成された秘密をコピーします.env ファイルを一度に.

    デフォルトでは、ストリームはアプリケーションで認証チェックとパーミッションチェックを提供します.これらは生産アプリのための良い機能ですが、我々はこれらを無効にすることで、このアプリをシンプルに保つでしょう.あなたのストリームダッシュボードでは、あなたのアプリケーションを選択します.'チャット' Navbarドロップダウンをクリックし、'概要'を選択

    スクロールダウンして無効にするチェックを無効にします.

    sendgridセットアップ


    あなたからSendGrid setup guide , メールアドレスまたはドメインを確認する必要がありますから送信します.我々は、このアプリの個人的なメールアドレスを使用しますが、生産の適切なドメインアドレスを使用しないようにしてください.送信者の詳細を入力し、メールに登録されたアドレスに送信されたアカウントを確認します.

    インザバックSendGrid setup guide , '当社のWeb APIまたはSMTPリレーを使用して統合'を選択し、' Web API 'を選択します.


    選択node.js 統合言語として.

    あなたのアプリケーションの名前を作成し、APIキーを生成し、backend .env ファイル.

    アプリケーション設定


    . envセットアップ


    git repoを使っているなら、ファイルにはbackend フォルダタイトル.env.example . あなたのAPIキーと秘密をここに入力してください.env .
    //backend/.env
    NODE_ENV=development
    PORT=8080
    
    STREAM_API_KEY= your Stream API key here
    STREAM_API_SECRET= your Stream API secret here
    SENDGRID_API_KEY= your SendGrid API key here
    

    sendgridの設定


    sendgridを統合するには、いくつかの手順が必要ですbackend .

  • 次のパッケージをインストールします
      npm install --save @sendgrid/mail
    

  • index.js sendgridパッケージが必要です.
      const sgMail = require('@sendgrid/mail');
    

  • イン//backend/routes.index.js , 変更するto and from メールアドレス.The from アドレスはあなたが登録したメールアドレスでなければなりません.
    <--https://gist.github.com/isaidspaghetti/774ccdb8bfaff4642c926e3dc4fe26b1 -->
      //backend/routes.index.js
        const msg = {
          to: '[email protected]',
          from: '[email protected]',
          subject: 'Stream Chat: Your client started a Support Chat Session',
          html: `Hello, \n Your client, ${firstName} ${lastName} started a chat with the support team chat widget on ${createdAt}. \n
          Here is the transcript of the chat: \n ${transcript} END OF TRANSCRIPT \n You can reach your client at ${email}. \n This message was sent to you from Stream Chat`,
        };
    
  • 初期走行


    アプリはAに分割されますfrontend フォルダ作成stream-chat-reactbackend フォルダ作成npm express-generator .
    あなたのマシン上でアプリケーションを起動するにはnpm install and npm run start 両方でfrontend and backend フォルダ.一度実行すると、移動http://localhost:3000 見るfrontend . 今、我々はどのようにこのアプリの作品に飛び込むことができます.

    登録



    利用者の訪問http://localhost:3000 , 彼らは、彼らの資格情報を入力しますbackend /customer-login ルート
    前半register 関数はフォームデータを送信します.後半はbackend チャットアプリケーションを初期化し、正しいチャネルに参加する.もう一度、この部分のより多くの深さのために、チェックアウトthis post .
    //frontend/src/App.js:14
    const register = async (e) => {
      try {
        e.preventDefault();
    
        const response = await fetch('http://localhost:8080/customer-login', {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            firstName,
            lastName,
            email,
          }),
        });
    
        const { customerId, customerToken, channelId, streamApiKey } = await response.json();
        const chatClient = new StreamChat(streamApiKey);
    
        await chatClient.setUser(
          {
            id: customerId,
            name: firstName,
          },
          customerToken,
        );
    
        const channel = chatClient.channel('messaging', channelId);
    
        setChatClient(chatClient);
        setChannel(channel);
    
      } catch (e) {
        console.error(e);
      }
    };
    
    The customer-login エンドポイントbackend API , ユーザー入力をきれいにして、我々のストリームチャットクライアントをセットアップして、新しいストリームチャットチャンネルをつくって、我々のfrontend .
    //backend/routes/index.js:27
    router.post('/customer-login', async (req, res) => {
      try {
        const firstName = req.body.firstName.replace(/\s/g, '_');
        const lastName = req.body.lastName.replace(/\s/g, '_');
    
        const client = new StreamChat(streamApiKey, streamApiSecret);
    
        [customer, admin] = createUsers(firstName, lastName);
    
        await client.upsertUsers([
          customer,
          admin
        ]);
    
        const channel = client.channel('messaging', uuidv4(), {
          members: [customer.id, admin.id],
        });
    
        const customerToken = client.createToken(customer.id);
    
        res.status(200).json({
          customerId: customer.id,
          customerToken,
          channelId: channel.id,
          streamApiKey,
        });
    
      } catch (err) {
        console.error(err);
        res.status(500).json({ error: err.message });
      }
    });
    
    The createUsers() 上記のスニペットでのメソッドは、単に我々のチャンネルで登録される顧客と管理者オブジェクトをつくります.ユニークな識別子を使用しましたuuidv4 2番目の引数としてclient.channel() , チャンネルIDがパラメタとして含まれないならば、Streamはチャット参加者名に基づいて1をつくります.UUIDを使用することによって、我々は2つの' John Smiths 'が同じチャットで終わると確信することができます.
    //backend/routes/index.js:11
    function createUsers(firstName, lastName) {
      const customer = {
        id: `${firstName}-${lastName}`.toLowerCase(),
        name: firstName,
        role: 'user',
      };
    
      const admin = {
        id: 'admin-id',
        name: 'Support Admin',
        role: 'admin'
      };
    
      return [customer, admin];
    }
    
    物事をシンプルに保つために、このアプリはcustomer 我々のチャットアプリの経験.上記のチャンネル作成は、ジェネリックSupport Admin チャットのもう一方の端に加わるでしょう.

    チャットウィンドウ


    ユーザーが登録されたらchatClient and channel 構成を取得すると、次のブールのオンライン52が可能になりますCustomerChat 読み込むコンポーネント
    //frontend/src/App.js:52
     if (chatClient && channel) {
        return (
          <CustomerChat
            channel={channel}
            chatClient={chatClient}
            firstName={firstName}
            lastName={lastName}
            email={email}
          />);
      }
    
    必要な小道具を送るCustomerChat を返します.jsx :
    //frontend/src/CustomerChat.js:39
    return (
            <div className="App">
                <Chat client={chatClient} theme={'messaging light'}>
                    <Channel channel={channel}>
                        <Window>
                            <ChannelHeader />
                            <MessageList />
                            <MessageInput />
                        </Window>
                        <Thread />
                    </Channel>
                </Chat>
            </div>
        );
    }
    
    これはストリームのエレガントでカスタマイズ可能なチャットウィンドウを設定するために必要なすべてです.チェックアウトStream's free UX kits いくつかのポーランド語を追加します.

    バックエンドにチャット転写を送る


    ではなく、ユーザーがボタンを使用してチャット転写を送信するように促す、このアプリは自動的にPOST ユーザーがブラウザウィンドウまたはタブを閉じるときに、バックエンドへの転写子.これはuseEffect() フックの反応.ここに...
    //frontend/src/CustomerChat.js:6
    useEffect(() => {
        const handleUnload = (event) => {
            event.preventDefault();
            fetch('http://localhost:8080/email-transcript', {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    messages: channel.state.messages,
                    firstName: firstName,
                    lastName: lastName,
                    email: email,
                    createdAt: channel.data.config.created_at
                })
            });
            event.returnValue = '';
        };
    
        window.addEventListener('beforeunload', handleUnload);
    
        return () => {
            window.removeEventListener('beforeunload', handleUnload);
        };
    }, [channel, firstName, lastName, email]
    );
    
    The useEffect() 上記のイベントリスナーを開始するbeforeunload (ユーザはブラウザウィンドウを閉じる)、handleUnload イベントが最終的に引き起こされるとき、機能します.handleUnload を開始するPOSTbackend . コピーのために必要なすべてのデータが便利にストリームにバンドルされてchannel オブジェクト.このオブジェクトは、チャンネルで送られるすべてのメッセージを含む有用な情報の荷を含みます.

    useeffect ()の複雑性

  • 我々は、2008年のトリガーを制限しましたuseEffect() 2番目の引数配列を含めることで:[channel, firstName, lastName, email] . useEffect() その配列の要素のうちの1つがその状態を変えたならば、引き起こされるだけです.
  • The removeEventListener() 関数は任意のクリーンアップ関数です.この関数は、コンポーネントがアンマウントされると、この関数を実行します.
  • 注意event.returnValue = ''; Chromeの要件beforeunload イベントリスナーが正常に動作します.
  • このメソッドを使用する警告の1つは、閉じたポップアップです.

    ユーザーが1時間のサポートチャットでは、これは有用な機能ですあなたがあなたの生産で異なる何かを探しているならば、WebSocketsは異なる経験を提供しますが、このポストの範囲の外にいます.

    フロントエンドのコピーを受信する


    次のスニペットは、frontend :
    //backend/routes/index.js:59
    router.post('/email-transcript', async (req, res) => {
      const messages = req.body.messages;
      const { firstName, lastName, email, createdAt } = req.body;
    
      let transcript = messages.map((message) => {
        return (`<li>FROM: ${message.user.id}</li>\n<li>MESSAGE: ${message.text}</li>\n`);
      });
    
      sgMail.setApiKey(sendgridApiKey);
    
      const msg = {
        to: '[email protected]',
        from: '[email protected]',
        subject: 'Stream Chat: Your client started a Support Chat Session',
        html: `Hello, \n Your client, ${firstName} ${lastName} started a chat with the support team chat widget on ${createdAt}. \n
        Here is the transcript of the chat: \n ${transcript} END OF TRANSCRIPT \n You can reach your client at ${email}. \n This message was sent to you from Stream Chat`,
      };
    
      try {
        sgMail.send(msg);
        res.status(200).end;
      }
      catch{ (err) => console.log(err.response.body); }
    
    });
    
    これを少し分けましょう.第一にreq.body 破壊されて、私たちのトランスクリプトに必要な情報を抽出します.次に、転写物は単純に組み立てられるhtml 文字列mapping() 各メッセージ以上.結果は次のようになります.

    The message streamによって提供されるオブジェクトには、多数のデータが含まれます.The Stream Documentation あなたの電子メールの転写物に含めることができるすべてのオプションを示します.
    次に、sendgridのAPIキーを送信します.sgMail.setApiKey(sendgridApiKey) とビルドmsg オブジェクト.ちょうどあなたがチェックすることができます任意のメールアドレスを使用してto 今のフィールド.The from フィールドはあなたが登録したメールアドレスと一致しなければなりません.繰り返しますが、カスタマイズしてsubject and html 必要に応じてフィールド.
    最後に、私たちはsgMail.send(email) インtry catch ブロック.これはsendgridからの応答でエラーが許容されることがあるためです.数秒で、あなたは受信トレイに電子メールを受け取ります!Voila!

    閉鎖思考


    おめでとう、今すぐあなたのチャットの転写をメールで送信することができます!ほんの少しの反応知識で、ストリームとsendgrid APIは、我々のために重い持ち上げをします.いくつかの他のポストのparouseStream Blog その機能の詳細を参照してください!