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

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

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

HttpとWebsocketの違い

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

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

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

メッセージを送信すると

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

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

Http

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

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

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

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

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

...
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イベントの定義を見てみましょう。

...
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()の初期化の実行で確立します。

...
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側の通信で使用されているものと同じであることが必要です。

...
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でのセキュリティ、つまりプライベートチャンネルの仕組みを説明する予定です。