13
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

ElixirAdvent Calendar 2023

Day 3

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

Last updated at Posted at 2023-12-03

この記事は、Elixir Advent Calendar 2023 シリーズ7の3日目です。


今年話題になったChatGPT。
ChatGPTクローンアプリをElixirで実装しようという動機がありました。

実装時にちょうどよい参考記事を見つけたので、数回に分けてマイペースに紹介&解説します。

概要

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

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

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

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でリリースされた機能のうちの1つです。
他にもたくさんあるので気になる人は@piacerexさんの下記記事をご覧ください。
2023年末のElixirが出来ること③Elixir本体/Phoenix/LiveView編(最新Elixirのキャッチアップや、アドカレのネタ探しに読んでください)

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

13
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?