Socket-IO Laravel + Vue

[Concluído]

Gerson Hugo Samuel Chiule Criador 17/01/2021
Gerson Hugo Samuel Chiule

Olá Carlos!

Estou a desenvolver uma APP (E-Commerce). Está dividida em duas partes (WebServices em Laravel e um Client em Vuejs).

 

Ex feature:

No Client quando abro uma venda consigo notificar em Realtime (Socket-IO) no WebServices (Painel de Admin) sem ter que refrescar a página. 

 

Problema:

Não consigo fazer ao contrário (WebServices comunicar com o Client). Ex: Notificar em Realtime (Socket-IO) no Client que o seu pedido foi aprovado sem ter que refrescar a página.

 

ALGUMA SUGESTÃO (tutorial, etc...)?

Criador Gerson Hugo Samuel Chiule 17/01/2021
Gerson Hugo Samuel Chiule

Algumas imagens da APP notificando no Painel de Admin (WebServices) em Realtime (Socket-IO).

https://imgur.com/gallery/Jh41SEf

Criador Gerson Hugo Samuel Chiule 17/01/2021
Gerson Hugo Samuel Chiule

Uma das imagens do Client VUE APP.

https://imgur.com/gallery/vk1dlF7

Manager Carlos Ferreira 17/01/2021
Carlos Ferreira

Olá, Gerson!
Tudo bem?

Não entendi bem a dinâmica, por que essa notificação aqui já não está no frontend (app vue)? https://imgur.com/gallery/Jh41SEf

Se sim, como ela chegou aí, foi através de broadcast do backend (Laravel)?

Criador Gerson Hugo Samuel Chiule 17/01/2021
Gerson Hugo Samuel Chiule

Aqui https://imgur.com/gallery/Jh41SEf é o WebServices (Painel do Admin). Estou utilizando Laravel 8 como Backend do Webservices + VueJs como Frontend do WebServices. Utilizei Socket-IO.

 

Existe a outra parte que é a do Client. Usei Vue onde consome o WebServices via Api.

 

NB: Quero que quando o Admin aprovar a compra do Cliente, o WebServices comunique com o Client (Vue APP)  lançando uma notificação para o cliente.

Criador Gerson Hugo Samuel Chiule 17/01/2021
Gerson Hugo Samuel Chiule

Aqui: https://imgur.com/gallery/Jh41SEf   => estou notificando em realtime o admin (WebService) que um cliente fez um pedido. (Segui o seu curso atual de Socket-IO + o seu curso de notificações).

 

A dificuldade é o Admin (WebService em Laravel) notificar em realtime o Client (Vue APP) ao aprovar seu pedido sem ter que refrescar a página.

Criador Gerson Hugo Samuel Chiule 18/01/2021
Gerson Hugo Samuel Chiule

No E-Commerce que estou a desenvolver é tipo estou a seguir mesma ideia do Curso de Sistema de Restaurante. Temos o LaraFood (WebService) + VueFood e FlutterFood (Clients).

 

Manager Carlos Ferreira 18/01/2021
Carlos Ferreira

Entendi, dentro do dashboard com o Vue.js você conseguiu emitir com sucesso a notificação.

O desafio está em emitir a notificação em tempo real no app separado, que também é Vue.js, certo?

A mesma implementação que fez no vue.js dentro do Laravel, você pode (e deve) aplicar no vue SPA que é desacoplado.

Criador Gerson Hugo Samuel Chiule 18/01/2021
Gerson Hugo Samuel Chiule

O desafio está em emitir a notificação em tempo real no app separado, que também é Vue.js, certo?

SIM!

 

mesma implementação que fez no vue.js dentro do Laravel, você pode (e deve) aplicar no vue SPA que é desacoplado.

ESTÁ CERTO, OBRIGADO!

Criador Gerson Hugo Samuel Chiule 19/01/2021
Gerson Hugo Samuel Chiule

Olá Carlos!

Permita-me dizer que você é o cara, vai o meu muito obrigado!

 

=> mesma implementação que fez no vue.js dentro do Laravel, você pode (e deve) aplicar no vue SPA que é desacoplado.

 

Passos que segui para o Vue SPA

1 - Instalei:

"dependencies": {

"laravel-echo": "^1.9.0",

"socket.io-client": "^2.3.0"

 

}

 

2 - No file main.js:

import Echo from 'laravel-echo';

window.io = require('socket.io-client')

window.Echo = new Echo({

    broadcaster: 'socket.io',

    host: 'http://smartadmin.test:6001' // => Escutando o socket apartir do meu WebService

})

 

require('./echo')

 

DEU SUPER CERTO..! 

Criador Gerson Hugo Samuel Chiule 19/01/2021
Gerson Hugo Samuel Chiule

https://imgur.com/gallery/HOZH0xV

Manager Carlos Ferreira 19/01/2021
Carlos Ferreira

Maravilha amigo, parabéns. Finalizando o ticket aqui! :)

 

Jonathan Xavier Ribeiro 24/03/2021
Jonathan Xavier Ribeiro

Estou com o memso problemam segui os passos acima e não funcionou, preciso configurar algo mais no frontend ?

Manager Carlos Ferreira 24/03/2021
Carlos Ferreira

Olá, Jonathan!
Tudo bem?

Cria uma nova thread (ticket) para discutirmos a sua dúvida.

No aguardo!

Abs;

Jonathan Xavier Ribeiro 25/03/2021
Jonathan Xavier Ribeiro

Ok Carlos, segue o novo ticket https://academy.especializati.com.br/ticket/real-time-socket.io-_-spa-vuejs

Sabe a Solução? Ajude a resolver!

Precisa estar logado para conseguir responder a este ticket!

Clique Aqui Para Entrar!