I am working with Laravel 7 with Vue.js and Laravel-echo.
I already installed the Laravel Echo library using npm install --save laravel-echo pusher-js in my application and also included the following code in resources/assets/js/bootstrap.js file as per the laravel provide documentation and also i have require('./bootstrap'); in app.js and script src="{{ asset('js/app.js') }}"></script> in app.blade.php.
But i am receiving the below error:
bootstrap.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
});
show.blade.php
<script>
const app = new Vue({
el: '#app',
data: {
comments: {},
commentBox: '',
post: {!! $post->toJson() !!},
user: {!! Auth::check() ? Auth::user()->toJson() : null !!}
},
created: function() {
this.listen();
},
methods: {
listen: function() {
Echo.channel('post.'+this.post.id)
.listen('NewComment', (comment) => {
// this.comments.unshift(comment);
console.log('yessss');
})
}
}
});
</script>
Event: NewComment.php
<?php
namespace App\Events;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast; //for queueing
use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow; //for no queueing
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
use App\Comment;
class NewComment implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $comment;
/**
* Create a new event instance.
*
* @return void
*/
public function __construct(Comment $comment)
{
$this->comment = $comment;
}
/**
* Get the channels the event should broadcast on.
*
* @return \Illuminate\Broadcasting\Channel|array
*/
public function broadcastOn()
{
return new Channel('post.'.$this->comment->post->id);
}
}
.env:
PUSHER_APP_ID=xxxxxx
PUSHER_APP_KEY=xxxxxxxxxxxxxxxxxx
PUSHER_APP_SECRET=xxxxxxxxxxxxx
PUSHER_APP_CLUSTER=xxx
MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
I tried to remove forceTLS: true but still not working. I tried to add window.Echo but i received other error: "TypeError: Cannot read property 'channel' of undefined"
Any Solution for this Error?! Thank you in advance for helping!
