活跃用户未显示在实时聊天应用程序中

Question

我正在按照本指南 https://www.codechief.org/article/real-time-chat-app-with-laravel-6-vue-js-and-pusher#gsc.tab=0 在 Laravel 和 Vue 中创建实时聊天应用程序。 但它不显示活跃用户列表。

这个跨度也永远不会显示

<span class="text-muted" v-if="activeUser" >{{ activeUser.first_name }}` is typing...</span>

此外，此方法无法正常工作，因为在控制台日志中它显示未定义正在键入...

    sendTypingEvent() {
                    Echo.join('chat')
                        .whisper('typing', this.user);
                    console.log(this.user.fist_name + ' is typing now')
}

而且它实际上不是实时的，因为我只有在重新加载页面时才会看到新消息。

这是 Vue 组件

   <template>
    <div class="row">

        <div class="col-8">
            <div class="card card-default">
                <div class="card-header">Messages</div>
                <div class="card-body p-0">
                    <ul class="list-unstyled" style="height:300px; overflow-y:scroll" v-chat-scroll>
                        <li class="p-2" v-for="(message, index) in messages" :key="index" >
                            <strong>{{ message.user.first_name }}</strong>
                            {{ message.message }}
                        </li>
                    </ul>
                </div>

                <input
                    @keydown="sendTypingEvent"
                    @keyup.enter="sendMessage"
                    v-model="newMessage"
                    type="text"
                    name="message"
                    placeholder="Enter your message..."
                    class="form-control">
            </div>
            <span class="text-muted" v-if="activeUser" >{{ activeUser.first_name }} is typing...</span>
        </div>

        <div class="col-4">
            <div class="card card-default">
                <div class="card-header">Active Users</div>
                <div class="card-body">
                    <ul>
                        <li class="py-2" v-for="(user, index) in users" :key="index">
                            {{ user.first_name }}
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        props:['user'],
        data() {
            return {
                messages: [],
                newMessage: '',
                users:[],
                activeUser: false,
                typingTimer: false,
            }
        },
        created() {
            this.fetchMessages();
            Echo.join('chat')
                .here(user => {
                    this.users = user;
                })
                .joining(user => {
                    this.users.push(user);
                })
                .leaving(user => {
                    this.users = this.users.filter(u => u.id != user.id);
                })
                .listen('ChatEvent',(event) => {
                    this.messages.push(event.chat);
                })
                .listenForWhisper('typing', user => {
                    this.activeUser = user;
                    if(this.typingTimer) {
                        clearTimeout(this.typingTimer);
                    }
                    this.typingTimer = setTimeout(() => {
                        this.activeUser = false;
                    }, 1000);
                })
        },
        methods: {
            fetchMessages() {
                axios.get('messages').then(response => {
                    this.messages = response.data;
                })
            },
            sendMessage() {
                this.messages.push({
                    user: this.user,
                    message: this.newMessage
                });
                axios.post('messages', {message: this.newMessage});
                this.newMessage = '';
            },
            sendTypingEvent() {
                Echo.join('chat')
                    .whisper('typing', this.user);
                console.log(this.user.fist_name + ' is typing now')
            }
        }
    }
</script>

Answer 1

“此外，此方法无法正常工作，因为在控制台日志中显示未定义正在键入...”

我假设您在 console.log 中打错字了，您的意思可能是：

this.user.first_name

关于你的“实时”问题，我怀疑这可能是因为你的广播事件正在排队，所以你可能想要使用 ShouldBroadcastNow 而不是 ShouldBroadcast