pusher を使ったリアルタイムチャットを断念しました。
この2ヶ月間、このテーマに取り組んできましたがついに諦めました。
取り組んできたと言っても、ほとんど chatGPT に丸投げして chatGPT ができないことを延々と提示してきたので、 この2ヶ月間で 300 時間ほどかけたものの、自分の頭を使うことはほとんどありませんでした。
でも、chatGPT は所詮その程度のものです。 フリーの 3.5 なので当然かもしれません。
単純なリアルタイムチャットであれば、ララジャパンのサンプルを使えばそのまま実装できますが、テーマを設定すると全然できなくなります。
データベースへの記録とかメッセージ一覧を表示することはできても、リアルタイムのチャットにはどうしてもできませんでした。
引っかかったのは以下の部分です。
window.Echo.private('chat') .listen('MessageSent', (e) => { messages.value.push({ message: e.message.message, user: e.user }); });この部分に themeId を設定することができません。
現在、サーバー上に「部屋」を作成して、その中にテーマを作り、更にその中でチャットをしようとしているので、複雑さは半端ではありません。
「部屋」は複数存在し、何人かのユーザーに対して各部屋へのアクセス権を設定したりしなければならず、 私の実力ではリアルタイムチャットを導入するのは無理かと思います。
リアルタイムにはなりませんが、ブラウザをリロードするとリアルタイムに近い感じでチャットができます。
でもいちいちブラウザのリロードをするのはとても面倒です。
しかし livewire には polling というものがあって、これを使えばブラウザのリロードと同じようなことができます。 この polling は以前から存在を知っていたものの、何だか悔しくて導入してきませんでしたが、今の段階では polling を使うのがベストと思います。
導入方法は簡単で、wire:poll.2000ms と書くだけです。
<div class="border border-gray-400 p-2 bg-gray-200 rounded my-5 shadow-md" wire:poll.2000ms>この設定では 2 秒ごとにリロードされるようです。
チャットに参加する人数が多いとサーバーにかなりの負荷がかかるようですが、少人数では問題ないと思います。
chatGPT に頼りすぎず自分の頭できちんと考えて、ネット検索もしながら問題を解決すべしと悟りました。