こちらの記事の続きです。

Laravelにてプリセット環境がReactになっていること想定。

php artisan preset react
npm install
npm run dev

実装

Event.jsの作成

resources/js/components以下にEvent.jsを作成します。
既にExmaple.jsが存在するので、それをコピーして利用します。

とりあえず下記のようにしました。以前の維持ではbootstrap.jsに記述していたchannel(), private()をcomponentDidMount()等に移します。また、イベントが通知されたタイミングでthis.setState()を実行し、stateをアップデートし、表示させます。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

export default class Event extends Component {

    constructor(){
        super();
        this.state = {
            public_message: 'aaa',
            private_message: 'bbb',
        }
    }

    componentDidMount(){
        window.Echo.channel('public-event')
            .listen('PublicEvent', (e) => {
                // console.log(e);
                this.setState({
                    public_message: e.message
                });
            });

        const user_id = 1;
        window.Echo.private('private-event.' + user_id.toString())
            .listen('PrivateEvent', (e) => {
                // console.log(e);
                this.setState({
                    private_message: e.message
                });
            });
    }
    
    render() {
        return (
            <div>
                <h1>Event Contents</h1>
                <div>Public Message: {this.state.public_message}</div>
                <div>Private Message: {this.state.private_message}</div>
            </div>
        );
    }
}

if (document.getElementById('event')) {
    ReactDOM.render(<Event />, document.getElementById('event'));
}

bootstrap.js（抜粋）

bootstrap.jsにおける記述は接続情報のみとなりました。

//for Echo
import Echo from 'laravel-echo';
window.io = require('socket.io-client');

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: 'http://localhost:6001',
    auth: {
        headers: {
            'Authorization' : 'Bearer hogehoge',
        }
    }
});

app.js（抜粋）

app.jsでは作成したEvent.jsを読み込んでいます。

require('./components/Event');

welcome.blade.php（抜粋）

とりあえず、welcome.blade.phpに表示させてみます。bodyの最後に<div id="event">として表示させます。

<div id="event"></div>
<script src="{{ asset('js/app.js')}}"></script>
</body>

動作確認

初期状態

左下に初期stateが表示されています。

Event発火状態

Public, Privateイベントを発火させると値が適宜反映されます。

以上です。

関連

React Native版はこちら。