Ошибка соединения с WebSocket при использовании Pusher

Я пытаюсь создать приложение чата с использованием Laravel и VueJS в Pusher и Laravel Echo.

При тестировании моего приложения на панели инструментов 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');
    }
}

введите описание изображения здесь

введите описание изображения здесь

0 ответов

Другие вопросы по тегам