Fórum Academy - Real Time Socket.io

Criador Jonathan Xavier Ribeiro 25/03/2021

Olá, tenho uma aplicação com acesso ao Admin e Site. O Admin é feito com Laravel + VueJs e funciona com realtime, exatamente como o treinamento "https://academy.especializati.com.br/curso/laravel-real-time-com-socketio". Minha dúvida é aplicar o real time do lado do site, que é um frontend feito em VueJs consumindo APIs que estão no mesmo projeto do Admin.

5 comentários

Criador Jonathan Xavier Ribeiro 25/03/2021

Obs: Segue a implementação que estou fazendo no Frontend

package.json

"dependencies": {
"laravel-echo": "^1.10.0",
"socket.io-client": "^2.3.0",
"vue": "^2.6.12"
}

.env

VUE_APP_URI_BASE_API=http://localhost/api/v1 VUE_APP_SOCKET_IO_APP_HOST=http://localhost:6001

echo.js

window.Echo.channel('channel')
.listen('listen', (e) => {
console.log(e)
})

main.js

require('./bootstrap');

import Vue from 'vue'
 
const app = new Vue({
el: '#app'
})

boostrap.js

import axios from 'axios'
import Echo from 'laravel-echo'
 
axios.defaults.baseURL = process.env.VUE_APP_URI_BASE_API

window.io = require('socket.io-client');
window.Echo = new Echo({
broadcaster: 'socket.io',
host: process.env.VUE_APP_SOCKET_IO_APP_HOST
});

require('./Echo')

Manager Carlos Ferreira 25/03/2021

Olá, Jonathan!
Tudo bem?

Está dando algum problema? Me dê mais detalhes por favor.

Chegou a dá uma olhada no LaraChat, acho que vai bem ao encontro do que precisa.

Criador Jonathan Xavier Ribeiro 25/03/2021

Carlos, no projeto com Laravel + VueJs funciona perfeitamente, agora em um projeto que só tem o VueJs não funciona, não retorna erro algum.O Projeto do LaraChat vou fazer esse curso sim, olhei no repositório e está da forma que eu tenho ou seja Laravel com VueJs, preciso fazer funcionar no SPA em VueJs.

Manager Carlos Ferreira 25/03/2021

Posta o projeto no GitHub que te ajudo a identificar;

Vi aqui amigo que está pegando a variável de ambiente do arquivo .env, dessa forma só é possível se rodar dentro do Laravel:
process.env.VUE_APP_SOCKET_IO_APP_HOST

Você pode criar as variáveis de ambiente diretamente no ambiente, mas é algo manual.

Aqui, pega o host diretamente e de forma dinâmica:
host: window.location.hostname + ':6001'

Criador Jonathan Xavier Ribeiro 25/03/2021

Boa tarde, Carlos consegui resolver segue a solução no link abaixo.

https://gist.github.com/JowXavier/7afbb2a9b7aa820c66e01d062556e7f5

O problema do meu código, era que o main.js mesmo fazendo o require do boostrap.js, não estava lendo as configurações. A solução foi simplemente colocar as configurações dentro do main.js.

Obs: Para usar o .env no Vuejs é só criar o arquivo e a variável de ambiente deve iniciar com o prefixo "VUE_APP_", dessa forma é perfeitamente possivel utilizar as váriveis de ambiente do .env.

Obrigado pela ajuda, e parabéns pelo conteúdo dos seus cursos.

Real Time Socket.io - SPA VueJs

[Finalizado Pelo Aluno]