fluxo de eventos wppconnect com nuxtjs/vue

index.vue

<template>
    <div class="px-6">
        <div class="mb-6">
            <h2 class="text-lg leading-6 font-medium text-gray-900">
                {{ $t('context.whatsapp_settings.page_title') }}
            </h2>
        </div>

        <p class="text-sm text-gray-600 ml-5 pb-6">
            Aqui você vai configurar o seu Whatsapp para utilizar nas notificações de forma dinâmica no sistema.<br>
            Use o card de ativação abaixo para ativar ou desativar o seu whatsapp: <br>
            você só precisa abrir clicar ativar e fazer leitura do qrcode assim que o mesmo abrir.
        </p>

        <TWAlert
            v-if="checkConnectionStatus"
            variant="success"
        >
            <div class="flex space-x-10">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <!-- Heroicon name: solid/check-circle -->
                        <svg
                            class="h-5 w-5 text-green-400"
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 20 20"
                            fill="currentColor"
                            aria-hidden="true"
                        >
                            <path
                                fill-rule="evenodd"
                                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                clip-rule="evenodd"
                            />
                        </svg>
                    </div>

                    <div class="ml-3 grid">
                        <div>
                            <h3 class="text-sm font-medium text-green-800">
                                Sessão ativa
                            </h3>
                            <div class="mt-2 text-sm text-green-700">
                                <p>Whatsapp conectado com sucesso!</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-4">
                    <div class="-mx-2 -my-1.5 ">
                        <TWButton
                            :busy="spinner.logout_session"
                            variant="danger"
                            @click.stop.prevent="logoutSession()"
                        >
                            {{ $t('context.whatsapp_settings.btn_logout_session') }}
                        </TWButton>
                    </div>
                </div>
            </div>
        </TWAlert>

        <WhatsappQrcodeConnect
            @isLogged="checkConnectionStatus = true"
            @logoutsession="afterLogout()"
        />
    </div>
</template>

<script>
    import { mapActions, mapMutations, mapState } from 'vuex';
    import WhatsappQrcodeConnect from '@/components/Whatsapp/WhatsappQrcodeConnect';

    export default {
        components: {
            WhatsappQrcodeConnect,
        },

        middleware: 'auth',

        data() {
            return {
                checkConnectionStatus: '',
                spinner: {
                    logout_session: false,
                },
            };
        },

        computed: {
            ...mapState({
                whatsappConnect: state => state.business.whatsappConnect,
            }),
        },

        created() {
            this.qrcodeInit();
        },

        methods: {
            ...mapMutations('app', {
                $_BUSY: 'BUSY',
            }),
            ...mapActions('business', {
                $_generateTokenAndSession: 'generateTokenAndSession',
                $_getBusiness: 'getBusinesses',
                $_storeBusiness: 'store',
            }),
            ...mapActions('whatsapp', {
                $_startSession: 'startSession',
                $_ckeckConnection: 'checkConnectionSession',
                $_logoutSession: 'logoutSession',
                $_closeConnection: 'closeConnection',
            }),

            async qrcodeInit() {
                if (!this.whatsappConnect.id) {
                    await this.$_generateTokenAndSession().then(async() => {
                        const business = await this.$_getBusiness().then(response => response.data);
                        this.$_storeBusiness(business);
                        this.$_BUSY(true);
                    });
                }

                this.checkConnectionStatus = await this.$_ckeckConnection(this.whatsappConnect.id).then(response => response.status);

                if (this.checkConnectionStatus === false) {
                    this.startSession();
                }
            },

            startSession() {
                this.$_startSession(this.whatsappConnect.id);
                this.$_BUSY(true);
            },

            logoutSession() {
                this.spinner.logout_session = true;
                this.$_logoutSession(this.whatsappConnect.id);
            },

            afterLogout() {
                this.checkConnectionStatus = false;
                this.startSession();
            },
        },
    };
</script>

laravel-echo.js

import Vue from 'vue';
import Echo from 'laravel-echo';
import Cookies from 'js-cookie';

const echo = {};

echo.install = function(Vue) {
  window.io = require('socket.io-client');

  Vue.prototype.$echo = new Echo({
    broadcaster: 'socket.io',
    host: process.env.appUrlEcho,
    auth: {
      headers: {
        Authorization: Cookies.get('_granaup._token.local'),
      },
    },
   // namespace: 'App.V1.WhatsappConnect.Events',
  });
};

