Laravelを使ってチャット機能を作りたかったのですが、公式での情報が難しく、なかなか単純なチャット機能の記事が見つからなかったので、
今回は「仕組みを理解し、最低限なチャット機能を実装」という視点で記事にしたいと思います。

要件

今回のチャット機能の要件としては、最低限の機能を持ったシンプルなチャットなので要件は、

  • 文字のみのチャット
  • ログイン認証なし
  • グループなどは無く、ページにアクセスした人が全員参加
  • チャットログの保存はしない
  • ログが無い為、途中からアクセスした場合はそれ以前のメッセージは表示されない

とします。

チャット機能の実現方法

まず、webのチャット機能を実現するには、http通信のような単方向の通信方式は向いていなく、双方向通信の仕組みを使うのが一般的です。
webの双方向通信で良く使われるのがWebSocketというプロトコルです。
このWebSocketの仕組みについて簡単に説明します。

双方向通信は以下の手順によって実現されます。

  1. クライアントからサーバーへの通信要請
  2. 通信の確立
  3. 確立した通信へのクライアントからの送信
  4. サーバーからの確立した通信全てへの送信

WebSocketでは通信を受け取る(または受け取る状態を)購読[Subscribe]と呼び、
通信の送信を出版[Publish]と呼びます。

手順による具体的な動きを以下のスライドに示します。

以上が、今回実装で使用するWebSocketの簡単な仕組みです。

使うもの

前節でwebsocket通信さえできれば、チャット機能の実装が可能なことが分かりました。
実際、チャット機能にはサーバーサイドのプログラムは必要なく、最低限で

  • クライアントサイドプログラム
  • WebSocketサーバー

の2つさえあれば実装できます。

このWebSocketサーバーが、調べてみると分かりますが、js(node.js)でサーバーサイドをゴリゴリ書くという、
普段web開発でhttp通信しか扱っていない人にとっては、新しいプロトコルによる実装となり、ハードルが高そうです。
(少なくとも僕はハードルが高いと感じました)

そこでLaravelです。
Laravelは公式で紹介される、WebSocket実装のライブラリの「Laravel Echo Server」があり、コードを書かずにWebSocketサーバーを実現できます。
さらに、クライアントサイドでは「Laravel Echo」というクライアントライブラリもあり、jsをほぼ記述せずにWebSocket通信が実装できます。

※「Laravel Echo Server」と「Laravel Echo」は共にLaravelと名前についていますが、実態はjsのライブラリです。

なので、今回のチャット機能の実装に使うものは、この2つとなり、
これに加え、従来のwebシステムの構成も持っておく事にして(今回は処理としては必要無いが、拡張する事を仮定する)、以下が使用するものの一覧となります。

  • クライアントサイド:Laravel Echoとjs
  • WebSocketサーバー:Laravel Echo ServerとRedis
  • サーバーサイド:Laravel

急にRedisが出てきましたが、これはLaravel Echo Serverを使用する際に標準で必要なものとなっています。
規則にのっとりコーディングすれば、特に実装で気にする事は無いので気にしなくて大丈夫です。
※知識としてRedisはDBだがPub/Sub機能を持っているという事だけ頭に入れておいてください。

構成図

今回の構成図と動作イメージを、以下のスライドに示します。

  1. 従来のWebシステム構成
  2. 1にWebSocketの構成を追加したもので、今回の構成図
  3. 動作1:クライアントからサーバーに対してhttpでページを表示
  4. 動作2:表示されたページのjsが処理され、WebSocketサーバーと通信確立(Subscribe)
  5. 動作3:サーバーへメッセージをhttpでpostする事により、サーバーはWebSocketサーバーへそのメッセージを通知(Publish)。詳しくは下記参照
  6. 動作4:WebSocketサーバーは通知されたメッセージを通信確立しているクライアント全てへ通知させます(Publish)

ここで、動作3でなぜ、直接WebSocketサーバーへPublishせずに、httpでサーバーへpostしているかというと、今後の拡張を仮定し、DB保存などの処理を想定しているからです。(図ではDBへ書き込んでいますが、今回はその処理は行いません)

以上、チャット機能の仕組みの理解と、構成図の説明は終わりになります。

実装内容は次回記事「」になります。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です