推送器 无法读取未定义的属性(读取"推送")

Question

我想用pusher更新用户列表。当我提交时，控制台显示此错误：在此处输入图像描述

我也得到Uncaught引用pusher.jspusher.js包含pusher的代码，并将其放在页脚中：

let teamChannel = pusher.subscribe('team-list');
teamChannel.bind('updated-team', function(data) {
app.team.push(JSON.stringify(data)); 
});

我的活动：

<?php
namespace AppEvents;
use IlluminateBroadcastingChannel;
use IlluminateBroadcastingInteractsWithSockets;
use IlluminateBroadcastingPresenceChannel;
use IlluminateBroadcastingPrivateChannel;
use IlluminateContractsBroadcastingShouldBroadcast;
use IlluminateFoundationEventsDispatchable;
use IlluminateQueueSerializesModels;
class NewParticipant implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $team;
/**
* Create a new event instance.
*
* @return void
*/
public function __construct($team)
{
$this->team = $team;
}
/**
* Get the channels the event should broadcast on.
*
* @return IlluminateBroadcastingChannel|arrays
*/
public function broadcastOn()
{
return new Channel('team-list');
}
public function broadcastAs() 
{
return 'updated-team';
}
}

js来自我的Vue组件：

<script>
export default {
data() {
return {
team: [],
}
}, 
created() {
this.fetchPlayer();
this.listenForChanges();
},
methods: {
fetchPlayer() {
console.log('test');
},
listenForChanges() {
window.Echo.channel('team-list')
.listen('updated-team', (e) => {
console.log("echo is working");
console.log("e is " + e);
})
}
},  
computed: {
teamList() {
return this.team;
}
}
}
</script>

我的控制器有这个功能：

protected function addPlayer($event, Request $request) {   
$profile = auth()->user()->profile;
$profile->participate()->syncWithoutDetaching([$event->id], false);
$team = $event->participants()->get();    
event(new NewParticipant($team));
return redirect()->route('event.show', [ 'event' => $event ]);
}

更新：我已经将我的推送代码移动到了app.js，但该应用程序仍然未定义：

const app = new Vue({
el: '#app',
});

let body = document.querySelector("body");
if(body.classList.contains('gruppo-app')) {
Pusher.logToConsole = true;

var pusher = new Pusher('mykey', {
cluster: 'myclutes'
});

let teamChannel = pusher.subscribe('team-list');
teamChannel.bind('updated-team', function(data) {
app.team.push(JSON.stringify(data)); 
});
}

Answer 1

更新：如果使用Laravel Echo，则不需要与Pusher的连接。我专注于Echo，我已经删除了这个块：

let body = document.querySelector("body");
if(body.classList.contains('gruppo-app')) {
Pusher.logToConsole = true;

var pusher = new Pusher('mykey', {
cluster: 'myclutes'
});

let teamChannel = pusher.subscribe('team-list');
teamChannel.bind('updated-team', function(data) {
app.team.push(JSON.stringify(data)); 
});
}

要正确连接Echo，请单击点必须添加到侦听功能中，如下所示：

window.Echo.channel('team-list')
.listen('.updated-team', (e) => {
console.log("echo is working");
console.log("e is " + e);
})

现在推进器工作正常。