Vue.use(echo);

package.json

  "dependencies": {
        "laravel-echo": "1.11.0",
        "socket.io": "2.3.0",
        "socket.io-client": "2.4.0",
    },

WhatsappQrcodeConnect.vue

<template>
    <div>
        <template v-if="initQrcode">
            <TWAlert
                v-if="response.variant === 'danger'"
                :variant="response.variant"
                dismissible
            >
                <span v-html="response.message" />
            </TWAlert>

            <TWCard>
                <div class="flex">
                    <div>
                        <h2 class="text-base font-medium">
                            Ativar whatsapp no app:
                        </h2>

                        <p class="text-sm text-gray-600 mt-3 pb-6 mr-3">
                            1. Abra o whatsapp no seu celular<br>
                            2. Toque em "mais opções" ou "configurações" e selecione <br>"Aparelhos conectados".<br>
                            3. Toque em "conectar o aparelho". <br>
                            4. Aponte seu aparelho para essa tela para capturar o código.
                        </p>
                    </div>

                    <div
                        v-if="getQrcodeImg"
                        class="md:flex-shrink-0"
                    >
                        <img
                            :src="getQrcodeImg"
                            class="w-70 md:w-50 h-50 md:h-50"
                        >
                    </div>

                    <div
                        v-if="qrCodeReadError"
                        class="md:flex-shrink-0"
                    >
                        <a
                            href="#"
                            @click="startSession()"
                        >
                            <img
                                src="@/assets/img/reload-zap-button.png"
                                class="w-70 md:w-50 h-50 md:h-50"
                            >
                        </a>
                    </div>
                </div>
            </TWCard>
        </template>
    </div>
</template>

<script>
    import { mapState, mapMutations, mapActions } from 'vuex';

    export default {
        name: 'WhatsappQrcodeConnect',

        components: {
        },

        data() {
            return {
                initQrcode: false,
                imgQrcode: '',
                qrCodeReadError: false,
                response: {
                    message: null,
                    variant: null,
                },
            };
        },

        computed: {
            ...mapState({
                business: state => state.business.business,
                whatsappConnect: state => state.business.whatsappConnect,
            }),

            getQrcodeImg() {
                return this.imgQrcode ? `data:image/jpeg;base64,${this.imgQrcode}` : '';
            },
        },

        mounted() {
            this.$echo.channel(`qrcode-generate-${this.business.id}`)
                .listen('.App\\V1\\WhatsappConnect\\Events\\WhatsappQrCodeGenerateEvent', (e) => {
                    if (e.data.event === 'qrcode') {
                        this.initQrcode = true;
                        this.imgQrcode = e.data.qrcode;
                        this.qrCodeReadError = false;
                        this.$_BUSY(false);
                    } else if ((e.data.event === 'status-find' && e.data.status === 'qrReadError') || (e.data.status === 'browserClose')) {
                        this.response.variant = 'danger';
                        this.response.message = 'Erro na leitura do código! Aponte o celular novamente para scanear';

                        this.imgQrcode = '';
                        this.qrCodeReadError = true;
                        if (this.$route.name === 'settings-whatsapp-config') {
                            setTimeout(() => {
                                this.startSession();
                                this.resetResponse();
                            }, 60 * 1000);
                        }
                    } else if ((e.data.event === 'status-find' && e.data.status === 'isLogged') || (e.data.event === 'status-find' && e.data.status === 'inChat') || (e.data.event === 'status-find' && e.data.status === 'qrReadSuccess')) {
                        this.resetResponse();
                        this.$emit('isLogged');
                    } else if ((e.data.event === 'logoutsession' && e.data.connected === false) || (e.data.event === 'status-find' && e.data.status === 'desconnectedMobile')) {
                        this.resetResponse();
                        this.$emit('logoutsession');
                    }

                    console.log('outros eventos => ', e);
                });
        },

        methods: {
            ...mapActions('whatsapp', {
                $_startSession: 'startSession',
            }),
            ...mapMutations('app', {
                $_BUSY: 'BUSY',
            }),

            startSession() {
                this.resetResponse();
                this.$_startSession(this.whatsappConnect.id);
                this.$_BUSY(true);
            },

            resetResponse() {
                this.response.message = null;
                this.response.variant = null;
                this.initQrcode = false;
                this.qrCodeReadError = false;
                this.$_BUSY(false);
            },
        },
    };
</script>