Laravel 5.6
Я пытаюсь создать приложение в реальном времени.Я следовал руководству, найденному в Google, но потом кажется, что оно не работает.Я не могу понять, почему, потому что это не показывает ошибку в консоли.
в config / app.php
App\Providers\AppServiceProvider::class,
App\Providers\AuthServiceProvider::class,
App\Providers\BroadcastServiceProvider::class,
App\Providers\EventServiceProvider::class,
App\Providers\RouteServiceProvider::class,
это мое событие
<?php
namespace App\Events;
use App\Message;
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 MessageSent implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $message;
/**
* Create a new event instance.
*
* @return void
*/
public function __construct(Message $message)
{
$this->message = $message;
// $this->dontBroadcastToCurrentUser();
//
}
/**
* Get the channels the event should broadcast on.
*
* @return \Illuminate\Broadcasting\Channel|array
*/
public function broadcastOn()
{
return new Channel('chat-channel');
}
}
Вот мой контроллер
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Message;
use App\User;
use Auth;
use App\Events\MessageSent;
class MessageController extends Controller
{
public function index()
{
return view('chat');
}
public function getChat()
{
return Message::with('user')->get();
}
public function addChat()
{
$user = Auth::user();
$message = $user->messages()->create(['message' => request('message')]);
event(new MessageSent($message));
return $message->toJson();
}
}
в нижней части моего bootstrap.js
import Echo from 'laravel-echo'
window.io = require('socket.io-client');
window.Echo = new Echo({
broadcaster: 'socket.io',
host: window.location.hostname + ':6001'
});
мой laravel-echo-server.json
{
"authHost": "http://localhost",
"authEndpoint": "/broadcasting/auth",
"clients": [
{
"appId": "1461f99e6c0bcaa4",
"key": "3dc5701da38d9c3346141db0c8e3f0ad"
}
],
"database": "redis",
"databaseConfig": {
"redis": {},
"sqlite": {
"databasePath": "/database/laravel-echo-server.sqlite"
}
},
"devMode": true,
"host": null,
"port": "6001",
"protocol": "http",
"socketio": {},
"sslCertPath": "",
"sslKeyPath": "",
"sslCertChainPath": "",
"sslPassphrase": "",
"apiOriginAllow": {
"allowCors": false,
"allowOrigin": "",
"allowMethods": "",
"allowHeaders": ""
}
}
my ChatComponent.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card card-default">
<div class="card-header">Chatroom</div>
<div class="card-body">
<div class="chat-log" v-for="message in messages">
<strong>{{message.user.name}}</strong>
<br>
- {{message.message}}
</div>
<div class="text-center" v-show="messages.length === 0">
No messages yet!
</div>
</div>
<div class="card-footer">
<div class="chat-composer">
<input type="text" name="" class="form-control"
placeholder="Start typing..." v-model="messageText"
@keydown.enter="sendMessage()">
<button class="btn btn-primary"
@click="sendMessage()">Send</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
this.getMessages();
this.listen();
},
data() {
return {
messages: [],
messageText: ''
}
},
methods: {
getMessages() {
axios.get('/getChat').then((response) => {
this.messages = response.data;
});
},
sendMessage() {
let data = {
message: this.messageText,
user: {
name: $('#navbarDropdown').text()
}
}
axios.post('/sendChat', data).then((response) => {
this.messages.push(data);
this.messageText = '';
});
},
listen() {
Echo.channel('chat-channel').listen('.MessageSent', (message) =>
{
this.messages.push(message);
// console.log(message);
});
}
}
}
</script>
<style>
.chat-composer {
display: flex;
}
</style>
, если кто-то знает решение этой проблемы.Пожалуйста помоги.Большое вам спасибо!