使用Pusher的WebSocket连接错误

Question

我正在尝试在Pusher和Laravel Echo中使用Laravel和VueJS创建聊天应用程序。

在Pusher仪表板上测试我的应用程序时，我能够从名为send的方法中接收数据，并将其清楚地看到在仪表板中，但是由于某种原因，另一方面，在方法/视图称为chat，出现以下错误，并且控制台上未收到任何内容：

  

WebSocket连接到'wss：//ws-mt1.pusher.com/app/bc18994952b4db21f2cb？protocol = 7＆client = js＆version = 4.3.0＆flash = false'失败：无效的帧头

有什么我想念的吗？

app.js：

require('./bootstrap');

window.Vue = require('vue');

import Vue from 'vue'
import VueChatScroll from 'vue-chat-scroll'
Vue.use(VueChatScroll)

Vue.component('message', require('./components/message.vue'));

const app = new Vue({
    el: '#app',
    data: {
        message: '',
        chat:{
            message:[]
        }
    },

    methods:{
        send(){
            if(this.message.length != 0) {
                this.chat.message.push(this.message);
                this.message = '';
            }
        }
    },

    mounted(){
        Echo.private('chat')
            .listen('ChatEvent', (e) => {
                console.log(e);
            });
    }
});

channels.php：

<?php

Broadcast::channel('App.User.{id}', function ($user, $id) {
    return (int) $user->id === (int) $id;
});

Broadcast::channel('chat',function(){
    return true;
});

web.php

<?php

Route::get('/', function () {
    return view('welcome');
});

Route::get('chat','ChatController@chat')->middleware('auth');
Route::get('send','ChatController@send');

Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');

ChatController.php

<?php

namespace App\Http\Controllers;

use App\User;
use App\Events\ChatEvent;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class ChatController extends Controller
{
    public function  chat(){
        return view('chat');
    }

//    public function send(request $request){
//        $user = User::find(Auth::id());
//        event(new ChatEvent($request->message,$user));
//    }

    public function send(){
        $message = 'I am a message';
        $user = User::find(Auth::id());
        event(new ChatEvent($message,$user));
    }
}

ChatEvent.php

<?php

namespace App\Events;

use App\User;
use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class ChatEvent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;
    public $user;

    public function __construct($message,User $user)
    {
        $this->message = $message;
        $this->user = $user->name;
    }

    public function broadcastOn()
    {
        return new PrivateChannel('chat');
    }
}