環境
Laravel 11
ドライバ Pusher
目的
チャットに接続している全てのユーザーにチャットを送れて見られるようにする。
エラー内容
chromeデベロッパーツール
WebSocket connection to
'wss://api.pusherapp.com/app/...=false'
failed:
createWebStock @ pusher-js.js?v=...
問題
チャットを送るまでは良いが相手側に表示されない。
試み
- Laravelキャッシュ削除、再起動
- GPTによる誤字脱字の確認
- リリースノートの確認（よくわからない）
- Pusherオーバービュー確認
多分…
教材ではJavascriptを構ったりしていたのだが、俺はJavascriptを習得していない…！
さらにLaravelバージョンの違いで設定がいろいろ違うため、何が何だかわかっていない状況。
ブラウザのデベロッパーツールではエラーが出ているので特定しやすいはずだがさっぱりだ！
エラー内容的にpusherに接続できていない？のかもしれないが、pusherオーバービューをみると、現在接続している人数、メッセージの数はちゃんと記録されているので接続できてるのでは？とも思うが、エラーが出ているのでなにかしら接続不良が起きているのだろう…。
解決(2024/07/10)
ほとんど兄に解決してもらいました。謝謝！！
- Chrome拡張機能をオフ
-
AppServiceProvider.phpに以下を追加(use宣言も忘れず)
Broadcast::routes();
require base_path('routes/channels.php');
-
bootstrap.jsとecho.jsにあるwindow.Echo内の以下の項目をコメントアウト
wsHost: import.meta.env.VITE_PUSHER_HOST || 'ws.pusherapp.com',
wsPort: import.meta.env.VITE_PUSHER_PORT || 80,
wssPort: import.meta.env.VITE_PUSHER_PORT || 443,
enabledTransports: ['ws', 'wss'],
今回これ意外にもいくつかエラーが出ており、一応それら全てを解決しましたが、俺自身完璧に理解しているというよりはなんとなくわかった程度でした。
まだ切り分けて特定する力が弱い。俺は弱い。