音声配信プラットフォームを作ろうとしていますが、コメントがリアルタイムに反映されません。

Question

実現したいこと

ReactとLaravelやっている人がいたら相談したいことがあります・・・。
現在Youtubeの配信のコメント欄のようにリアルタイムでコメントが流れるような機能を作ろうとしています。
それでPusherというSaasを用いてWebSocket通信をしてリアルタイムコメントを実装しようと思っています。

ただ、片方のタブで送信したコメントを、もう片方のタブで開いた時に一度再読み込みをしないと反映されません。
映像のように、Command+Rで再読み込みをしなければ反映されません。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ルーティング

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\CommentController;
/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "api" middleware group. Make something great!
|
*/

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});

// 既存のコメント取得エンドポイント
Route::get('/comments', [CommentController::class, 'index'])->name('get.broadcastingRooms.comment');

// 新しいコメント作成エンドポイント
Route::post('/comments', [CommentController::class, 'store'])->name('store.broadcastingRooms.comment');

<?php

namespace App\Http\Controllers;

use App\Events\SentComment;
use App\Models\Comment;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Event;
use Illuminate\Support\Facades\Log;
class CommentController extends Controller
{
    public function index(Request $request)
    {
        $comments = Comment::all();
        event(new SentComment($comments));
        return response()->json($comments);
    }

    public function store(Request $request)
    {
        $this->validate($request, [
            'text' => 'required',
        ]);
        $commentModel = new Comment();
        $comment = $commentModel->insertComment($request);
        event(new SentComment($comment));
        return response()->json();
    }
}

<?php
namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\BelongsTo;
use Illuminate\Support\Facades\Log;

class Comment extends Model
{
    use HasFactory;

    protected $fillable = ['comment']; // フィールド名を修正
    protected $table = 'broadcasting_rooms_comments';

    public function broadcastingRoom(): BelongsTo
    {
        return $this->belongsTo(BroadcastingRoom::class);
    }

    public function insertComment($request)
    {
        $requestBody = file_get_contents('php://input');
    
        // JSON文字列を連想配列に変換
        $jsonData = json_decode($requestBody, true);
    
        // "text" フィールドの値を取得
        $commentText = $jsonData['text'];
        $comment = new Comment();
        $referer = $request->headers->get('referer'); // リクエストの Referer を取得
        //refererが配信者・視聴者のどちらかのURLかを判定
        if (strpos($referer, "http://localhost/broadcast/") !== false) {
            //視聴者の場合
            if(strpos($referer, "http://localhost/broadcast/stream") !== false) {
                $pattern = "http://localhost/broadcast/stream/";
                $broadcastId = str_replace($pattern, "", $referer);
                $comment->broadcasting_rooms_id = $request->input('broadcasting_rooms_id', (int)$broadcastId);
                $comment->comment = $request->input('comment', $commentText);
                $comment->save();
                return $comment;
            //配信者の場合
            } else {
                $pattern = "http://localhost/broadcast/";
                $broadcastId = str_replace($pattern, "", $referer);
                $comment->broadcasting_rooms_id = $request->input('broadcasting_rooms_id', (int)$broadcastId);
                $comment->comment = $request->input('comment', $commentText);
                $comment->save();
                return $comment;
            }
        }
    }
}

下記が配信者用の画面です

import React, { useEffect, useState } from 'react';
import FileTree from './FolderTree/FileTree';
import Editor from './Editor';
import CommentForm from './Comment/CommentForm';
import CommentList from './Comment/CommentList';
import AudioStreamer from './Audio/AudioStreamer';

const BroadcastRoom = () => {
  const [fileNames, setFileNames] = useState([]);
  const [comments, setComments] = useState([]);

  useEffect(() => {
    // URLのパラメーターを使用してAPIからデータを取得するなどの処理をここに記述
    fetch('/api/comments')
      .then((response) => response.json())
      .then((data) => {
        setComments(data);
      });

    // Pusherを使ったリアルタイムコメントのリッスンを追加
    window.Echo.channel('comment')
      .listen('.SentComment', (e) => {
        setComments(prevComments => [...prevComments, e.comment]);
      });
  }, []);

  const addComment = (newComment) => {
    // 新しいコメントオブジェクトにIDを追加する
    const commentWithId = { ...newComment };
  
    fetch('/api/comments', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      // IDを含めたコメントオブジェクトをJSON文字列に変換してリクエストのボディに設定する
      body: JSON.stringify(commentWithId),
    })
      .then((response) => response.json())
      .then((data) => {
        setComments([...comments, data]);
        fetch('/api/comments')
          .then((response) => response.json())
          .then((data) => setComments(data));
      });
  };  

  return (
    <div className='all-space'>
      <AudioStreamer />
      <div style={{ display: 'flex' }}>
        <FileTree fileNames={ fileNames } setFileNames={ setFileNames } />
        <div style={{ flex: 1 }}>
          <Editor selectedFiles={ fileNames } />
        </div>
        <div className='comments'>
          <CommentList comments={ comments } updateComments={ setComments } />
          <CommentForm onAddComment={ addComment } />
        </div>
      </div>
    </div>
  );
};

