Vue: Is there a way to detect changes on my database laravel-CodePudding

My question is simple I'm getting data through my API, so what is the best and suitable way can I make to vueJS so whenever something changes on my database it will updated automatically to the user without the need of refreshing the page

Example:

The user enter my website and see that the name of the first user is Alex at that time Alex changed his name to Jone and it got changed on the database how will I make vueJS automatically update the page for the first user that he is seeing the name of Alex

this is my code:

<template>
<div class="w-50">
    <table class="table ">
        <thead>
        <tr>
            <th scope="col"></th>
            <th scope="col"></th>
        </tr>
        </thead>
        <tbody>
            <tr v-for="user in users" v-bind:key="user.UID">
                <td>{{ user.name }}</td>
                <td>{{ user.timer }}</td>
            </tr>
        </tbody>
    </table>
</div>
</template>

<script>
    export default {
        data() {
            return {
                users: [],
                user: {
                    UID: '',
                    isActive: ''
                }
            };
        },
        mounted() {
            axios.get('/Myusers')
                .then(res => {
                    this.name = res.data;
                    console.log(res.data);
                })
        }
    }
</script>

What is the best way to make VueJS observing or watching the database for anychange without stressing the server?

CodePudding user response：

I suggest using WebSockets if you need real-time communication between your API and your front-end App by implementing broadcasting events, but be careful:

If you choose an Open Source Alternative such as laravel-websockets you will be serving a WS server that uses about 400Mb of RAM. This package implements statistics and a debug dashboard that overloads your server. In addition, the implementation is not easy: you will face some issues with SSL when you deploy to production and many headaches while trying to connect your front-end App to your socket.

I assume that most of your database actions are critical and you don't want to face a missing communication between your API and your front-end App, therefore you will need to make use of queues to be sure that broadcasting was correctly done or, in case it wasn't, a retry was attempted.

Saying that, you have to be aware that you will need workers for processing queues which will consume some server RAM depending on how many workers you have.

As per my experience, a small DigitalOcean droplet (1CPU 1GB RAM) wasn't enough for my API, which was insane since there are no complex algorithms at all.

Finally, I decided to use pusher-channels which has a free plan that may be enough for your purposes too. Integration was so easy and I've decreased the server stressing significantly.

IMO, you can implement laravel-websockets but taking care about server specs, or just use the suggested laravel way with pusher.