保存して送信SendGridとの転写をチャット
36152 ワード
このチュートリアルでは、我々はSendGridを使用して電子メールでチャット転写のコピーを送信するチャットアプリケーションを構築します.彼らのクライアントの1つがあなたのサポートチームとチャットしたとき、自動的にあなたのセールスチームに知らせることができることを想像してください.このアプリは、直接チャットとSendGridを使用して販売員のメールアドレスに直接チャットのトランスクリプトを送信します.
このポストは、あなたを案内しますGit Repository Here . 始めましょう!
node.js React 無料のStream 試用口座 無料のSendGrid 試用口座 の初歩的理解React Hooks and Express も役に立つでしょう. チャット文章を収集するために、response useeffect ()を使う方法を学びましょう ストリームとsendgridを使用してメールでチャット転写を送信する フロントエンド/バックエンドストリームのチャットアプリを設定する これらのトピックはエクスプレスJSを使用してカバーされ、反応するが、方法論は、ほとんどの言語やフレームワークに移植することができます.
このチュートリアルでは、チャット転写のコレクションと送信に焦点を当てます.このプロジェクトのGithub Repoは、ストリームチャットのための完全な機能登録フォームとフロントエンドが含まれていますが、すべての側面が深さでカバーされるわけではありません.反応登録フォームの詳細については、ストリームチャットクライアントの開始、チェックアウトthis post .
一度あなたの自由なストリームの試用アカウントを設定している場合は、あなたの新しいアプリを作成する必要がありますStream dashboard . 必ず「開発」モードを選択してください.
APIキーをコピーし、生成された秘密をコピーします
デフォルトでは、ストリームはアプリケーションで認証チェックとパーミッションチェックを提供します.これらは生産アプリのための良い機能ですが、我々はこれらを無効にすることで、このアプリをシンプルに保つでしょう.あなたのストリームダッシュボードでは、あなたのアプリケーションを選択します.'チャット' Navbarドロップダウンをクリックし、'概要'を選択
スクロールダウンして無効にするチェックを無効にします.
あなたからSendGrid setup guide , メールアドレスまたはドメインを確認する必要がありますから送信します.我々は、このアプリの個人的なメールアドレスを使用しますが、生産の適切なドメインアドレスを使用しないようにしてください.送信者の詳細を入力し、メールに登録されたアドレスに送信されたアカウントを確認します.
インザバックSendGrid setup guide , '当社のWeb APIまたはSMTPリレーを使用して統合'を選択し、' Web API 'を選択します.
選択
あなたのアプリケーションの名前を作成し、APIキーを生成し、
git repoを使っているなら、ファイルには
sendgridを統合するには、いくつかの手順が必要です
次のパッケージをインストールします
に
イン
<--https://gist.github.com/isaidspaghetti/774ccdb8bfaff4642c926e3dc4fe26b1 -->
アプリはAに分割されます
あなたのマシン上でアプリケーションを起動するには
利用者の訪問
前半
ユーザーが登録されたら
ではなく、ユーザーがボタンを使用してチャット転写を送信するように促す、このアプリは自動的に
我々は、2008年のトリガーを制限しました The 注意 このメソッドを使用する警告の1つは、閉じたポップアップです.
ユーザーが1時間のサポートチャットでは、これは有用な機能ですあなたがあなたの生産で異なる何かを探しているならば、WebSocketsは異なる経験を提供しますが、このポストの範囲の外にいます.
次のスニペットは、
The
次に、sendgridのAPIキーを送信します.
最後に、私たちは
おめでとう、今すぐあなたのチャットの転写をメールで送信することができます!ほんの少しの反応知識で、ストリームとsendgrid APIは、我々のために重い持ち上げをします.いくつかの他のポストのparouseStream Blog その機能の詳細を参照してください!
このポストは、あなたを案内します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.
要件
このチュートリアルを読んでください。
カバーしない
このチュートリアルでは、チャット転写のコレクションと送信に焦点を当てます.このプロジェクトの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-react
とbackend
フォルダ作成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
を開始するPOST
にbackend
. コピーのために必要なすべてのデータが便利にストリームにバンドルされてchannel
オブジェクト.このオブジェクトは、チャンネルで送られるすべてのメッセージを含む有用な情報の荷を含みます.useeffect ()の複雑性
useEffect()
2番目の引数配列を含めることで:[channel, firstName, lastName, email]
. useEffect()
その配列の要素のうちの1つがその状態を変えたならば、引き起こされるだけです.removeEventListener()
関数は任意のクリーンアップ関数です.この関数は、コンポーネントがアンマウントされると、この関数を実行します.event.returnValue = '';
Chromeの要件beforeunload
イベントリスナーが正常に動作します.ユーザーが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 その機能の詳細を参照してください!
Reference
この問題について(保存して送信SendGridとの転写をチャット), 我々は、より多くの情報をここで見つけました https://dev.to/isaidspaghetti/save-and-send-chat-transcripts-with-sendgrid-14leテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol