create and joining websocket via laravel-echo in react app

Question

i am using laravel-echo to create and use websocket in my react-app. its easy to use laravel-echo in a page. but when need to use in several pages, it make several channel and subscribe several time. how to make a single channel and join ones in several pages ? with props or something ...

i try via props like below but there was some error:

parent Component:

import Echo from 'laravel-echo';

const token = window.localStorage.getItem('access_token');


const options = {
    broadcaster: 'pusher',
    key: '7890165486',
    wsHost: '45.149.78.4',
    wsPort: 6001,
    disableStats: true,
    authEndpoint: 'http://xxx.xxx.net/broadcasting/auth',
    auth: {
        headers: {
            Authorization: `Bearer ${token}`,
            Accept: 'application/json'
        }
    }
};

const echo = new Echo(options);

Class ParentComponnet extends Component {

componentDidMount() {
    this.EchoJoin();
}

EchoJoin() {
    let ch = echo.join(`chat.${this.props.token}`);
    ch
        .here((user) => {
            console.log('all online use', user);
        })
        .joining((user) => {
            alert(user.id + ' New Join the Channel');
        })
        .leaving((user) => {
            alert(user.id + ' Leave the Channel');
        })
        .listen('MessageSent', (e) => {
            console.log('>>>>>>>>>>>>', e);
        });
}
<ChildComponent ch={this.echo} />
}

and this is child Component code :

    componentDidMount() {
    this.props.ch
        .here((user) => {
            console.log('all online use', user);
        })
        .joining((user) => {
            alert(user.id + ' New Join the Channel');
        })
        .leaving((user) => {
            alert(user.id + ' Leave the Channel');
        })
        .listen('MessageSent', (e) => {
            console.log('>>>>>>>>>>>>', e);
        });

    }

i got this error

ch is undefined. Which means it was never passed down as a prop. Show your code when you call the component that you are using ch and getting an error. — Doug Watkins, Aug 10 '20 at 19:46
thank you dear Doug Watkins. i edit the question so it show the code in clean way — mansour lotfi, Aug 12 '20 at 11:41

Doug Watkins · Answer 1 · 2020-08-12T17:07:53.503

2

Yes, in a way you answered your own question. You need a singleton here, so I would initialize the connection in a root container, and then pass down what you need as a prop to each screen you need it in.

Let me know if you need any clarification on that.

EDIT: Looks like your connection is called ch, so you would just need to pass that down to your children as a prop. Assuming that you have your code in one of your high level root components/containers - such as App.js - you would pass it down like such.

<View>
  <SomeChildComponent ch={this.ch} />
</View>

EDIT: You are doing this to render your child component:

<ChildComponent ch={this.echo} />

But it should be this:

<ChildComponent ch={this.ch} />

edited Aug 12 '20 at 17:07

answered Aug 04 '20 at 16:07

Doug Watkins

1,387
12
19

thank you for your response . i try to do it via props but unsuccessful . could you please show the way so i implement it? – mansour lotfi Aug 04 '20 at 17:31
i edited the question and added more details to it . could you please help me? – mansour lotfi Aug 10 '20 at 12:50

create and joining websocket via laravel-echo in react app

1 Answers1