订阅身份验证数据中的密钥无效，类型：websocketError

Posted 2023-02-22

【中文标题】订阅身份验证数据中的密钥无效，类型：websocketError

【英文标题】：Invalid key in subscription auth data , type : websocketError

【发布时间】：2020-01-04 18:25:37

【问题描述】：

我正在使用 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、集群）。我阅读了所有其他问题，这些问题已经在 *** 中提到了相同的问题，但没有一个问题有相关的解决方案或答案。如果有人远程连接并检查我的笔记本电脑，那么再次来这里寻求帮助。

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];
    

channels.php

Broadcast::channel('messages.id', function ($user, $id) 
  return $user->id === (int) $id;
);

broadcasting.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

推送器仪表板的错误日志中没有错误。

【参考方案1】：

您的客户端 JS 中的公钥与您在 .env 文件中设置的公钥不同。

我可以从客户端的屏幕截图中看到，公钥以 c07d341 开头，在您的 'env 文件中设置为：

PUSHER_APP_SECRET=160xxxxxxxx11af

最后，您收到的错误消息与公钥不匹配有关。

您是否可能在不使用命令重新编译 javascript 依赖项的情况下更新了您的密钥

npm run dev

如果这不能解决问题，您可能还需要检查您是否没有在其他位置硬编码不正确的公钥

【讨论】：

啊，是的，我正在运行 npm run watch 命令，不知何故它没有编译密钥，当我执行 npm run dev 并清除所有 laravel 缓存时，然后公钥更改，但我仍然有订阅错误，我可以在几分钟内解决。在运行 npm run production 并清除所有缓存后，这在生产环境中运行良好。非常感谢克里斯。

太棒了！我也有npm run watch，但npm run dev 确实更新了我的依赖项。