我使用的是Laravel 5.8。*,laravel echo、pusher和vuejs进行私人聊天。
尝试使用vuejs作为前端监听广播编辑的事件,但没有从推送者的回调中收到数据。我可以看到私人通道和数据发送到推进器,但收到空。当我连接到推进器时,我在控制台上看到以下消息:
Pusher : Event sent : {"event":"pusher:subscribe","data":{"auth":"460f6d3e4959b66a186a:3a759e55e46fc62d0188461344828ee4266edba8f1c0f5a5fd9743beb086d8cf","channel":"private-messages.1"}}
Pusher : Event recd : {"event":"pusher:error","data":{"code":null,"message":"Invalid key in subscription auth data: '460f6d3e4959b66a186a'"}}
Pusher : Error : {"type":"WebSocketError","error":{"type":"PusherError","data":{"code":null,"message":"Invalid key in subscription auth data: '460f6d3e4959b66a186a'"}}}
我尝试了所有的方法,但无法找到这个订阅错误的原因。我已经正确设置了所有的推送数据(通道名称,密钥,秘密ID,应用程序ID,集群)。我阅读了stackoverflow中已经提到相同问题的所有其他问题,但没有一个问题有相关的解决方案或答案。所以再次来到这里寻求帮助,如果有人远程连接并检查我的笔记本电脑。
聊天应用。vue
<template>
<div class="chat-app">
<Conversation :contact="selectedContact" :messages="messages" @new="saveNewMessage"/>
<ContactsList :contacts="contacts" @selected="startConversationWith"/>
</div>
</template>
<script>
import Conversation from './Conversation';
import ContactsList from './ContactsList';
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('listening NewMessage');
this.handleIncoming(e.message);
});
axios.get('/contacts')
.then((response)=>{
this.contacts = response.data;
});
},
methods:{
startConversationWith(contact){
this.updateUnreadCount(contact, true);
axios.get(`/conversation/${contact.id}`)
.then((response) => {
this.messages = response.data;
this.selectedContact = contact;
})
},
saveNewMessage(message){
this.messages.push(message);
},
handleIncoming(message){
if (this.selectedContact && message.from == this.selectedContact.id) {
this.saveNewMessage(message);
return;
}
this.updateUnreadCount(message.from_contact, false);
},
updateUnreadCount(contact, reset){
this.contacts = this.contacts.map((single)=>{
if (single.id !== contact.id) {
return single;
}
if (reset)
single.unread = 0;
else
single.unread += 1;
return single;
})
}
},
components: {Conversation, ContactsList}
}
</script>
<style lang="scss" scoped>
.chat-app{
display:flex;
}
</style>
事件
<?php
namespace App\Events;
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;
use App\Message;
class NewMessage implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $message;
/**
* Create a new event instance.
*
* @return void
*/
public function __construct(Message $message)
{
$this->message = $message;
}
/**
* Get the channels the event should broadcast on.
*
* @return \Illuminate\Broadcasting\Channel|array
*/
public function broadcastOn()
{
return new PrivateChannel('messages.'.$this->message->to);
}
public function broadcastWith(){
$this->message->load('fromContact');
return ["message" => $this->message];
}
}
channels.php
Broadcast::channel('messages.{id}', function ($user, $id) {
return $user->id === (int) $id;
});
广播。php
'pusher' => [
'driver' => 'pusher',
'key' => env('PUSHER_APP_KEY'),
'secret' => env('PUSHER_APP_SECRET'),
'app_id' => env('PUSHER_APP_ID'),
'options' => [
'cluster' => env('PUSHER_APP_CLUSTER'),
'encrypted' => true,
],
],
与laravel echo的连接
window.Echo = new Echo({
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
cluster: process.env.MIX_PUSHER_APP_CLUSTER,
encrypted: true
});
.环境
PUSHER_APP_ID=xxxx
PUSHER_APP_KEY=dbxxxxxxxb29
PUSHER_APP_SECRET=160xxxxxxxx11af
PUSHER_APP_CLUSTER=ap2
MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
BROADCAST_DRIVER=pusher
CACHE_DRIVER=file
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120
推进器仪表板的错误日志中没有错误。
客户端JS中的公钥与您在应用程序中设置的公钥不同。环境文件。
我可以从客户端的屏幕截图中看到,公钥从c07d341开始,在您的“env”文件中,它被设置为:
推送器应用程序秘密=160xxxxx11af
最后,您收到的错误消息与公钥不匹配有关。
您是否可能更新您的密钥,而无需使用命令重新编译您的Javascript依赖项
npm run dev
如果这不能解决问题,您可能还需要检查您是否在其他位置硬编码了不正确的公钥