Question

在那儿需要您的帮助，我与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);
            });
        }
    }
});

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

Answer 1

解决方案位于env文件中，

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

我必须放“ Pusher”而不是“ Log”

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

1 个答案: