Pusher 无法读取未定义的属性（读取 'push'）

Question

我想用 pusher 更新用户列表。当我提交控制台时显示此错误： enter image description here

关于 pusher.js 我也得到了 Uncaught pusher.js 包含推送器代码，它位于页脚中：

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

我的活动：

<?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;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

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 \Illuminate\Broadcasting\Channel|arrays
     */
    public function broadcastOn()
    {
        return new Channel('team-list');
    }

    public function broadcastAs() 
    {
        return 'updated-team';
    }
}

来自我的 Vue 组件的 js：

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

现在 Pusher 正常工作了。

Pusher 无法读取未定义的属性（读取 'push'）

Pusher Cannot read properties of undefined (reading 'push')

javascript

laravel

vue.js

pusher

laravel-echo