export default BroadcastRoom;

import React, { useEffect, useState} from 'react';
import CommentForm from './Comment/CommentForm';
import CommentList from './Comment/CommentList';

const ViewerDashboard = () => {
    const [comments, setComments] = useState([]);
  
    useEffect(() => {
      fetch('/api/comments')
        .then((response) => response.json())
        .then((data) => setComments(data));
  
      // Pusherを使ったリアルタイムコメントのリッスンを追加
      window.Echo.channel('comment')
        .listen('.SentComment', (e) => {
          setComments(prevComments => [...prevComments, e.comment]);
        });
    }, []);
  
    const addComment = (newComment) => {
        fetch('/api/comments', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(newComment),
        })
        .then((response) => response.json())
        .then((data) => {
        setComments([...comments, data]);
        fetch('/api/comments') // GETリクエストを実行してコメント一覧を更新
            .then((response) => response.json())
            .then((data) => setComments(data));
        });
    };

    return (
        <div>
          <h1>視聴者用の画面</h1>
          <CommentList comments={ comments } updateComments={ setComments } />
          <CommentForm onAddComment={ addComment } />
        </div>
    );
};

export default ViewerDashboard;

下記がイベントです。

<?php
namespace App\Events;
use Illuminate\Support\Facades\Log;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class SentComment implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    /**
     * The new comment.
     *
     * @var \App\Models\Comment
     */
    public $comment;

    /**
     * Create a new event instance.
     *
     * @param \App\Models\Comment $comment
     */

     public function __construct($comment)
    {
        $this->comment = $comment;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return array<int, \Illuminate\Broadcasting\Channel>
     */

    public function broadcastOn(): array
    {
        return [new Channel('comment')];
        
    }
}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

 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,
     cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1',
     wsHost: import.meta.env.VITE_PUSHER_HOST ? 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'],
 });

試したこと

Pusherのデバッグ用のログを確認しました。
2つのViewを別のタブで開いている状態で、Subscriptionのログがあるのかを見てみたのですが、片方の画面でコメントが反映されたとしてももう片方の画面ではリロードしなければSubscriptionの処理がされません。
公式ドキュメントのやり方でbootstrap.jsのコメントアウトを外すというのは見てやってみたのですができませんでした。

環境

Laravel10
laravel-sail
React.js(Laravelに付属しているReactです。別のReactアプリケーションとして立ち上げているわけではありません。同じコンテナ内で動いています。)

よろしくお願いいたします。

Answer 1

解決はしましたが、良い解決策とは思えないです。
ただ、一応共有はします。

Pusherはログを吐き出させると、そのチャンネルの情報をリアルタイムに共有してくれます。
今回の場合はコメントです。
どういったコメントがあるのかという内容のログをリアルタイムで吐き出してくれます。
なので、それを読み取れば良いということになります。

コードは下記です。

const usePusherComments = () => {
  const [pusherComments, setComments] = useState([]);
  
  Pusher.log = function(message) {
    //Event recdという名前のログを吐くのでそれをキャッチ
    const startIndex = message.indexOf('"Event recd"');
    if (startIndex !== -1) {
      const jsonStartIndex = message.indexOf('{', startIndex);
      if (jsonStartIndex !== -1) {
        const jsonString = message.substring(jsonStartIndex);
        const jsonEndIndex = jsonString.lastIndexOf('}');
        const json = jsonString.substring(0, jsonEndIndex + 1);
        try {
          const eventData = JSON.parse(json);
          if (eventData.data && eventData.data.comment) {
            const comments = eventData.data.comment;
            setComments(comments);
          }
        } catch (error) {
          console.error('Error parsing JSON:', error);
        }
      }
    }
  };

  return pusherComments;
};

新しくコンポーネントを宣言して、ログの中のコメントを格納しているオブジェクトをキャッチしてそれを変数に格納させて返すようにしました。
ただあまりいい解決策とは言えないと思うので、何かありましたら共有してもらえると助かります。

ありがとうございました。

Answer 2

ReactもPusherもやったことないんでよくわかんないですけど、多分コメントを送信したときにそれを他の利用者にWebSocketで送るような処理が入ってないんじゃないですかね。

jsのaddComment 内で、コメントを入力して送信したときに、コメントをサーバーに保存するためにfetchでpostしてますが、それと同時にWebSocketでも送ってやらないといけないですね。

送信が正常に行われているかは、ブラウザの開発者ツールのネットワークタブで確認できます。

Comments

[reborn8907]

なるほど。
試してみます!!!
ありがとうございます!!!

[reborn8907]

ソケット通信はできています。
ただ、CommentListコンポーネントというコメントをリストで表示する箇所にわたっていないだけのようです。
なのでそこを修正してみます。