特定の会員のデスクトップにお知らせ
前回の「特定の会員にリアルタイムでお知らせ」の記事は、ブラウザー内で表示するお知らせの話でした。つまり、ブラウザーを開いていないとお知らせは伝わりません。今回はブラウザーを開いてなくてもデスクトップ上でユーザーにお知らせします。
OpenAIのレスをHTML表示
前回で作成したOpenAIチャットのデモはいろいろと改善点が盛りだくさんです。その１つは、OpenAIからのレスはテキストなのですがMarkdownの形式で来ます。今回はこの表示をHTMLに変換します。
OpenAIとチャット
OpenAIとのチャットを作成します。ChatGPTのように、ログインした会員がメッセージ（質問）を送信したら、Open AIが答えるというものです。メッセージはOpen AIのAPIを使用して送信しますが、AIのレスは時間がかかる（長いときは６０秒以上）ので、この部分を非同期の対応とします。非同期の対応にはいくつか方法がありますが、ここではシンプルにartisanのコマンドをバックグラウンドのプロセスとして実行します。そして、前回のNotificationを使って答えが来たらWebscoketを通して表示とします。
特定の会員にリアルタイムでお知らせ
LaravelのNotificationはEメールやSMSなど多用なチャンネルへの情報発信に便利なものですが、その１つのチャンネルとしてbroadcastがあります。今回は、それを使用してチャットと同様にリアルタイムで情報をユーザーに発信します。
会員チャット 現在参加している会員リスト
会員チャットデモに機能を追加します。今度は違う機能で、現在参加している会員リストをリアルタイムで表示します。会員がログインしたらその会員名が追加され、会員がログアウトしたら削除されます。これもグループチャットではよくある機能です。
会員チャット 〇〇さんがタイプしています…修正あり！
会員チャットデモに機能を追加します。自分以外の誰かがタイプし始めたら、それをリアルタイムで知らせる機能です。チャットなら必ずある機能です。※9/23日にコード修正変更あります！！
Pusherを使ってリアルタイムの会員チャットを作成
WebSocketを使用したリアルタイムのアプリケーションを作りたいのだけれど、WebSocketのサーバーの設定や管理は面倒、という方にお勧めが、Pusherのサービスです。無料プランで、１日200Kまでのメッセージ、100人までの同時接続が可能という寛大さ。ちょっとした小さいサイトなら無料プランで十分かもしれません。今回はそのサービスの紹介とともに、会員チャットをLaravel 10xとVue 3で作成します。
SPAの開発を楽しくさせるInertia：Laravel Breeze + Inertia + Vue3 + Bootstrap5 + 日本語訳
再びSPA（シングルページアプリケーション）への挑戦です！ 右のTAGSで「SPA」をクリックしてもらえばわかりますが過去にいくつか私のキャパ内でSPAに挑戦しております。しかし適用した技術がLaravelとの関連がまったくなかったり、完全にjQueryを脱却できなかったりと、どうも私の中ではしっくりこない。でも今度は違います。Inertia（イナーシャ）を使うからです。
Vue.js：バックエンドのバリデーションを使う
最近、フロントエンドのフレームワークのVue.jsを勉強し始めました。またしても世間の流行から一歩遅れての開始ですが、比較的大きなプロジェクトを管理する私としては、ピッカピッカの流行りをすぐに採用とは行きません。長期的な管理を考えてLaravelのように本当にメージャーになるかを見極めてからです。幸い、Laravelのコミュニティでは、Vue.jsが盛んに利用され情報が多いので、よりメージャーなReactやAngularなどのフレームワークの存在を気にしつつもLaravelとの親近さでVue.jsの習得です。Vue.jsの1からの説明は他の人のブログに任せて、私の方はいきなり実用的なVue.jsを紹介していく予定です。まず今回は、Vue.jsをフォームの入力のバリデーションに使用するところを紹介します。