推送聊天中的消息不会立即刷新

Posted 2023-02-22

【中文标题】推送聊天中的消息不会立即刷新

【英文标题】：Message in pusher chat are not refreshing instantly

【发布时间】：2019-09-30 09:37:41

【问题描述】：

我需要你的帮助，我正在与 pusher、vue.js 和 laravel 聊天。一切都运行良好，除了一件事，当我收到一条消息时它不会立即显示，我必须刷新页面才能看到这条消息，所以这有点烦人。任何帮助都会非常感激。这是我遵循的教程：https://pusher.com/tutorials/chat-laravel

这是我在 app.blade.js 中的聊天内容：

<div id="app" class="container-chat">

                    <div class="row">
                        <div class="col-md-12 col-md-offset-2">
                            <div class="col-md-12 col-md-offset-2">
                                <div class="panel-body panel-content" id="mess_cont" :userid="Auth::user()->id">

                                    <chat-messages id="mess" :messages="messages" :currentuserid="Auth::user()->id"></chat-messages>
                                </div>
                                <div class="panel-footer">
                                    <chat-form
                                            v-on:messagesent="addMessage"
                                            :user=" Auth::user() "
                                    ></chat-form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

这是我的 ChatMessages.vue：

<template>
    <ul class="chat messages" >
        <li class="clearfix list-group-item" v-for="message in messages" v-bind:class="
                    classForUser: (message.user.id === currentuserid),
                    classForNotUser: (message.user.id !== currentuserid)" >

            <div class="chat-body clearfix" >
                <div class="header">
                    <strong class="primary-font"
                            v-bind:class="
                                classForAuthorSameAsUser: (message.user.id === currentuserid),
                                classForAuthorDiffThanUser: (message.user.id !== currentuserid)
                            ">
                         message.user.firstName 
                         message.user.lastName
                        :
                    </strong>
                     message.human_readable_time
                </div>
                <p>

                     message.message 
                </p>
            </div>
        </li>
    </ul>
</template>

<script>
    export default 
        props: ['messages','currentuserid']
    ;

</script>

<style scoped>
    .classForAuthorSameAsUser 
        color: #2FB3FF ;
    
    .classForAuthorDiffThanUser 
        color: black;
    
    .classForUser
        width: 70%;
        left: 30%;
    
    .classForNotUser
        width: 70%;
    
</style>

这是 ChatForm.vue：

<template>
    <form @submit.prevent="sendMessage">
        <div class="input-group" >

            <input id="btn-input" type="text" name="message"  class="form-control input-sm"  placeholder="Ecrire..." v-model="newMessage" required>


            <span class="input-group-btn">
            <button class="btn btn-primary btn-sm" type="submit" id="btn-chat">
                &#10003
            </button>
        </span>
        </div>
    </form>
</template>

<script>


    export default 
        props: ['user'],

        data() 
            return 
                newMessage: '',
            
        ,

        methods: 
            sendMessage() 
                this.$emit('messagesent', 
                    user: this.user,
                    message: this.newMessage
                );

                setTimeout(function() 
                    const messages = document.getElementById('mess_cont');

                    messages.scrollTop = messages.scrollHeight;
                    , 100);
                this.newMessage = '';

            

        
    


</script>

这是我的 app.js

/**
 * First we will load all of this project's javascript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');
window.Vue = require('vue');



import Vue from 'vue'
Vue.component('chat-messages', require('./components/ChatMessages.vue').default);
Vue.component('chat-form', require('./components/ChatForm.vue').default);

const app = new Vue(
    el: '#app',

    data: 
        messages: []
    ,

    created() 
        this.fetchMessages();
        Echo.private('chat')
            .listen('MessageSent', (e) => 
                this.messages.push(
                    message: e.message.message,
                    user: e.user
                );
            );
    ,

    methods: 

        fetchMessages() 
            axios.get('/messages').then(response => 
                this.messages = response.data;
            );
        ,

        addMessage(message) 
            this.messages.push(message);

            axios.post('/messages', message).then(response => 
                console.log(response.data);
            );
        
    
);

如果您需要更多信息，请询问我只是不想发送无用代码的垃圾邮件。谢谢

【参考方案1】：

解决方案在 env 文件中，

BROADCAST_DRIVER=pusher
CACHE_DRIVER=file
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

我不得不用“Pusher”而不是“Log”

【讨论】：

nahhhhhhhhh 这一定是更多的东西......