Pusher on ララジャパン

特定の会員のデスクトップにお知らせ

Tue, 24 Oct 2023 11:26:01 +0900

前回の「特定の会員にリアルタイムでお知らせ」の記事は、ブラウザー内で表示するお知らせの話でした。つまり、ブラウザーを開いていないとお知らせは伝わりません。今回はブラウザーを開いてなくてもデスクトップ上でユーザーにお知らせします。

欲しい機能

簡単なデモとして、tinkerで以下のように、登録しているユーザー（ここでは太郎さん）にHello!というメッセージをNotificationを使用して送信します。メッセージを日本語にしたいのですが、tinkerでは英語しか使えません。

tinker

> use App\Notifications\Toast;
> $user = User::first();
> $user->notify(new Toast('Hello!'));

WindowsあるいはMacのデスクトップ上で右下にお知らせがスライドして登場します。

お知らせをクリックすると、指定したサイトに飛ばすことも可能です。

ソースコード

今回の機能を追加したソースコードは、前回の会員チャットをもとにして違うgitブランチ（chat-notification-desktop）としました。

レポジトリはこちらですが、すでにデモのソースコードをインストールしているなら、以下でスイッチできます。

$ git fetch
$ git checkout chat-notification-desktop

を実行してブランチをゲットできます。

chat-notificationとの差分は以下です。前回のブラウザーでのお知らせのToastのコンポーネントが廃止となり、後に説明するお知らせ許可のダイアログのコンポーネントが追加されています。

$ git diff chat-notification --name-status
M       resources/js/chat.js
D       resources/js/components/ChatToast.vue
A       resources/js/components/ConfirmModal.vue
M       resources/views/chat.blade.php

前回と同様に以下のコマンドを実行すると、ブラウザでテストが可能です。

$ npm run build
$ php artisan serve

お知らせ受信の許可

先のデモのように、ユーザーにお知らせするにはユーザーのデスクトップにおいて、ユーザーがブラウザーとサイトに許可（通知権限）を与える必要があります。サイトにアクセスするたびに毎回許可を問う必要はないです。１回許可（あるいは拒否）すればその後はその選択を尊重します。

しかし、この通知許可はユーザーの操作での起動が必要（ブラウザにより異なる）となるので、こちらが作成したボタンやダイアログの表示で許可を問い、その後さらにブラウザの方でポップアックしたダイアログでさらに許可を問うというやや面倒な手順となっています。

その部分のコードを見てみましょう。全体はこちらで見れます。

まず、通知許可がすでに選択されているかどうかチェックします。

chat.js

