概要

本記事は、チャットアプリの機能要件とElixirでの実装方法を記載します。

チャットアプリに求める機能

テキストの送信
- FORMで十分
テキストを保持できるチャットルームの作成
チャットルームではデフォルトで最新10件を表示
- スクロールで過去のチャットを表示
テキスト送信後、AIによるテキスト生成＆その受信（API通信）
送信されたテキストはリアルタイムで更新
上記を１つのページ

Elixirによる実装方法

上記を実装する際に採用する方法は以下の方法が考えられます。
難易度の高い要素技術については後ほど解説します。

ただのFORM
- テキストの送信
- テキストを保持できるチャットルームの作成
Liveview Streams
- チャットルームではデフォルトで最新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でリリースされた機能のうちの１つです。
他にもたくさんあるので気になる人は@piacerexさんの下記記事をご覧ください。
「2023年末のElixirが出来ること③Elixir本体／Phoenix／LiveView編（最新Elixirのキャッチアップや、アドカレのネタ探しに読んでください）」

後日、本記事の実装編をお送りします。

Elixirのチャットアプリを実装解説〜①設計編〜

概要