is-online.vue

test.vue

<template>
    <span v-if="users == this.$props.id" class="pulse-online"></span>
    <span v-else class="pulse-disconnected"></span>
</template>

<style>
    .pulse-online {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #28a745;
        box-shadow: 0 0 0 rgba(41, 167, 69, 0.2);
        animation: pulse 2s infinite;
        display: inline-flex;
        margin-right: 10px;
    }

    .pulse-disconnected {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #dee2e6;
        display: inline-flex;
        margin-right: 10px;
    }

    @-webkit-keyframes pulse {
        0% {
            -webkit-box-shadow: 0 0 0 0 rgba(41, 167, 69, 0.2);
        }
        70% {
            -webkit-box-shadow: 0 0 0 10px rgba(41, 167, 69, 0);
        }
        100% {
            -webkit-box-shadow: 0 0 0 0 rgba(41, 167, 69, 0);
        }
    }
    @keyframes pulse {
        0% {
            -moz-box-shadow: 0 0 0 0 rgba(41, 167, 69, 0.2);
            box-shadow: 0 0 0 0 rgba(41, 167, 69, 0.2);
        }
        70% {
            -moz-box-shadow: 0 0 0 10px rgba(41, 167, 69, 0);
            box-shadow: 0 0 0 10px rgba(41, 167, 69, 0);
        }
        100% {
            -moz-box-shadow: 0 0 0 0 rgba(41, 167, 69, 0);
            box-shadow: 0 0 0 0 rgba(41, 167, 69, 0);
        }
    }
</style>

<script>
    import axios from "axios"

    export default {
        name: "is-online",

        data () {
            return {
                users : [],
                interval: null,
            }
        },

        props: ['id'],

        created(){
            this.loadData()

            this.interval = setInterval(function () {
                this.loadData()
            }.bind(this), 3000)
        },

        methods: {
            loadData: function () {
                this.users = []

                axios.get('/isonline')
                    .then(response => {
                        response.data.map(item => {
                            item === this.$props.id ? this.users.push(item) : null
                        })
                    })
                    .catch(error => console.log(error))
            }
        }
    }
</script>