Laravel-echo-serverでチャットアプリを作ろうとしたらSameSiteの設定で怒られた

概要

チャット機能をつけるためにLaravel-echo-server + Redisにてソケット通信を行おうとしたところSameSiteの設定でIssueが出ていた。
無事動いたので備忘録。

チャット機能は以下を参考
Laravel Broadcasting (Laravel Echo)を試してみる

環境

Laravel Framework 6.20.32
MAMP 6.4
PHP 7.4.6

やったこと

• localhostのSSL設定
• laravelのsame_siteの設定
• laravel-echo-serverのSSL設定
• 接続先をhttpsへ変更

localhostのSSL設定

以下のサイトを参考。
他のやり方だと何故かうまく行かなかった。
ローカル開発環境にSSLを設定できるmkcertがめちゃくちゃ便利だった

laravelのsame_siteの設定

{ルート}/session.phpで設定

session.php

'same_site' => 'lax',

noneに設定すると怒られたのでlaxにしました。

Mark cross-site cookies as Secure to allow setting them in cross-site contexts

laravel-echo-serverのSSL設定

laravel-echo-server.jsonをSSLに対応。
認証はMAMPの時に作成したもの。

laravel-echo-server.json

    "port": "6001",
    "protocol": "https",
    "socketio": {},
    "secureOptions": 67108864,
    "sslCertPath": "/Applications/MAMP/conf/apache/keys/localhost.pem",
    "sslKeyPath": "/Applications/MAMP/conf/apache/keys/localhost-key.pem",

忘れずにサーバーを再起動。

laravel-echo-server start

接続先をhttpsへ変更

laravel-echoの設定を変更

bootstrap.js

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: 'https://' + window.location.hostname + ':6001'
});

忘れずにjsを更新。

npm run dev

おわり

これでとりあえずIssuesはなくなりました。