【開発日誌 #5】オンライン展示会開発 ーリアルタイムチャット機能開発編ー

今回は、インフラ構築編の続きの記事になります。

改めてになりますが、依頼内容から振り返ります。

▷依頼内容

コロナ禍において、例年開催していた各会場での展示会が開催できなくなってしまった。

• 同様の展示会をオンラインで実現したい。
• リアルで開催される展示会同様に、来場者とその場で商談ができるシステムを構築したい。

▷課題

数万ユーザが同時にリアルタイムで商談ができることを最大のポイントにしたシステムのため、まず大前提として急激なトラフィック上昇に強く、かつチャットのリアルタイム性の確保・担保が必要とされました。

特に、チャットにおいてはリクエスト・処理をいかに軽量化するか？がアプリケーション側での大きな課題となりました。

【チャット機能の説明】

リアル展示会をオンラインでできるだけ再現できるようにしているため、基本的なチャット構成は来場者１名と出展社１社（のうち担当者は複数名）の間で行われます。

チャットのやりとりの目的は商談を行うことなので、

• 営業資料の添付ができる
• 名刺交換ができる　　　　　　　

上記2つの機能が必須になりました。

▶︎主な機能

● テキストベースのチャットの送信

テキストベースでチャットでのやりとりが行えます。テキスト内にURLが含まれている場合は、ハイパーリンクありの状態で送信が可能。

● 添付ファイルの送信

画像ファイル、PDFファイルなどの送信が可能です。商談を目的としたプラットフォームなため、出展社が営業用の添付ファイルなどを送信できる必要がある。

● 送信したチャットの編集・削除

送信をしたチャットに誤りがあった場合に編集・削除ができます。

● 名刺交換

オンライン上で名刺を交換できます。来場者からも出展社からも名刺交換のリクエストが可能です。リクエストが承諾された場合のみ名刺交換は成立したとみなされます。

ー名刺交換した情報は名刺交換一覧ページで後日CSVとしてダウンロードできますー

● チャット部屋の検索

出展者様によっては来場者とのチャット部屋が３００部屋まで達することがあります。該当するチャット部屋がすぐに見つかるように、社名・氏名が検索できる検索バーが必要になります。

● チャット部屋の非表示

アクティブなチャット部屋だけを左のチャット部屋一覧に表示させたい場合は、商談が終わった来場者とのチャットを非表示にできる機能があります。

● チャットの「未対応」ステータス

出展社側の機能として来場者からチャットがきている場合、社内の誰かが連絡済みかどうかすぐにわかる必要性があります。出展社の担当者が連絡をしていない状態は「未対応」のアイコンが表示されます。

● チャットの「未読」ステータス

チャット部屋で読んでいないチャットがある場合は、チャット部屋の右上に「未読」ステータスを示す丸が表示されます。未読チャットを全て既読した際に丸が消えるようになっています。

※実際のもののため、モザイクをかけています。

チャット機能の仕組み（AppSyncの概要）

💡 AppSyncは魔剤

チャットを構築する上で重要な点は、リアルタイムであることです。

メッセージを送信して相手に届くまでのタイムラグは許されません。

そこで採用したのがAppSync

AppSyncとはGraphQL APIである。

数百万のクライアントに対し Websockets を介して、データの更新をリアルタイムでプッシュできるためリアルタイムなチャットが実装可能となりました。

最後に、、、

【チャット開発を進めていく上での課題点をまとめてみました】

■Roomの数だけサブスクリプションを登録する仕様にしていたがサブスクリプション数の上限が100だったためエラーになっていた（MaxSubscriptionsReachedError)

⇒修正して、最終的にはサブスクリプション数が３つになった

■リゾルバの実行数が1万の制限に引っかかっていたため修正

■部屋数が数百になると、チャット一覧の表示が遅くなっていた。

（Vueのcomputed propetyが原因で再描画が大量に行われていたのが原因）

⇒修正したら表示スピードが改善された。

■チャットのメッセージのやり取りはAppSyncを使っているが、メンバーの会社名や氏名はRDBからajaxで取得していて、そこが原因で遅くなっていた。

⇒できるだけリクエスト数を減らすよう修正した

以上が、リアルタイムチャット機能開発編の概要でした。

最後まで読んでいただきありがとうございました！