php - 订阅身份验证数据中的密钥无效,类型:websocketError
问题描述
我正在使用 Laravel 5.8.*、laravel echo、pusher 和 vuejs 进行私人聊天。
尝试使用 vuejs 作为前端来监听广播事件,但在推送器的回调中没有收到数据。我可以看到发送到推送器但接收为空的私人频道和数据。当我连接到 pusher 时,我在控制台中看到以下消息:
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 中提到了相同的问题,但没有一个问题有相关的解决方案或答案。因此,如果有人远程连接并检查我的笔记本电脑,那么再次来这里寻求帮助。
ChatApp.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];
}
}
频道.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
});
.env
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
pusher仪表板的错误日志中没有错误。
解决方案
您的客户端 JS 中的公钥与您在 .env 文件中设置的公钥不同。
我可以从客户端的屏幕截图中看到,公钥以 c07d341 开头,在您的 'env 文件中设置为:
PUSHER_APP_SECRET=160xxxxxxxx11af
最后,您收到的错误消息与公钥不匹配有关。
您是否可能在不使用命令重新编译 Javascript 依赖项的情况下更新了密钥
npm run dev
如果这不能解决问题,您可能还需要检查您是否没有在另一个位置硬编码不正确的公钥
推荐阅读
- java - 如何在 Java 中创建 SqlQuerySpec 以检索具有给定 ID 的文档列表(where-in 子句)
- swiftui - SwiftUI:在 CarouselView 中实现定时器
- apache-kafka-connect - 无法将主题的数据反序列化到 avro 接收器连接器
- android - 开始新活动并清除除开始活动外的所有活动
- python - 插入最大堆时遇到问题
- javascript - 延迟脚本与预加载链接有何不同?
- .htaccess - .httaccess 301 使用路径通配符重定向子域
- css - CSS Flexbox:什么是“假设的交叉大小”(算法/定义)?
- sql - 选择所有具有分组依据的列而不单独选择所有列
- java - spring 导入大型 csv 文件