LWCとプラットフォームイベントで実現するリアルタイムチャット

本記事ではプラットフォームイベントと LWC を使ったシンプルなチャットコンポーネントの作成例を紹介します。
このコンポーネントでは同じ Salesforce 組織にログイン中の二人が、チャット形式での会話を開始できます。メッセージの送受信以外に、チャットに参加中のユーザーの情報を編集したりチャットからの退出などが行えます。

ソースコード全体にはこちらからご確認いただけます。
SalesforceDevelopersJapan/lwc-emp-api-chat – https://github.com/SalesforceDevelopersJapan/lwc-emp-api-chat

コンポーネントの構成

以下の構成でコンポーネントを開発しました。

LWC

• empApiSample
  • Lightningビルダーで配置可能にする親コンポーネント。チャットのステート管理や、APIコールなどをひとまとめに行います。

• chatContent
  • チャット開始状態によって親コンポーネントが表示/非表示を決めます。また、チャットメッセージ表示はメイン機能で拡張する可能性があるため、別コンポーネントとして切り出しています。

• chatComment
  • 単一のメッセージを表示するのに使います。chatContent コンポーネント内で繰り返し利用されます。

Apex

• LwcPlatformEventChatController クラス
  • getUserData : ユーザー情報を取得
  • publish : プラットフォームイベント作成・送信

ワイヤーサービスで Apex からデータを取得

画面にコンポーネントが表示されたら、初めに現在のログインユーザーの名前とアイコン画像 URL を取得し表示する必要があります。LWC でこれを実現するにはワイヤーサービスという機能を使います。この機能を使うと、コンポーネントから Apex メソッド経由でデータを取得することができます。

LWC からワイヤーサービスを利用して Apex メソッドを呼び出すには AuraEnabled(cacheable=true) アノテーションを記述する必要があります。データ取得を目的とした Apex メソッドの場合、取得データをクライアント側でキャッシュする事を意味しており、ランタイムのパフォーマンスを改善する事を目的としています。取得データが古ければ、再度サーバーにアクセスして新しいデータを返します。
ワイヤーサービスについて更に詳しく知りたい方はこちらからご確認頂けます。

• 参考 : Lightning Web Components Dev Guide | ワイヤサービスについて
• 参考 : Lightning Web Components Dev Guide | Apex メソッドのコール

empApi でプラットフォームイベントを監視

Salesforce ではデータの変更をプラットフォームイベントという機能で通知したり、ストリーミング API でそれらを監視することができます。LWC でストリーミング API を扱うためのモジュールとして、empApi が提供されています。今回はチャットで入力したメッセージを Apex からプラットフォームイベントとして配信（Publish）します。また、他のユーザーが配信したメッセージを、受信（Subscribe）するために empApi を使います。

Emp API についてさらに詳しく知りたい方は コンポーネントライブラリ | Emp API[英語] からご確認下さい。

empApiは、Web WorkerもしくはShared Workerがサポートされているデスクトップブラウザでのみ利用できます。Web Workerについて詳しくはW3Cの仕様や、MDNドキュメントをご覧ください。

コンポーネントの表示場所とプロパティ設定

LWCでは、コンポーネントを表示するページや画面上の位置を限定でき、さらにそれぞれにプロパティで設定できる項目を出し分ける事ができます。これらの設定は LWC のコンフィグ設定ファイルで定義します。

チャットコンポーネントでは、Salesforceの以下の箇所に配置可能と定義します。

• ホームページ
• レコード詳細ページ
• アプリページ
• ユーティリティーバー

チャットでの会話が長くなるにつれて、コンポーネントの高さが延々と長くなるのを防ぐために、コンポーネントごとにコンポーネントの高さの最大値を設定します。しかし、ユーティリティーバーにコンポーネントを配置する場合は、アプリケーションマネージャーで高さを制御するため、コンポーネントでは高さを指定しません。JavaScript 側で以下のように配置するターゲットによって、CSS を出し分けることができます。

まとめ

LWC を使ったコンポーネント開発を、かい摘みながら解説してきました。
個人的にデモコンポーネントではありますが、LWCを使って実際にコンポーネントを１から開発したのはこれが初めてでした。
一部 LWC 特有の書き方を覚える点はありましたが、Web 標準に準拠しているためサンプルコードなどを読んだ時に処理の内容が理解がしやすかったです。開発の要素も少なくまとめられており、拡張の自由度も高いと感じます。async/awaitやモジュールインポートなどが使えて、Auraよりも見通しよくコードが書けるので気に入ってます。ローカルの実行環境のBeta版の提供など、新しい取り組みも多く、今後も楽しみです。

最後に

本記事は、Salesforce 社内のエンジニアによる寄稿です。本記事で紹介するソースコードは LWC 開発によって実現できる機能の可能性を示す事を目的としており、本番運用を目的としたものではありません。実際の設計、開発、品質の保証につきましては、要件と合わせてご判断頂きますようにお願いします。なお、LWC は オープンソース版と Salesforce Platform 版の2 種類がありますが、この記事では Salesforce Platform 上での LWC 開発を前提としています。