Ошибка соединения с 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');
}
}