提问者:小点点

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


我使用的是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

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


共1个答案

匿名用户

客户端JS中的公钥与您在应用程序中设置的公钥不同。环境文件。

我可以从客户端的屏幕截图中看到,公钥从c07d341开始,在您的“env”文件中,它被设置为:

推送器应用程序秘密=160xxxxx11af

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

您是否可能更新您的密钥,而无需使用命令重新编译您的Javascript依赖项

npm run dev

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