How to use laravel echo with react js?

Question

i am creating a chatting application with pusher in laravel and using react j s for front-end.now when i use Echo.channel in react js it shows channel is not defined.how to solve this problem or any alternative way to do this???

this is in my App.js:

import Echo from 'laravel-echo'

window.Pusher = require('pusher-js');

window.Echo = new Echo({ broadcaster: 'pusher', key: process.env.MIX_PUSHER_APP_KEY, cluster: process.env.MIX_PUSHER_APP_CLUSTER, forceTLS: true });

and this is in my react js chatUi :

listen = () => {

    window.Echo.channel('my_channel');
    channel.listen('FormSubmitted', function (data) {
        alert(JSON.stringify(data));
    });

}

Austin Jenkins · Accepted Answer · 2019-12-17 18:02:18Z

1

I ran into the same issue... In my case, I have a separate js file for my react application (resources/js/react.js) in which I am not requiring the bootstrap.js. So, I just copied the import echo into my react.js file. My entire resources/js/react.js file is below.

import Echo from 'laravel-echo'

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true
});

import Component from './react/index';

Remember to re-compile by running npm run dev

answered Dec 17, 2019 at 18:02

Austin Jenkins

3734 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

iateadonut · Accepted Answer · 2021-12-14 03:39:55Z

0

I did this from within the constructor() of the React.Component so that I could call a componenent method (pullTexts) on websocket update; it fires when the TwilioTextCreated event fires:

constructor(props) {
    super(props);

    ...

    window.Echo.channel("twiliotexts")
    .listen('TwilioTextCreated', (e) => {
        this.pullTexts();
        console.log("within reactjs component - twilio text created");
    });
}

And in my Event:

class TwilioTextCreated implements ShouldBroadcastNow
{
    ...

    public function broadcastOn()
    {
        return new Channel('twiliotexts');
    }

}

answered Dec 14, 2021 at 3:39

iateadonut

2,27824 silver badges40 bronze badges

Collectives™ on Stack Overflow

How to use laravel echo with react js?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related