Socket-IO Laravel + Vue
[Concluído]
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...)?
Algumas imagens da APP notificando no Painel de Admin (WebServices) em Realtime (Socket-IO).
https://imgur.com/gallery/Jh41SEf
Uma das imagens do Client VUE APP.
https://imgur.com/gallery/vk1dlF7
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)?
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.
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.
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).
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.
O desafio está em emitir a notificação em tempo real no app separado, que também é Vue.js, certo?
SIM!
A mesma implementação que fez no vue.js dentro do Laravel, você pode (e deve) aplicar no vue SPA que é desacoplado.
ESTÁ CERTO, OBRIGADO!
Olá Carlos!
Permita-me dizer que você é o cara, vai o meu muito obrigado!
=> A 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..!
https://imgur.com/gallery/HOZH0xV
Maravilha amigo, parabéns. Finalizando o ticket aqui! :)
Estou com o memso problemam segui os passos acima e não funcionou, preciso configurar algo mais no frontend ?
Olá, Jonathan!
Tudo bem?
Cria uma nova thread (ticket) para discutirmos a sua dúvida.
No aguardo!
Abs;
Ok Carlos, segue o novo ticket https://academy.especializati.com.br/ticket/real-time-socket.io-_-spa-vuejs
Precisa estar logado para conseguir responder a este ticket!
Clique Aqui Para Entrar!