この記事は、Elixir Advent Calendar 2023 シリーズ7の3日目です。
今年話題になったChatGPT。
ChatGPTクローンアプリをElixirで実装しようという動機がありました。
実装時にちょうどよい参考記事を見つけたので、数回に分けてマイペースに紹介&解説します。
概要
本記事は、チャットアプリの機能要件とElixirでの実装方法を記載します。
チャットアプリに求める機能
- テキストの送信
- FORMで十分
- テキストを保持できるチャットルームの作成
- チャットルームではデフォルトで最新10件を表示
- スクロールで過去のチャットを表示
- テキスト送信後、AIによるテキスト生成&その受信(API通信)
- 送信されたテキストはリアルタイムで更新
- 上記を1つのページ
Elixirによる実装方法
上記を実装する際に採用する方法は以下の方法が考えられます。
難易度の高い要素技術については後ほど解説します。
- ただのFORM
- テキストの送信
- テキストを保持できるチャットルームの作成
- Liveview Streams
- チャットルームではデフォルトで最新10件を表示
- スクロールで過去のチャットを表示
- チャットルームではデフォルトで最新10件を表示
- Pub/Sub
- チャットルームでは自分以外もテキストを送信可
- 送信されたテキストはリアルタイムで更新
技術解説
Liveview Streams
Phonix Liveviewを使うことで動的なページ(SPA)をElixirだけで作ることができます。
その中でも量が多いデータ表示をするときには、Liveview Streamsを採用します。
これはPhoenix 1.7, Livewview 0.18.16以降で利用できます。
Liveview Streamsが来る2023年2月までは、ページ要素の追加/削除などを行う公式の方法はなかったようです。
参考記事
PubSub とは
Publish(発行)とSubscribe(登録/購読)を合わせた言葉です。
Pub/Subパターンとして知られています。
イベントを発行して、登録してる人にイベントを非同期で伝達します。
前述したLiveview Streamsもこのパターンに当てはまります。
この機能でやりたいことは、いわゆる通知システムです。
「チャンネルを登録して、ベルマークを押して通知が来るようにしてね!」ってやつです。
この仕組みを使って「チャットルームを開いている人に、他の人のチャットを通知」します。
おわりに
チャットアプリの要件とElixirによる実装方法を紹介しました。
本記事で伝えたLiveview Streamsは、Elixirでリリースされた機能のうちの1つです。
他にもたくさんあるので気になる人は@piacerexさんの下記記事をご覧ください。
「2023年末のElixirが出来ること③Elixir本体/Phoenix/LiveView編(最新Elixirのキャッチアップや、アドカレのネタ探しに読んでください)」
後日、本記事の実装編をお送りします。