Я реализую компонент обмена сообщениями Vue в моем приложении laravel.Сообщения успешно отправляются в Pusher, как видно из консоли отладки, но я три дня пытался заставить их слушать, чтобы пользователи на одном и том же частном канале могли получать сообщения.
Это приложение основано на github https://github.com/AfikDeri/Messenger-App-VueJS-and-Laravel
Я дважды проверил все ключевые области кода, в которых может быть ошибка, но не могу найти проблему.
Очистили кеш и конфигурацию в Laravel и перекомпилировали код Javascript несколько раз.Я тестирую на версии XAMPP: 7.2.12 / windows 7.
Попытался отключить брандмауэр Windows и антивирус Avast.
Сообщения принимаются в консоли отладки Pusher и такжедобавляется в базу данных через axios и отправляется обратно в отправляющее клиентское приложение и помещается в массив сообщений отправителя.Они просто не были видны получателю, и я не вижу никаких следов трансляции событий в chrome.
ChatApp.vue
<template>
<div class="chat-app">
<conversation :contact="selectedContact" :messages="messages" @new="saveNewMessage"></conversation>
<contacts-list :contacts="contacts" @selected="startConversationWith"></contacts-list>
</div>
</template>
<script>
export default{
props:{
user:{
type: Object,
required:true
}
},
data(){
return{
selectedContact: null,
messages: [],
contacts: [],
}
},
mounted(){
Echo.private(`messages.${this.user.id}`)
.listen('NewMessage', (e) => {
// console.log('Broadcast received.');
this.handleIncoming(e.message);
});
axios.get('/contacts')
.then((response) => {
console.log(response.data);
this.contacts = response.data;
});
},
methods:{
startConversationWith(contact){
axios.get(`/conversation/${contact.id}`)
.then((response) =>{
this.messages = response.data;
this.selectedContact = contact;
}
)
},
saveNewMessage(message){
this.messages.push(message);
},
handleIncoming(message) {
alert(JSON_stringify(message));
if (this.selectedContact && message.from_id == this.selectedContact.id) {
this.saveNewMessage(message);
return;
}
},
}
}
</script>
В App \ Events \ NewMessage.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 NewMessage implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $message;
public function __construct(Message $message)
{
$this->message = $message;
}
public function broadcastOn()
{
return new PrivateChannel('messages.' . $this->message->to_id);
}
public function broadcastWith()
{
$this->message->load('fromContact');
return ["message" => $this->message];
}
}
в bootstrap.js
import Echo from 'laravel-echo'
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
// key: process.env.MIX_PUSHER_APP_KEY,
//cluster: process.env.MIX_PUSHER_APP_CLUSTER,
key: '455936d5b071dd92ef25',
cluster: 'us3',
encrypted: false
});
require('./echo');
console.log(window.Echo.options);
в App / config / app.php
Illuminate\Broadcasting\BroadcastServiceProvider::class,
App\Providers\BroadcastServiceProvider::class,
// Are uncommented
в BroadcastServiceProvider
public function boot()
{
// Broadcast::routes();
/*changed this to fix a pusher auth error
only prob is it routes pusher to /home after authentication but without error */
Broadcast::routes(['middleware' => 'auth']);
require base_path('routes/channels.php');
}
в channel.php:
Broadcast::channel('messages.{$id}', function ($user, $id) {
//dd($user->id, $id);
return $user->id === (int) $id;
});
В ContactController
public function send(Request $request){
$message = new Message();
$message->from_id = auth()->user()->id;
$message->to_id = $request->contact_id;
$message->text = $request->text;
$message->conversation_id = 1;
if($message->save()) {
broadcast(new NewMessage($message));
return response()->json($message);
}
else{
return response()->json('failed');
}
В chrome> я вижу эти сообщения
Pusher : State changed : connecting -> connected with new socket ID 52.5078004
registerEventsMessage called
//I think the next error is when I refreshed the browser forcing the Vue app to reconnect.
{event: "pusher:error", data: {code: 4009, message: "Connection not authorized within timeout"}}
data: {code: 4009, message: "Connection not authorized within timeout"}
event: "pusher:error"
//This appeared initially but not when messages were sent
No callbacks on presence-chat for pusher:subscription_error
No callbacks on private-messages.14 for pusher:subscription_error
Приложение чата должно обновляться вчат-поток получателей, когда новое сообщение отправляется на их канал, но ничего не происходит.Я не вижу ошибок в консоли Chrome.Идентификаторы пользователей и имена динамических каналов отображаются правильно.
Я вижу эту ошибку, когда обновляю браузер, но после этого кажется, что сообщения работают нормально.В консоли толкателя не отображаются ошибки, и я вижу, что все сообщения там получены.
Я относительно новичок в Laravel, и Вью будет очень признательна за любую помощь или руководство по устранению неполадок.