websocket.vue

<template>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="form-group">
                <input class="form-control" placeholder="enter device public key" :type="passwordFieldType" v-model="public_key" />

                <br>

                <input class="form-control" placeholder="enter device private key" :type="passwordFieldType" v-model="private_key"/>

                <br>

                <button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center" type="password" @click="switchVisibility">show / hide</button>

                <button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center" @click="socketConnect">Connect</button>

                <br />
                <div class="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto">
                    <div class="inline-block min-w-full shadow rounded-lg overflow-hidden">
                        <table class="min-w-full leading-normal socket_table">
                            <thead>
                                <tr>
                                    <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                        Device ID
                                    </th>
                                    <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                        Payload
                                    </th>
                                    <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                        Created At
                                    </th>
                                </tr>
                            </thead>
                            <tbody id="device_data">
                                <tr v-for="(data) in socket_data.slice().reverse()" :key="data.id">
                                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm w-2/5">
                                        {{ data.device_id }}
                                    </td>
                                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm w-2/5">
                                          <tree-view :data="data.payload" :options="{maxDepth: 10}"></tree-view>
                                    </td>
                                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm w-2/5">
                                        {{ data.created_at }}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-md-4">
            <Lightbulb :isOn="light_is_on"/>
            <div>
                <RockerSwitch :size="0.9" :value="light_is_on" @change="isOn => (light_is_on = isOn)"/>
            </div>
        </div>
        <div class="col-md-4">
            <vue-thermometer
                :value="temperature_value"
                :min="-20"
                :max="25"
            />
        </div>
        <div class="col-md-4">
            <heart
                :bpm_value="bpm_value"
                :heart_stop="heart_stop"
            />
        </div>
    </div>
</div>
</template>
<style >
    .socket_table{
        max-height: 440px;
        overflow: auto;
        display: inline-block;
    }
</style>
<script>
import TreeView from "vue-json-tree-view";
import Notifications from 'vue-notification'
Vue.use(Notifications)
Vue.use(TreeView)
import Lightbulb from "./Lightbulb";
import heart from "./heart";
import RockerSwitch from "vue-rocker-switch";
import "vue-rocker-switch/dist/vue-rocker-switch.css";
import VueThermometer from 'vuejs-thermometer'
import Echo from "laravel-echo";
import Heart from './heart.vue';
window.Pusher = require("pusher-js");

export default {
    components: {
    RockerSwitch,
    Lightbulb,
    Heart
    },
    data() {
        return {
            light_is_on: false,
            bpm_value : 0,
            heart_stop : true,
            temperature_value : 0,
            socket_data: [],
            device_token: null,
            device_id: null,
            authorization_state: false,
            public_key: "",
            private_key: "",
            passwordFieldType: 'password',
        };
    },
    watch: {
        //
    },
    computed: {
        socket_data: function() {
            return this.items.sort((a, b) => new Date(a.created_at) - new Date(b.created_at))
        }
    },
    methods: {
        socketConnect: function () {
            this.authorize();
        },
        switchVisibility() {
            this.passwordFieldType = this.passwordFieldType === 'password' ? 'text' : 'password'
        },
        clearSocketData: function () {
            this.socket_data = [];
        },
        msg: function (type = 'success', message) {
            Swal.fire({
                position: 'top-end',
                icon: type,
                showConfirmButton: false,
                timer: 1500,
                text: message
            })
        },
        authorize: function () {
            axios
                .post("/iot/v1/login", {
                    public_key: this.public_key,
                    private_key: this.private_key,
                })
                .then(({
                    data
                }) => {
                    this.device_token = data.token;
                    this.device_id = data.device_id;
                    window.localECHO = new Echo({
                        broadcaster: "pusher",
                        key: process.env.MIX_PUSHER_APP_KEY,
                        cluster: process.env.MIX_PUSHER_APP_CLUSTER,
                        forceTLS: false,
                        wsHost: window.location.hostname,
                        wsPort: 6001,
                        disableStats: true,
                        authorizer: (channel, options) => {
                            console.log(options, channel);
                            return {
                                authorize: (socketId, callback) => {
                                    axios({
                                            method: "POST",
                                            url: "/api/broadcasting/auth",
                                            headers: {
                                                Authorization: `Bearer ${this.device_token}`,
                                            },
                                            data: {
                                                socket_id: socketId,
                                                channel_name: channel.name,
                                            },
                                        })
                                        .then((response) => {
                                            console.log(response);
                                            this.msg("success", "Connected")
                                            this.authorization_state = true;
                                            callback(false, response.data);
                                        })
                                        .catch((error) => {
                                            console.log(error);
                                            this.authorization_state = false;
                                            this.msg("error", "Failed To Connect")
                                            callback(true, error);
                                        });
                                },
                            };
                        },
                    });
                    localECHO.private(`App.Device.${this.device_id}`)
                        .listen(
                            ".send_data_event",
                            (e) => {
                                Vue.notify({
                                    group: 'foretretytuytiuo',
                                    clean: true,
                                    title: "new message!!",
                                    text: "device #" + this.device_id
                                });
                                this.socket_data.push(e);
                                this.handelResposne(e)
                            }
                        );
                }).catch((error) => {
                    this.msg("error", "Failed To Connect")
                });
        },
        handelResposne : function(e){
            this.handelBulb(e)
            this.handelTemprature(e)
            this.handelHeartBeat(e)
        },
        handelBulb : function(data){
            if(this.socketPayloadContainsKey(data.payload , "light_is_on")){
                this.light_is_on = data.payload.light_is_on;
            }
        },
        handelTemprature : function(data){
            if(this.socketPayloadContainsKey(data.payload , "temperature_value")){
                this.temperature_value = data.payload.temperature_value;
            }
        },
        handelHeartBeat : function(data){
            if(this.socketPayloadContainsKey(data.payload , "bpm_value")){
                this.bpm_value = data.payload.bpm_value;
                this.bpm_value == 0 ? this.heart_stop = true : this.heart_stop = false;
            }
        },
        socketPayloadContainsKey(payload,key) {
            return Object.keys(payload).includes(key);
        }
    },
    created() {
        //
    },
};
</script>