...
createApp({
    setup () {
        const messages = ref([]);
        const modalVisible = ref(false);
...
        // 通知権限が既に決定されているかどうかを調べる
        if (Notification.permission === 'default') {
            modalVisible.value = true;
        }

Notificationはウェブの通知APIでたいていどのブラウザでも対応しています。このpermissionの値は、granted, denied, defaultの３つ文字列のどれかで、それぞれ、許可済み、拒否、未選択と意味です。未選択なら、以下のようなダイアログが表示されます。

このダイアログは、ConfirmDialogのコンポーネントでブレードでは以下のように使用されています。先ほどのmodalVisibleの値が更新されたゆえに、このダイアログが表示されます。

chat.blade.php

...
<confirm-modal
  :visible="modalVisible"
  v-on:confirmed="askPermission"
  question="お知らせを受け取りますか？">
</confirm-dialog>
...

このダイアログが表示されて、ユーザーが「はい」をクリックしたら、askPermissionの以下のコードが実行され、ダイアログを閉じて今度はブラウザの許可選択のポップアップを表示します。

chat.js

...
        // 通知権限許可のモーダルのダイアログで「はい」をクリックしたら、今度はブラウザの通知許可を表示
        function askPermission() {
            modalVisible.value = false;

            Notification.requestPermission().then((permission) => {
                console.log(permission);
            });
        }
...

こちらがそのポップアップです。

ここでユーザーが許可して初めて、こちらのプログラムからユーザーにデスクトップのお知らせを送信することが可能となります。

お知らせの受信

お知らせを受け取り通知を作成する部分は前回と同様にLaravel Echoのnotificationを使用します。しかし、今度はウェブの通知APIで受け取ったメッセージを含めて通知を作成します。

chat.js

....
       window.Echo.private('App.Models.User.' + window.userId)
            .notification((n) => {
                 // 通知権限が既に付与されているなら、通知を作成
                if (Notification.permission === 'granted') {
                    const notification = new Notification(
                        'ご連絡',
                        {
                            icon: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Laravel.svg/180px-Laravel.svg.png',
                            body: n.message
                        }
                    );
                    notification.onclick = () => {
                        window.open('https://larajapan.com');
                    }
                }
            });
...

OpenAIのレスをHTML表示

Sat, 14 Oct 2023 02:31:28 +0900

前回で作成したOpenAIチャットのデモはいろいろと改善点が盛りだくさんです。その１つは、OpenAIからのレスはテキストなのですがMarkdownの形式で来ます。今回はこの表示をHTMLに変換します。

OpenAIからのレス

OpenAIからのレスは以下のようなテキストできます。

 2023年10月4日以降の日本の祝日は以下の通りです：

- 体育の日（スポーツの日）：10月9日
- 文化の日：11月3日
- 勤労感謝の日：11月23日

12月から年末までの祭日はありません。

MarkdownのWikiを参照すると、上で使用されているハイフン（‐）は、順序無しリストのアイテム、HTMLでは

の使用ということになります。しかし、これを無視すると以下のような表示（前回）となります。無視しないでHTMLに変換して、のように表示したいです。

ソースコード
今回の機能を追加したソースコードは、前回のOpenAIチャットをもとにして違うgitブランチ（chat-openai-markdown）としました。レポジトリはこちらですが、すでにデモのソースコードをインストールしているなら、以下でスイッチできます。
```
$ git fetch
$ git checkout chat-openai-markdown
```
を実行してブランチをゲットできます。前回のブランチのchat-openaiとの差分は以下です。
```
$ git diff chat-openai --name-status
M       package-lock.json
M       package.json
M       resources/js/components/ChatMessages.vue
```
MarkdownのテキストからHTMLの変換のために、今回はmarkdown-itのパッケージが必要です。それゆえに以下の実行が必要です。
```
$ npm install
```
最後に、前回と同様に以下のコマンドを実行すると、ブラウザでテストが可能です。
```
$ npm run build
$ php artisan serve
```
markdown-itをChatMessages.vueに取り込む
差分で見たように、今回コードの変更はChatmessages.vueのみです。サーバー側ではなくフロントエンドでHTML変換です。以下のコードで変更の部分にコメントしました。非常に簡単です。
ChatMessages.vue
```js // 以下は変換後のスタイル設定
```
以下は、コードのMarkdownをHTML変換した例です。

<a href="markdown2.png"><img src="markdown2.png" alt="" width="932" height="458" class="alignnone size-full wp-image-8814" /></a>
```

OpenAIとチャット

Tue, 10 Oct 2023 00:22:02 +0900

OpenAIとのチャットを作成します。ChatGPTのように、ログインした会員がメッセージ（質問）を送信したら、Open AIが答えるというものです。メッセージはOpen AIのAPIを使用して送信しますが、AIのレスは時間がかかる（長いときは６０秒以上）ので、この部分を非同期の対応とします。非同期の対応にはいくつか方法がありますが、ここではシンプルにartisanのコマンドをバックグラウンドのプロセスとして実行します。そして、前回のNotificationを使って答えが来たらWebscoketを通して表示とします。

欲しい機能

デモとして簡単にするために、今までのログインした会員の間でのチャットとは違い、１対１のチャット、ここではログインした会員（太郎くんが私）が質問者で、花子さんがAIとなります。

Open AIでアカウントを登録

Open AIのAPIを使うのでAPIのキーがまず必要となりますが、Open AIのサイトでアカウントの登録が必要です。Pusherの登録と違い、ステップが多いので辛抱を。基本的にアカウント情報（メールアドレス、パスワード）を入力して、Eメールをもらう。Eメールの確認リンクから、今度は名前と生年月日を入れて、さらに電話番号を入れてスマホでテキストコードを受け取り、それを入力して登録完了です。

まず、以下のリンクに行きます。

https://openai.com

Loginをクリックすると、

Signupをクリックすると、

さらに、

パスワードの入力して完了すると、登録したメールアドレスに以下のようなメールが来ます。

メール確認のボタンをクリックすると、今度は、

名前と生年月日を入力すると（真ん中の組織名はオプションです）、

ここに電話番号を入力してボタンをクリックすると、あなたのスマホにショートメールでコードが送られます。それを正しく次の画面で入力するとやっと登録完了です。

APIのキーをゲット

次にAPIのキーの取得です。まず、以下へ行きます。 https://platform.openai.com/account/api-keys

そこで「Create new secret key」のボタンをクリックすると、以下のダイアログが表示されます。

そのダイアログで、キーのタイトルを入れて（オプションなので入れなくてもよい）、「Create secret key」のボタンを押すと、

キーが作成されます。この値が後のプログラムの設定で必要となります。「Done」のボタンを押したらもうキーの値が見ることができないので必ずどこかにコピペで記録を。

ソースコード

今回の機能を追加したソースコードは、前回の会員チャットをもとにして違うgitブランチ（chat-openai）としました。

レポジトリはこちらですが、すでにデモのソースコードをインストールしているなら、以下でスイッチできます。

$ git fetch
$ git checkout chat-openai

を実行してブランチをゲットできます。

masterとの差分は以下です。

$ git diff master --name-status
A       app/Console/Commands/OpenAICommand.php
D       app/Events/MessageSent.php
M       app/Http/Controllers/ChatsController.php
A       app/Notifications/OpenAINotification.php
M       composer.json
M       composer.lock
A       config/openai.php
M       resources/js/chat.js
M       resources/views/layouts/app.blade.php
M       routes/channels.php

会員間のメッセージのやりとりはないので、MessageSentのイベントは削除しています。また、以下のopenaiのphpのライブラリを使用するので、composer.jsonが更新されています。 https://github.com/openai-php/client

それゆえに、以下の実行が必要です。

$ composer install

そして、Open AIの設定のために、.envの編集も必要です。

.env

...
OPENAI_API_KEY=
OPENAI_REQUEST_TIMEOUT=60
OPENAI_USER_ID=2
OPENAI_MODEL=gpt-4

OPENAI_API_KEYには上で取得したキーを入れてください。OPENAI_USER_IDは花子さんのusers.idです。OPEN_MODELは使用するOpen AIのモデルです。最新が、gpt-4ですがコストを考えるなら、gpt-3.5-turboをお勧めします。

最後に、前回と同様に以下のコマンドを実行すると、ブラウザでテストが可能です。

$ npm run build
$ php artisan serve

必ずここを読む

Open AIのアカウントの作成の際に、無料で５ドル分の３ヶ月有効なAPIの使用が可能となります（この記事を書いた時点ですがすでにアカウントを持っていた故に確認できず）。５ドルでも結構なテストはできます。しかし、コストは使用するモデル（gpt-3, gtp-4など）や送信と受信する文字数により変わります。実際は使用される言語のトークン数なので、事前にいくらとなるかの計算は簡単にできません。

使用したコストは以下でチェックできます。 https://platform.openai.com/account/usage

今回のデモは最新の質問だけをOpen AIに尋ねるという形式にしているので、ChatGPTのような複数のOpen AIとの対話とはなりません（以下のような）。APIではChatGPTのようにセッションを保つ機能がないのです。その代わりにこちらのプログラムで過去のすべての対話（メッセージ）とともに新たな質問（メッセージ）をAPIに送るということをする必要があります。そのコードもコメントしてOpenAICommand.phpのコードに入れてありますので、試すことも可能です。しかし、メッセージを作成するごとにトークン数が増えていくのでコストに注意をしてください。

特定の会員にリアルタイムでお知らせ

Wed, 04 Oct 2023 23:08:18 +0900

LaravelのNotificationはEメールやSMSなど多用なチャンネルへの情報発信に便利なものですが、その１つのチャンネルとしてbroadcastがあります。今回は、それを使用してチャットと同様にリアルタイムで情報をユーザーに発信します。

欲しい機能

簡単なデモとして、tinkerで以下のように、登録しているユーザー（ここでは太郎さん）にHello!というメッセージをNotificationを使用して送信します。

tinker

> use App\Notifications\Toast;
> $user = User::first();
> $user->notify(new Toast('Hello!'));

太郎さんがログインしてチャット画面にいるとして、

のように画面の右下隅にBootstrap５のToastがポップアップして情報を伝えます。

ソースコード

今回の機能を追加したソースコードは、前回の会員チャットをもとにして違うgitブランチ（chat-notification）としました。

レポジトリはこちらですが、すでにデモのソースコードをインストールしているなら、以下でスイッチできます。

$ git fetch
$ git checkout chat-notification

を実行してブランチをゲットできます。

masterとの差分は以下です。

$ git diff master --name-status
A       app/Notifications/Toast.php
M       resources/js/bootstrap.js
M       resources/js/chat.js
A       resources/js/components/ChatToast.vue
M       resources/views/chat.blade.php
M       resources/views/layouts/app.blade.php
M       routes/channels.php

前回と同様に以下のコマンドを実行すると、ブラウザでテストが可能です。

$ npm run build
$ php artisan serve

送信側

特定のユーザーにNotificationを使用してEメールの送信の仕方は、過去にこちらで説明しました。

Websocketを使用して送信するには、以下のようにNotificationの定義においてbroadcastを指定します。

Toast.php

namespace App\Notifications;

use Illuminate\Bus\Queueable;
use Illuminate\Notifications\Notification;
use Illuminate\Notifications\Messages\BroadcastMessage;

class Toast extends Notification
{
...
    /**
     * Get the notification's delivery channels.
     *
     * @return array<int, string>
     */
    public function via(object $notifiable): array
    {
        return ['broadcast'];
    }

    /**
     * Get the broadcastable representation of the notification.
     *
     * @param  mixed  $notifiable
     * @return BroadcastMessage
     */
    public function toBroadcast($notifiable)
    {
        return new BroadcastMessage([
            'name'    => $notifiable->name,
            'message' => $this->message,
        ]);
    }
...

そして送り先のユーザーのインスタンスのモデルでは、以下のようにNotifiableのトレイトがあることが必要です。

namespace App\Models;

// use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Sanctum\HasApiTokens;

class User extends Authenticatable
{
    use HasApiTokens, HasFactory, Notifiable;
...

最終的に以下のようなコードで送信します。

use App\Notifications\Toast;
$user = User::first();
$user->notify(new Toast('Hello!'));

ToastのNotificationはイベントとしてPusher側で受け取りクライアントに流します。以下は、その直後のPusherのDebug Consoleでの画面です。Pusher側では、チャンネル名は private-App.Models.User.1となっていて、イベントは、Illuminate\Notifications\Events\BroadcastNotificationCreatedとLaravelのイベントとなっていますね。

クライアント

クライアント側では、チャット同様にPusherからの情報を受け取るためのコードが必要となりますが、チャットのlistenではなく、notificationとなります。

chat.js

...
createApp({
    setup () {
        const messages = ref([]);
        const toast = ref({});

        fetchMessages();

        window.Echo.private('chat')
            .listen('MessageSent', (e) => {
                messages.value.push({
                    message: e.message.message,
                    user: e.user
                });
            });

        window.Echo.private('App.Models.User.' + window.userId)
            .notification((notification) => {
                toast.value = notification;
            });
...

しかし、特定した以外のユーザーのサーバーからの情報が流れては困るので、チャット同様にこのためのプライベートチャンネル購読の認証が必要となります。プライベートチャンネル名は、App.Models.User.ユーザーID と特定のユーザーのためなユニークなチャンネル名となります。

クライアントにおいてそのユーザーのIDをサーバーから取得するために、以下のようなレイアウトのテンプレートに工夫が必要となります。

app.blade.php

...
   @auth
        <script>
            window.userId = {{ auth()->user()->id }};
        </script>
    @endauth
</body>
</html>

そして認証時には、以前にここで説明したように、サーバー側での認証となります。

channels.php

use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Broadcast;

/*
|--------------------------------------------------------------------------
| Broadcast Channels
|--------------------------------------------------------------------------
|
| Here you may register all of the event broadcasting channels that your
| application supports. The given channel authorization callbacks are
| used to check if an authenticated user can listen to the channel.
|
*/
// Notificationのプライベートチャンネルの認証
Broadcast::channel('App.Models.User.{id}', function ($user, $id) {
    return (int) $user->id === (int) $id;
});

// チャットのプライベートチャンネルの認証
Broadcast::channel('chat', function ($user) {
    return Auth::check();
});

複数のユーザーにnotify

Notificationは、以下のように複数のユーザーに一括しての情報送信も可能です。

$users = User::all();
Notification::send($users, new Toast('Hi!'));

しかし、以下のPusherのDebug Consoleで見られるようにユーザーの人数分だけウェブサーバーからPusherサーバーにイベント情報が流れます。それぞれで情報が異なる（今回の例では名前の情報が異なる）なら別ですが、まったく同じ情報を送信するなら効率的ではありません。そのようなときはチャットと同様にログインした会員すべてに対してのイベントとして送信した方がよいです。

会員チャット　現在参加している会員リスト

Fri, 22 Sep 2023 06:58:32 +0900

会員チャットデモに機能を追加します。今度は違う機能で、現在参加している会員リストをリアルタイムで表示します。会員がログインしたらその会員名が追加され、会員がログアウトしたら削除されます。これもグループチャットではよくある機能です。

欲しい機能

私が太郎さんとしてログインすると、上の右の場所に、現在チャットに参加している会員名をダイナミックでリストします。すでに花子さんがチャット画面を閲覧しています。

ここで、花子さんがログアウトすると上のリストから自動的に削除されます。今回は、この機能をPusherのプレゼンスチャンネル（後に説明）を使用して作成します。

ソースコード

今回の機能を追加したソースコードは、前回の会員チャットをもとにして違うgitブランチ（chat-presence）としました。

レポジトリはこちらですが、すでにデモのソースコードをインストールしているなら、以下でスイッチできます。

$ git fetch
$ git checkout chat-presence

を実行してブランチをゲットできます。

masterとの差分は以下の４つのファイルのみです。

$ git diff master --name-status
M       app/Events/MessageSent.php
M       resources/js/chat.js
M       resources/views/chat.blade.php
M       routes/channels.php

前回と同様に以下のコマンドを実行すると、ブラウザでテストが可能です。

$ npm run build
$ php artisan serve

サーバー側の変更

今回は、Pusherで使用するチャンネルの形態が変わるために、ブロードキャストするチャンネルがプライベートチャンネルからプレゼンスチャンネルに変わります。プレゼンスチャンネルは基本的にはプライベートチャンネルと同じですが、プライベートチャンネルと違って現時点誰が参加しているかを追跡することが可能です。

その変更のために以下の２つファイルが編集されています。

使用するチャンネルのクラスを、PrivateChannelからPresenceChannelに変えます。

MessageSent.php

...
     public function broadcastOn()
     {
         // return new PrivateChannel('chat');
         return new PresenceChannel('chat');
     }
...

プレゼンスチャンネルでは、認証の返し値は、プライベートチャンネルのOKならブーリアンはなく、認証された会員名を属性とした配列を返します。

channels.php

...
 Broadcast::channel('chat', function ($user) {
    // return Auth::check();
     if (Auth::check()) {
         return ['name' => $user->name];
     }
 
     return false;
 });

クライアント側の変更

クライアントのchat.jsでも、プライベートチャンネル（private）からプレゼンスチャンネル（join）への変更あります。また、会員の出入りの追跡のために、here(), joining(), leaving()が新たに使用されています。メッセージの受信（listen）は変わりません。

chat.js

...
createApp({
    setup () {
        const messages = ref([]),
            members = ref([]);　// 参加会員リスト

        fetchMessages();

        window.Echo.join('chat') // privateからjoinに
            .here(users => { // 現在のリスト
                members.value = users;
            })
            .joining(user => { // 参加した会員を追加
                members.value.push(user);
            })
            .leaving(user => { // 抜けた会員を削除
                members.value.splice(members.value.indexOf(user), 1);
            })
            .listen('MessageSent', (e) => { // こちらはそのまま使用可能
                messages.value.push({
                    message: e.message.message,
                    user: e.user
                });
            });
  ...

        return {
            members, // コンポーネントで利用できるように
            messages,
            fetchMessages,
            addMessage
        }
    }
})
.component('chat-messages', ChatMessages)
.component('chat-form', ChatForm)
.mount('#app');

ブレードでは以下の部分を追加しています。

...
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">参加会員</div>
                <div class="card-body">
                    <ul>
                        <li v-for="member in members" v-text="member.name"></li>
                    </ul>
                </div>
            </div>
        </div>
...

プレゼンスチャンネル

PusherのDebugコンソールで、イベントのリストを見てみましょう。表示は新から旧への順番です。

リストを下から見ていくと、まず花子さんがログインすると、pusher_internal:member_addedとしてPusherのイベントが作成され接続している他の会員にWebsocketで知らせます。ログアウトすると、今度はpusher_internal:member_removedのイベントが作成されてPusherのサーバーが他の会員へ知らせます。

会員チャット　〇〇さんがタイプしています…

Wed, 20 Sep 2023 01:27:24 +0900

会員チャットデモに機能を追加します。自分以外の誰かがタイプし始めたら、それをリアルタイムで知らせる機能です。チャットなら必ずある機能です。※9/23日にコード修正変更あります！！

欲しい機能

私は太郎さんとして会員ログインをしてチャット画面にいます。花子さんが、送信メッセージをタイプし始めると以下のように、「花子さんがタイプしています…」のメッセージが表示されます。

花子さんがタイプしているときには上の「タイプしています…」は表示されますが、暫くタイプを休憩したら上の「タイプしています…」は消えます。その後花子さんはメッセージを送信するかもしれませんし、しないかもしれません。

これが欲しい機能です。

Pusherでの設定

プログラムを始める前に、PusherのアカウントにおいてEnable client eventsをオンとする必要あります。

今回は、このクライアントイベント（後に説明）の機能を使います。

ソースコード

今回の機能を追加したソースコードは、前回の会員チャットをもとにして違うgitブランチ（chat-whisper）としました。

レポジトリはこちらですが、すでにデモのソースコードをインストールしているなら、以下でスイッチできます。

$ git fetch
$ git checkout chat-whisper

を実行してブランチをゲットできます。

masterとの差分は以下の３つのファイルのみです。

$ git diff master --name-status
M       resources/js/chat.js
M       resources/js/components/ChatForm.vue
M       resources/views/chat.blade.php

前回と同様に以下のコマンドを実行すると、ブラウザでテストが可能です。

$ npm run build
$ php artisan serve

Whisper

まずクライアントのchat.jsでの変更を見てみましょう（最後に9/23の修正のコードがあるので比べてみてください）。

chat.js

createApp({
    setup () {
        const messages = ref([]),
            typer = ref(false),
            typing = ref(false);

        fetchMessages();

        window.Echo.private('chat')
            .listen('MessageSent', (e) => {
                messages.value.push({
                    message: e.message.message,
                    user: e.user
                });
            })
            .listenForWhisper('typing', (e) => {
                // タイプしている会員名を受信して、「〇〇さんがタイプしています」を表示
                typer.value = e.typer;
                typing.value = true;

                // ２秒経過したら、「〇〇さんがタイプしています」のメッセージを非表示
                setTimeout(() => {
                    typer.value = false;
                    typing.value = false;
                }, 2000);
            });
...

        function isTyping(e) {
            // タイプを開始して300ms経過したら、タイプした会員名を送信
            // 300msごとにイベントを送信することで、Pusherへの送信の回数を減らしています
            // Pusherの制限は１秒に最高１０まで
            setTimeout(() => {
                window.Echo.private('chat')
                    .whisper('typing', {
                        typer: e.user.name
                    });
            }, 300);
        }
...

前回チャットのソースコードと違うのは、プライベートチャンネルのchatのリスナーにおいて、自分宛てのメッセージのイベント（MessageEvent）だけでなく、listenForWhisper()の関数を用いて、typingのイベントも聞いていることです。そこでは、typingのイベントがあれば、画面に「〇〇さんがタイプしています」を表示します。

また、自身のキーボートのタイプのイベントをPusherのサーバーに送るために、isTyping()の関数の定義も追加されています。この関数はキーボードのタイプのイベントにバインドされていて（後に説明）、タイプを開始するとPusherのサーバーにタイプしている会員名を含んでtypingイベントとして送ります。

以下は、Pusher側でのDebug Consoleのログですが、client-typingのイベントをたくさん受信しているのがわかります。花子さんがタイプしていることがわかりますね。イベント名の、client-typingのclient-はLaravel Echoがプリフィックスしています。

掘り下げてvuejsの世界へ

chat.jsのisTypingでタイプしているイベントをPusherのサーバーに送っているのはわかりました。さて、その関数はどのように使われているか、掘り下げて見てみます。今度は、vuejsの世界です。

まず、以下のブレードで先のisTypingの関数がchat-formのコンポーネントのistypingというvueのカスタム定義のイベントにバインドされています。

chat.blade.php

...
   <chat-form v-on:messagesent="addMessage" v-on:istyping="isTyping" :user="{{ auth()->user() }}"></chat-form>
...

そして、chat-formのコンポーネントのソースChatForm.vueを見ると、input文内で@keydown = “isTyping”でキーボードをタイプするイベント（keydown）とバインドしています。ややこしいですが、そこでのisTypingは先のとは違いコンポーネント内で定義の関数で、タイプしている会員オブジェクトをデータとしてistypingのイベントとして送信しています。ちなみに、@keydown.enter=“sendMessage”の方は、メッセージをタイプした後に送信するためにEnterキーを押したときのイベントです。

ChatForm.vue

...
function isTyping(e) {
  emit("istyping", {
    user: props.user
  });
}
</script>

<template>
  <div class="input-group">
    <input
      type="text"
      class="form-control"
      placeholder="メッセージをタイプしてください..."
      v-model="newMessage"
      @keydown = "isTyping"
      @keydown.enter="sendMessage"
    />
...
</template>

クライアントイベント

今回は、Pusherのクライアントイベントを使用した機能です。クライアントイベントでは、クライアント（太郎や花子のブラウザ）とPusherサーバーのみの間でのWebsocketの通信で、ウェブサーバーを通してLaravelのプログラムにアクセスする通信（Http）がまったくありません。　

修正

読者からの指摘により、9/23日以前にアップしたコードにおいて、chat.js（上に掲載したコード）に問題あることがわかりました。以下のように修正されています。以前のコードでも動作には問題ないですが、以下２点の問題ありました。

送り側がタイプし続けると、受け取り側の「〇〇さんがタイプしています」の表示において、表示と非表示がちらつく受け取り側の問題。解決には、設定したタイマーをクリアーして非表示にするタイマーを再度設定します。そうすることでいったん表示したメッセージをキープします。上の旧コードではその処理がありませんでした。
送り側がタイプし続けると、Pusherへの送信のイベント数の制限（１秒に１０まで）を超える、送り側の問題。解決には、最初のタイプのイベントで１回Pusherに送信したら、その後300ms待ちます。そして、その間にはタイマーは作成しません。上の旧のコードではタイプする度にタイマーを作成していて送信回数の抑制とはなっておらず、Pusherでは上限を超えるイベントエラーとなっていました。

すでにコードをgithubからダウンロードしていたなら、ローカルのブランチを削除して再度ダウンロードをお願いします。

chat.js

createApp({
    setup () {
        const messages = ref([]),
            typer = ref(false),
            typing = ref(false);

        fetchMessages();

        let listenTimer = false;

        window.Echo.private('chat')
            .listen('MessageSent', (e) => {
                messages.value.push({
                    message: e.message.message,
                    user: e.user
                });
            })
            .listenForWhisper('typing', (e) => {
              // タイプしている会員名を受信して、「〇〇さんがタイプしています」を表示
                typer.value = e.typer;
                typing.value = true;

                // ２秒待つ前にタイプされたら、前回のタイマーをクリアーして
                // 表示・非表示の入れ替えを抑制します
                if (listenTimer) {
                    clearTimeout(listenTimer);
                }

                // ２秒経過したら、表示を非表示に
                listenTimer = setTimeout(() => {
                    typer.value = false;
                    typing.value = false;
                }, 2000);
            });
...
        let whisperTimer = false;

        function isTyping(e) {
          if (whisperTimer === false) {
                // タイプ開始したらすぐにタイプした会員名送信して、300ms待ちます
                // その間のタイプのイベントは、上の条件文のためここのコードが実行されずに無視します
                // こうすることで、Pusherへの送信の回数を減らしています
                // Pusherの制限は１秒に最高１０まで
                window.Echo.private('chat').whisper('typing', {
                    typer: e.user.name
                });
                whisperTimer = setTimeout(() => {
                    whisperTimer = false;
                }, 300);
            }
        }
...

会員チャットの解説（２）プライベートチャンネル

Wed, 06 Sep 2023 04:29:56 +0900

前回に引き続いての会員チャットの解説です。少々ややこしい、クライアントとPusherのサーバー間のWebsocketのプライベートチャンネルの購読認証の仕組みを説明します。

デモの会員のチャットプログラムのインストール手順はこちらから。会員チャットの解説（１）Websocket　はこちらから。

プライベートチャンネルが必要なのは？

プライベートチャンネルがあるということは、誰でもアクセスできるパブリックチャンネルもあります。しかし、チャットは個人あるいはグループ間でのプライベートな通信ゆえに、セキュリティが重要となってきます。

例えば、chatチャンネルにいきなり会員登録やログインをしていないユーザーがチャンネルでの通信内容を聞けたり、メッセージを送信できたら問題です。また、会員ログインをしていても、chatチャンネルでなく自分が属さない違うチャンネルの通信内容を聞けても困ります。

それゆえに、プライベートチャンネルでは、チャンネルを使用する前に、ある条件に適うユーザーのみが使用できる購読認証が必要となります。

チャンネルの購読認証

理解のためにプライベートチャンネルの全体の流れをシーケンス図としてみました。

ウェブサーバーはLaravelのプログラムを実行するアプリサーバーです。クライアントは太郎さんや花子さんのブラウザで、PusherがWebsocketのサーバーです。

上の図では、接続のイベントがまず起こり、次にウェブサーバーを伴く購読のイベントが起こります。購読のイベントでは、認証にはウェブサーバーのHttpが使用されることに注意してください。

接続（Websocket）

最初の図において、まずWebscoketの接続が、クライアントとPusherのサーバーの間で確立します。前回も書いたように、これはbootstrap.jsの以下でのLaravel Echoの初期化で行われます。

bootstrap.js

...
import Echo from 'laravel-echo';

import Pusher from 'pusher-js';
window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    wsHost: import.meta.env.VITE_PUSHER_HOST ?? `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
    wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
    wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
    cluster:import.meta.env.VITE_PUSHER_APP_CLUSTER,
});

設定したPusherのキーなどの情報に間違いがない限り、接続は問題なく確立します。

購読の認証（Http）

特定のプライベートチャンネル購読（ここではchat）は、権限のないアクセスが起こらないように、アプリ（Laravelのプログラム）において認証が必要とされます。

上のシーケンス図のように、まず、クライアントのchat.jsの以下の初期化から始まります。

chat.js

...
createApp({
    setup () {
        const messages = ref([]);

        fetchMessages();

        window.Echo.private('chat')
            .listen('MessageSent', (e) => {
                messages.value.push({
                    message: e.message.message,
                    user: e.user
                });
            });
...

window.Echo.private(‘chat’)では、Pusherのサーバーとプライベートチャンネルの購読が確立されていないなら、http://127.0.0.1:8000/broadcasting/authにPOSTします。POSTに送信する値は、接続で得たsocket_idの値と、channel_nameとしてここではprivate-chatです。

さて、この/broadcasting/authのルートですが、通常のroutes/web.phpでは定義されていません。しかし、以下を実行すると、

$ php artisan route:list

とあります。Laravelが自動で挿入したルートのようです。

会員チャットのデモでは、config/app.phpにおいて、デフォルトではコメントされているApp\Providers\BroadcastServiceProvider::classの行のコメントが解除されています。

config/app.php

...
   'providers' => ServiceProvider::defaultProviders()->merge([
        /*
         * Package Service Providers...
         */

        /*
         * Application Service Providers...
         */
        App\Providers\AppServiceProvider::class,
        App\Providers\AuthServiceProvider::class,
        App\Providers\BroadcastServiceProvider::class, //デフォルトではここがコメントされている
        App\Providers\EventServiceProvider::class,
        App\Providers\RouteServiceProvider::class,
    ])->toArray(),
...

コメントを解除した段階で先ほどのルートが作成されます。

さて、このPOSTで何が起こるかというと、以下のroutes/channels.phpにアクセスして、現在のユーザー（ここではログインした会員）がプライベートチャンネルのchatにアクセスできるかどうか認証するのです。

routes/channes.php

...
Broadcast::channel('chat', function ($user) {
    return Auth::check();
});

Auth::check()は会員がログインされているかどうかの関数で、会員がログインされているなら、trueをそうでないならfalseを返します。trueなら、認証されたトークンとしてのkeyを作成して、チャンネル名とともにWebsocketでPusherサーバーに購読リクエストとして送ります。

今回は会員ログインがあればだれでも参加できるチャットですが、例えば、会員でも特定のグループに属さなければ、チャットができないとかのケースではこの認証の条件が違ってきます。

購読（Websocket)

ウェブサーバー（つまりLaravel）で購読の認証が完了したら、そこで発生したデータをPusherサーバーに送り、チャンネルの購読作業が完了します。完了したら、ウェブサーバーを介せずにクライアントとPusherサーバー間でのWebsocketの通信が開始ます。

太郎さんがメッセージを送信したら、Pusherサーバーを通じて、chatチャンネルを認証購読されたユーザーのみに、メッセージが流れます。

ブラウザのインスペクター

プライベートチャンネルの認証のための一連のイベントは、ブラウザ（ここではFirefoxを使用）のインスペクターで見ることができます。

インスペクターのNetworkのタブで、HTML、XHR(ajax)、WS(websocket)をオンにして、http://127.0.0.1:8000/chatページにアクセスします。

まず、認証のためのauthへのPOSTですが、レスとしてauthの値が返されていることがわかります。値はコロンで分割されていて最初はPusherで取得したkeyの値で後ろが生成されたsignatureの値です。

Websocketのイベントは、以下のハイライトされている行でリアルタイムで見ることができます。先のPOSTのレスの値をPusherのサーバーに送信しているのがわかりますね。この行が、認証のPOSTより前にあるのはすでにPusherサーバーとの接続が先に起こっているからです。WebsocketのイベントはHttpのイベントと違い、将来に通信（例えばメッセージの受信）が起こってもこの行だけのレスにイベントが追加されます。

以下では、Pusherのサーバーから購読確立成功（subscription_succeeded）が返ってきています。

会員チャットの解説（１）Websocket

Mon, 04 Sep 2023 04:50:28 +0900

前回作成したWebsocketを使用した会員チャット。Laravelのお陰でプログラムはシンプルなのですが、裏で何か起こっているかいまひとつ。ということで、仕組みに関して私なりの理解で説明します。

デモの会員のチャットプログラムのインストール手順はこちらから。

HttpとWebsocketの違い

まず、チャットで使用されている通信のプロトコルに関して。

Websocketは、Httpと同様にインターネットのアプリレイヤーのプロトコルの１つですが、以下のような違いがあります。

Httpがリクエストとレスポンスで通信が完了するのと違い、Websocketは一度接続が確立するとクローズ（サーバーあるいはクライアントが）するまで双方向の通信が可能となり、とても高速の通信が可能となります。

メッセージを送信すると

前回開発した会員チャットのデモにおいては、これらの２つの通信プロトコルがどう使用されているか見てみましょう。

クライアントのブラウザからメッセージを送信したときの流れの図を作成してみました。クライアント（ブラウザー）とサーバー（ウェブサーバーとPusherのサーバー）を結ぶ線において、通信のプロトコルが異なることに注意してください。黒線はHttpで、赤線はWebSocketです。

Http

まず、クライアントとウェブサーバーとPushサーバー間のHttp/Httpsの通信を見てみます。

上の図では、チャットの画面（太郎のブラウザなど）で、メッセージを入力して「送信」ボタンをクリックすると、同じページ上に含まれるchat.jsの以下のaddMessage()が実行されます。

chat.js

...
createApp({
    setup () {
...
        function addMessage(message) {
            messages.value.push(message);

            axios.post('/messages', message).then(response => {
                // success
            });
        }
...

そこでは、入力した自分のメッセージを画面に反映させるとともに、ajaxで/messageにデータをPOSTします。つまり、以下のChatController.phpのsendMessage()が実行されます。

Chatcontroller.php

...
class ChatsController extends Controller
{
...
    public function sendMessage(Request $request)
    {
        $user = Auth::user();

        // DBにレコードを作成
        $message = $user->messages()->create([
            'message' => $request->message,
        ]);

        // Pusherにブロードキャストに必要な情報を送信
        broadcast(new MessageSent($user, $message))->toOthers();

        return ['status' => 'Message Sent!'];
    }
...

上のメソッドでは、受信したデータをDBに記録して、ヘルパーのbroadcast()をコールして、Pusherのサーバーにブロードキャストするデータを送ります。データは、MessageSentのイベントインスタンスとして渡し、toOthers()で、にブロードキャストの対象には自分が含まれないことを指定します。ここまででは、まだHttpのプロトコルを通信の枠内です。

MessageSentイベントの定義を見てみましょう。

MessageSent.php

...
class MessageSent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $user;
    public $message;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct(User $user, Message $message)
    {
        $this->user = $user;
        $this->message = $message;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new PrivateChannel('chat');
    }
}

このイベントはLaravelで通常に使われるイベントと同じですが、ShouldBroadcastをインターフェースとしているところが違います。それゆえに、broadcastOn()のメソッドが定義されています。そのメソッドにおいて、chatという名前のプライベートチャンネルが指定されていることに注意してください。

Websocket

今度は、クライアントとPusherサーバー間のWebsocketの通信について見てみます。

まず、クライアントとPusherサーバーのWebsocketの接続は、以下のbootstrap.jsのコードのnew Echo()の初期化の実行で確立します。

bootstrap.js

...
import Echo from 'laravel-echo';

import Pusher from 'pusher-js';
window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    wsHost: import.meta.env.VITE_PUSHER_HOST ?? `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
    wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
    wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
    cluster:import.meta.env.VITE_PUSHER_APP_CLUSTER,
});

次に、chat.jsの以下でvueのアプリが初期化され、setup()がコールされます。そこでは、window.Echo.private(‘chat’).listenにおいて、

クライアントとPusherサーバーでchatチャンネルの購読を確立する（最初の１回のみ）
そのチャンネルにおいて、PushサーバーからMessageSentイベントを受信したらクライアントの画面に表示する

作業を行います。ここで使用するチャンネル名（chat）とイベント名（MessageSent）は、Http側の通信で使用されているものと同じであることが必要です。

chat.js

...
createApp({
    setup () {
        const messages = ref([]);

        fetchMessages();

        window.Echo.private('chat')
            .listen('MessageSent', (e) => {
                messages.value.push({
                    message: e.message.message,
                    user: e.user
                });
            });
...

例えば、花子さんのクライアントでPusherのサーバーとチャンネルの購読が確立すると、太郎さんが送信したメッセージ（つまり、MessageSentイベント）は、PusherサーバーからWebsocketを通じて送られてきます。そして、それがMessageSentイベントなら、花子さんのブラウザにリアルタイムで太郎さんのメッセージが表示されます。

Pusherのデバッグ画面

Pusherのサイトの管理画面では、上で説明したWebsocketの一連のイベントを、以下のDebug Consoleのメニューにおいてすべて閲覧することができます。

そこでは、太郎さんの接続と購読、花子さんの接続と購読、そして太郎さんが送信したメッセージの受信などのWebsocketイベントが最新なものからリスト表示されます。ちなみに、太郎さんが送信してPusherが受信したイベントでは、チャンネル名が、private-chatと表示されていますが、これはLaravel Echoが、MessageSentで指定したchatがプライベートチャンネルゆえに、private-をプレフィックスしているからです。

次回は

HttpとWebsocketを使用したチャットの仕組みを説明をしましたが、次回はクライアントとPusherサーバー間でのWebsocketでのセキュリティ、つまりプライベートチャンネルの仕組みを説明する予定です。

Pusherを使ってリアルタイムの会員チャットを作成

Fri, 01 Sep 2023 07:23:00 +0900

WebSocketを使用したリアルタイムのアプリケーションを作りたいのだけれど、WebSocketのサーバーの設定や管理は面倒、という方にお勧めが、Pusherのサービスです。無料プランで、１日200Kまでのメッセージ、100人までの同時接続が可能という寛大さ。ちょっとした小さいサイトなら無料プランで十分かもしれません。今回はそのサービスの紹介とともに、会員チャットをLaravel 10xとVue 3で作成します。

会員チャットのデモ

まず、完成品を見てみましょう。

上は、「太郎さん」がログインして、同じサイトにログインしている「花子さん」とチャットしているところです。「私」というのがログインしている「太郎さん」。

逆に「花子さん」でログインすると、「私」は花子さんです。

もちろん、「太郎さん」と「花子さん」だけでなく、他にも会員が登録していれば、すべての会員とチャットが可能です。デモということで画面はシンプルですが、デザインを工夫すればよりチャットらしいもの変えることができます。

Pusherで登録してキーをゲット

チャットのデモをインストールを説明する前に、PusherのWebsocketのサーバーを使用するために以下の作業が必要です。英語の画面のみなので、画像で説明します。

まず、以下のリンクに行きます。 https://pusher.com/

そこから、登録（Sign Up）の画面へ。

ここでメールアドレスとパスワードを入力して登録するか、すでにGoogleやGithubのアカウントがあるなら、それらからも接続で登録可能です。

登録すると、以下のように画面が変わり、

先に使用したメールアドレスへ、以下の確認のメールが送信されます。

確認メールのリンクをクリックすると以下の画面へ飛びます。

そこにおいて、「Get Started]をクリックすると、以下のポップアップが表示され、App（アプリ）の作成となります。そこでは、Appの名前とクラスターのデータセンターの指定が必要です。他は選択しなくても構いません。「Create App」のボタンを押すと、

以下の画面に変わり、この画面での情報が後に、.envでの編集において必要となります。

会員チャットデモのレポジトリ

PusherのサイトにはLaravelとVueを使用した親切なチュートリアルが掲載されています。しかし、Laravelは8x、VueはVue 2とやや古めということで、Laravel 10xと Vue 3で私が書き直したものをGithubのリポジトリとしました。

まず、これをローカル環境にクローンします。

$ git clone git@github.com:lotsofbytes/laravel-chat.git laravel-chat

このレポジトリでは、Laravelの10xの新規のプロジェクトに、Laravel UIのVueバージョンをインストールして、その上にチャットに必要なプログラムの変更を行いました。gitのコミットには以下のように３つのコミットとしましたので、差分を見てもらえればどのファイルをチャットのために変更したのが分かります。

840583a (HEAD -> master, origin/master) setup pusher
978ef3b install laravel/ui vue
62cad23 init

$ git diff 978ef3b --name-status
M       README.md
A       app/Events/MessageSent.php
A       app/Http/Controllers/ChatsController.php
A       app/Models/Message.php
M       app/Models/User.php
M       composer.json
M       composer.lock
M       config/app.php
A       database/migrations/2021_09_08_142412_create_messages_table.php
M       database/seeders/DatabaseSeeder.php
M       package-lock.json
M       package.json
M       resources/js/app.js
M       resources/js/bootstrap.js
A       resources/js/chat.js
A       resources/js/components/ChatForm.vue
A       resources/js/components/ChatMessages.vue
A       resources/views/chat.blade.php
M       resources/views/home.blade.php
M       resources/views/layouts/app.blade.php
M       routes/channels.php
M       routes/web.php
M       vite.config.js

インストールの手順

ローカル環境にレポジトリをクローンしたところで、まず必要なライブラリのインストールです。

$ composer install

さらに、フロントエンドのライブラリのために、

$ npm install

次に、

$ cp .env.example .env

を実行して、.envを作成。

$ php artisan key:generate

で.envにおけるキーを作成します。この時点でデータベースも作成してください。

.envをエディタで以下の変数を編集します。

# ローカル環境のDBの設定
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_chat
DB_USERNAME=root
DB_PASSWORD=

# 以下はpusherに設定
BROADCAST_DRIVER=pusher

# Pusherのサイトから取得してきた値に設定（＊以下の値はデモ用で使用はできません）
PUSHER_APP_ID=1657179
PUSHER_APP_KEY=dea19d8ae29b0823c91c
PUSHER_APP_SECRET=1b4c2c87d40f99389e2f
PUSHER_APP_CLUSTER=ap3
PUSHER_HOST=
PUSHER_PORT=443
PUSHER_SCHEME=https

次にデータベースにDBテーブルを作成して、太郎さんと花子さんのユーザーを作成しておきます。

$ php artisan migrate
$ php artisan db:seed

今回はviteを使用したので、使用されているjsのコンパイルが必要です（レポジトリにはコンパイルされたファイルは含まれていません）。以下の実行で、DeprecationのWarningが出るかもしれませんが、気にせずに。

$ npm run build

public/build/assetsにコンパイルされたjsとcssのファイルが作成されます。

最後にLaravelの簡易ウェブサーバーを立ち上げます。

$ php artisan serve

  INFO  Server running on [http://127.0.0.1:8000].

  Press Ctrl+C to stop the server

これで以下にアクセスして、ログインすると最初に紹介した画面となります。 http://127.0.0.1:8000/chat

太郎さんのログインは、tarou@example.com、花子さんは、hanako@example.comです。どちらもパスワードは、passwordです。

異なる２つのブラウザ（例えば、ChromeとFirefoxとか）を立ち上げて、違うユーザーでログインして確認してみてください。

最後に

会員チャットデモの解説は以下にあります。会員チャットの解説（１）Websocket　はこちらから。会員チャットの解説（２）プライベートチャンネル　はこちらから。

それから、以下が現時点での無料プラン（SandBox）プランの制限です。開発またはライブでばんばん使える上限であります。

Pusher on ララジャパン

特定の会員のデスクトップにお知らせ

欲しい機能

ソースコード

お知らせ受信の許可

お知らせの受信

OpenAIのレスをHTML表示

OpenAIからのレス

ソースコード

markdown-itをChatMessages.vueに取り込む

OpenAIとチャット

欲しい機能

Open AIでアカウントを登録

APIのキーをゲット

ソースコード

必ずここを読む

特定の会員にリアルタイムでお知らせ

欲しい機能

ソースコード

送信側

クライアント

複数のユーザーにnotify

会員チャット 現在参加している会員リスト

欲しい機能

ソースコード

サーバー側の変更

クライアント側の変更

プレゼンスチャンネル

会員チャット 〇〇さんがタイプしています…

欲しい機能

Pusherでの設定

ソースコード

Whisper

掘り下げてvuejsの世界へ

クライアントイベント

修正

会員チャットの解説（２）プライベートチャンネル

プライベートチャンネルが必要なのは？

チャンネルの購読認証

接続（Websocket）

購読の認証（Http）

購読（Websocket)

ブラウザのインスペクター

会員チャットの解説（１）Websocket

HttpとWebsocketの違い

メッセージを送信すると

Http

Websocket

Pusherのデバッグ画面

次回は

Pusherを使ってリアルタイムの会員チャットを作成

会員チャットのデモ

Pusherで登録してキーをゲット

会員チャットデモのレポジトリ

インストールの手順

最後に

会員チャット　現在参加している会員リスト

会員チャット　〇〇さんがタイプしています…