我正在laravel应用程序中实现Vue消息传递组件。如在调试控制台中所见，消息已成功发送到Pusher，但我已经努力了三天才能让laravel收听，以便同一私有频道上的用户可以接收消息。
这是基于github上的此应用程序 https://github.com/AfikDeri/Messenger-App-VueJS-and-Laravel
我已经仔细检查了代码的所有关键区域，这些区域可能有问题，但找不到问题。
已清除Laravel中的缓存和配置，并多次重新编译了Javascript代码。我正在XAMPP版本7.2.12 / Windows 7上进行测试。
尝试关闭Windows防火墙和Avast Antivirus。
消息已在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');
}
在channels.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控制台中看到任何错误。用户ID和动态频道名称似乎正确呈现。
我在刷新浏览器时确实看到了此错误，但是之后该消息似乎正常工作。推送器控制台中未显示任何错误，我可以看到在那里收到了所有消息。
我是Laravel的新手，Vue非常感谢您提供有关故障排除的帮助或指导。
答案 0 :(得分：0)
显然缺少某些内容。 由于您正在按照教程检查问题，因此https://github.com/AfikDeri/Messenger-App-VueJS-and-Laravel/issues
答案 1 :(得分：0)
我想知道是否没有使用xampp打开正确的端口？ Pusher / echo侦听哪些端口？
C：\ Users \ Rob> netstat -a -p TCP -o -n
Active Connections
Proto Local Address Foreign Address State PID
TCP 0.0.0.0:80 0.0.0.0:0 LISTENING 2112
TCP 0.0.0.0:135 0.0.0.0:0 LISTENING 516
TCP 0.0.0.0:443 0.0.0.0:0 LISTENING 2112
TCP 0.0.0.0:445 0.0.0.0:0 LISTENING 4
TCP 0.0.0.0:3306 0.0.0.0:0 LISTENING 10832
TCP 0.0.0.0:8733 0.0.0.0:0 LISTENING 4
TCP 0.0.0.0:9007 0.0.0.0:0 LISTENING 4
TCP 0.0.0.0:27275 0.0.0.0:0 LISTENING 1568
TCP 0.0.0.0:49152 0.0.0.0:0 LISTENING 796
TCP 0.0.0.0:49153 0.0.0.0:0 LISTENING 892
TCP 0.0.0.0:49154 0.0.0.0:0 LISTENING 1088
TCP 0.0.0.0:49157 0.0.0.0:0 LISTENING 864
TCP 0.0.0.0:49158 0.0.0.0:0 LISTENING 852
TCP 0.0.0.0:49159 0.0.0.0:0 LISTENING 1100
TCP 127.0.0.1:3306 127.0.0.1:53658 TIME_WAIT 0
TCP 127.0.0.1:5354 0.0.0.0:0 LISTENING 2012
TCP 127.0.0.1:5354 127.0.0.1:49155 ESTABLISHED 2012
TCP 127.0.0.1:5354 127.0.0.1:49156 ESTABLISHED 2012
TCP 127.0.0.1:5939 0.0.0.0:0 LISTENING 2396
TCP 127.0.0.1:5939 127.0.0.1:49263 ESTABLISHED 2396
TCP 127.0.0.1:6942 0.0.0.0:0 LISTENING 7956
TCP 127.0.0.1:8000 0.0.0.0:0 LISTENING 8212
TCP 127.0.0.1:8000 127.0.0.1:53643 TIME_WAIT 0
TCP 127.0.0.1:8000 127.0.0.1:53649 TIME_WAIT 0
TCP 127.0.0.1:8000 127.0.0.1:53690 TIME_WAIT 0
TCP 127.0.0.1:8000 127.0.0.1:53691 TIME_WAIT 0
TCP 127.0.0.1:8000 127.0.0.1:53726 TIME_WAIT 0
TCP 127.0.0.1:8000 127.0.0.1:53728 ESTABLISHED 8212
TCP 127.0.0.1:8000 127.0.0.1:53733 TIME_WAIT 0
TCP 127.0.0.1:12025 0.0.0.0:0 LISTENING 1568
TCP 127.0.0.1:12110 0.0.0.0:0 LISTENING 1568
TCP 127.0.0.1:12119 0.0.0.0:0 LISTENING 1568
TCP 127.0.0.1:12143 0.0.0.0:0 LISTENING 1568
TCP 127.0.0.1:12465 0.0.0.0:0 LISTENING 1568
TCP 127.0.0.1:12563 0.0.0.0:0 LISTENING 1568
TCP 127.0.0.1:12993 0.0.0.0:0 LISTENING 1568
TCP 127.0.0.1:12995 0.0.0.0:0 LISTENING 1568
TCP 127.0.0.1:27015 0.0.0.0:0 LISTENING 1980
TCP 127.0.0.1:27275 0.0.0.0:0 LISTENING 1568
TCP 127.0.0.1:49155 127.0.0.1:5354 ESTABLISHED 1980
TCP 127.0.0.1:49156 127.0.0.1:5354 ESTABLISHED 1980
TCP 127.0.0.1:49263 127.0.0.1:5939 ESTABLISHED 1684
TCP 127.0.0.1:49269 127.0.0.1:49270 ESTABLISHED 1684
TCP 127.0.0.1:49270 127.0.0.1:49269 ESTABLISHED 1684
TCP 127.0.0.1:49541 127.0.0.1:49542 ESTABLISHED 7956
TCP 127.0.0.1:49542 127.0.0.1:49541 ESTABLISHED 7956
TCP 127.0.0.1:49543 127.0.0.1:49544 ESTABLISHED 7956
TCP 127.0.0.1:49544 127.0.0.1:49543 ESTABLISHED 7956
TCP 127.0.0.1:53644 127.0.0.1:8000 TIME_WAIT 0
TCP 127.0.0.1:53650 127.0.0.1:8000 TIME_WAIT 0
TCP 127.0.0.1:53657 127.0.0.1:3306 TIME_WAIT 0
TCP 127.0.0.1:53658 127.0.0.1:3306 TIME_WAIT 0
TCP 127.0.0.1:53692 127.0.0.1:8000 TIME_WAIT 0
TCP 127.0.0.1:53693 127.0.0.1:8000 TIME_WAIT 0
TCP 127.0.0.1:53728 127.0.0.1:8000 ESTABLISHED 7764
TCP 127.0.0.1:53735 127.0.0.1:8000 TIME_WAIT 0
TCP 127.0.0.1:53760 127.0.0.1:9229 SYN_SENT 5912
TCP 127.0.0.1:63342 0.0.0.0:0 LISTENING 7956
TCP 192.168.1.116:139 0.0.0.0:0 LISTENING 4
TCP 192.168.1.116:49236 77.234.41.235:80 ESTABLISHED 1568
TCP 192.168.1.116:50809 66.135.205.94:443 ESTABLISHED 1136
TCP 192.168.1.116:53013 23.35.181.178:443 ESTABLISHED 7764
TCP 192.168.1.116:53025 54.186.190.8:443 ESTABLISHED 7764
TCP 192.168.1.116:53456 192.184.69.164:443 CLOSE_WAIT 7764
TCP 192.168.1.116:53460 23.220.197.16:443 ESTABLISHED 7764
TCP 192.168.1.116:53461 151.101.65.69:443 ESTABLISHED 7764
TCP 192.168.1.116:53463 104.16.31.34:443 ESTABLISHED 7764
TCP 192.168.1.116:53475 192.184.69.180:443 CLOSE_WAIT 7764
TCP 192.168.1.116:53476 172.217.1.226:443 ESTABLISHED 7764
TCP 192.168.1.116:53481 77.234.41.223:443 CLOSE_WAIT 7764
TCP 192.168.1.116:53487 172.217.9.2:443 ESTABLISHED 7764
TCP 192.168.1.116:53504 108.177.9.157:443 ESTABLISHED 7764
TCP 192.168.1.116:53506 172.217.14.162:443 ESTABLISHED 7764
TCP 192.168.1.116:53511 192.184.69.150:443 CLOSE_WAIT 7764
TCP 192.168.1.116:53627 213.227.173.132:5938 ESTABLISHED 2396
TCP 192.168.1.116:53631 23.52.96.18:80 TIME_WAIT 0
TCP 192.168.1.116:53722 34.222.204.130:80 ESTABLISHED 7764
TCP 192.168.1.116:53727 34.222.204.130:80 ESTABLISHED 7764
TCP 192.168.1.116:53742 77.234.41.53:80 TIME_WAIT 0
TCP 192.168.1.116:53744 77.234.41.56:80 TIME_WAIT 0