CODEWITHSUNDEEP
reactjspusherlaravel-echo
Mizan Rifat
Mizan Rifat

Reputation: 54

How to use laravel echo with react js?

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));
    });

}

Upvotes: 1

Views: 5279

Answers (2)

iateadonut
iateadonut

Reputation: 2239

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');
    }

}

Upvotes: 0

Austin Jenkins
Austin Jenkins

Reputation: 373

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

Upvotes: 1

Related Questions