订阅授权数据中的密钥无效，类型：websocketError

Question

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

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

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

Answer 1

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

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

PUSHER_APP_SECRET=160xxxxxxxx11af

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

您是否可能在不使用命令

重新编译您的 Javascript 依赖项的情况下更新了您的密钥

npm run dev

如果这不能解决问题，您可能还需要检查您是否在另一个位置硬编码了不正确的 public 密钥

订阅授权数据中的密钥无效，类型：websocketError

Invalid key in subscription auth data , type : websocketError

php

laravel

pusher

vue.js

laravel-echo