通常、Webはクライアント(ブラウザ)がリクエストを行わないとプログラムが動作しない仕組みになっています。
つまり、ブラウザが始点になってサーバーにデータを行うことは可能ですが、いきなりサーバーから、ブラウザからのリクエスト無しでブラウザに対してデータを送ることはできません。
古典的な解決方法としては、ブラウザ側に定期的にサーバーへ問い合わせるjavascriptを読み込ませておき、サーバー側からくるデータに変化があったらブラウザ上の表示する、という古典的な方法(＝ポーリング) を取ることで、擬似的にサーバー主体でデータを送信し、ブラウザで受け取ることができます。
ただし、常に通信と処理がサーバーとブラウザで双方に発生しているので、お互いにリソースが無駄に消費されてしまうのが難点でした。
そこで出てきたのが”Websocket”という仕組みです。
Webの仕組みを実現するHTTPプロトコルを拡張して作られた仕組みで、ブラウザ側から一度リクエストを行い、サーバー側で受理されると、以降はずっと接続が維持されっぱなしとなるしくみです。
接続がずっと続いているので、いきなりサーバーから通信を投げることも可能となります。
さてこのWebsocketですが、実装が少々面倒なのが難点です。
通常、WebサーバーとWebsocket通信を行うサーバーを別々に建てる必要があり、それぞれのサーバーのポートを1つのポートでListenできるようにNginxなどのリバースプロキシを用意する必要があります。
また、Websocketサーバーについても、サーバー内で動作するプログラムについては自前で揃える必要があります。
どのタイミングでどんな値を送信するのかを定義する必要があるためです。
さらに、Web側のプログラムをWebsocket側のプログラム、そしてブラウザ側とデータの同期をとる仕組みを考える必要もあります。
このように、考えないといけないことがかなり多いのが難点です。
そんなWebsocketですが、Laravelを使用するとびっくりするほど簡単に実装ができました。
今回はLaravelを使ったWebsocketの実装をご紹介したいと思います。
なお、今回の方法ではRedisが必要になります。Redisサーバーがない場合は予めセットアップしておきましょう。
まず、Laravelのプロジェクトに移動し、管理者権限で次のコマンドを入力します。
yarn add global laravel-echo-server
これで、今回使用Laravel EchoのWebsocketサーバーがマシンにインストールされます。
次に、今インストールしたlaravel-echo-serverを初期化します。
laravel-echo-server init
いくつか質問を聞かれるので、自分の環境に合わせて回答していきます。
$ laravel-echo-server init
? Do you want to run this server in development mode? Yes
? Which port would you like to serve from? 6001
? Which database would you like to use to store presence channel members? redis
? Enter the host of your Laravel authentication server. http://localhost
? Will you be serving on http or https? https
? Enter the path to your SSL cert file.
#SSLの証明書ファイルのパス
? Enter the path to your SSL key file.
#SSLのキーファイルのパス
? Do you want to generate a client ID/Key for HTTP API? Yes
? Do you want to setup cross domain access to the API? Yes
? Specify the URI that may access the API: http://localhost:80
? Enter the HTTP methods that are allowed for CORS: GET, POST
? Enter the HTTP headers that are allowed for CORS: Origin, Content-Type, X-Auth-Token, X-Requested-With, Accept, Authorization, X-CSRF-TOKEN, X-Socket-Id
? What do you want this config to be saved as? laravel-echo-server.json
appId: c90a75aab87d2509
key: f557e069a187a00d49cd7bb10505b105
Configuration file saved. Run laravel-echo-server start --config="laravel-echo-server.json" to run server.
$
すべての項目に答えると、回答内容をもとにlaravel-echo-server.jsonが生成されます。
これがlaravel-echo-serverの設定ファイルになります。
ここからは、laravel-echo-serverとの連携に必要なライブラリ類を揃えていきます。
composer require predis/predis
yarn add socket.io-client
yarn add laravel-echo
これで必要なライブラリは一通り揃いました。
次回は実際に設定を行って動作させる方法をご紹介したいと思います。
