Laavel Broadcasting(Echo) 및 React 협력

여기 기사.의 계속.
Laavel의 사전 설정 환경이 React인 것으로 가정합니다.

php artisan preset react
npm install
npm run dev

이루어지다

Event.js 만들기

다음은 이벤트입니다.제작
Exmaple 이(가) 이미 있습니다.js가 존재하기 때문에 복사하고 이용합니다.
요컨대 아래와 같다.이전의 유지는 bootstrap이었다.js에 기술된 채널 (), privete () 를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에서 만든 이벤트입니다.js를 읽는 중입니다.

require('./components/Event');

welcome.blade.php(발췌문)

어쨌든welcome.blade.php에 보여 주십시오.바디의 마지막 화면에는