我正在使用带有 Vue.js 和 Laravel-echo 的 Laravel 7。我已经在我的应用程序中安装了 Laravel Echo 库npm install --save laravel-echo pusher-js，并且根据 laravel 提供的文档在资源/资产/js/bootstrap.js 文件中包含以下代码，并且我require('./bootstrap');在 app.js 和script src="{{ asset('js/app.js') }}"></script>app.blade.php 中也有。但我收到以下错误：
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>
事件：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}"
我试图删除 forceTLS: true 但仍然无法正常工作。我试图添加 window.Echo 但我收到其他错误：“TypeError：无法读取未定义的属性‘通道’”
此错误的任何解决方案？！提前感谢您的帮助！