Fórum Academy - Erro com o websocke

Criador Wesley Vila Seca Sanches 15/04/2023

Boa noite, apesar de ter seguido todos os passo, tenho recebido o seguinte erro no conselo

bSocket connection to 'ws://dominio.com:6379/socket.io/?EIO=3&transport=websocket' failed:

Estou usando o vue 3, e o laravel-echo-server starta com sucesso, porem o erro persiste.

Meu projeto está rodando em docker e dentro do laravel-echo-server.json o host está apontado para o nome do container 'redis' e a porta é a que ele está sendo executada '6379'

o arquivo bus.js está assim

import { createApp } from "vue";

const app = createApp();

export default app;

o arquivo Echo.js está assim

import Bus from './bus'
import { toast } from 'vue3-toastify';

// get id tenant
const tenantId = window.Laravel.tenantId;

window.Echo.channel(`buzzin_database_private-order-created.${tenantId}`)
.listen('OrderCreated', (e) => {
Bus.$emit('order.created', e.order)
toast.success(`Novo pedido ${e.order.identify}`, { autoClose: 9000 });
})

o arquivo bootstrap.js está assim

import Echo from 'laravel-echo';
import io from 'socket.io-client';

// window.Pusher = require('pusher-js');
window.io = io;

window.Echo = new Echo({
broadcaster: 'socket.io',
host: window.location.hostname + ':6379',
transports: ['websocket', 'polling', 'flashsocket'] ,
forceTLS: true
});

require('./Echo');
 

18 comentários

Criador Wesley Vila Seca Sanches 15/04/2023

meu servidor é o apache

Criador Wesley Vila Seca Sanches 15/04/2023

Consegui resolver. O Erro agora é

[2023-04-16T22:39:49.140Z] - Preparing authentication request to: http://projeto.com

[2023-04-16T22:39:49.140Z] - Sending auth request to: http://projeto.com/broadcasting/auth

⚠ [2023-04-16T22:39:49.707Z] - _mjsVkmLYObfTu_PAAAC could not be authenticated to projeto_database_private-order-created.1

{"message":"Unauthenticated."}

Client can not be authenticated, got HTTP status 401

⚠ [2023-04-16T22:39:49.741Z] - _mjsVkmLYObfTu_PAAAC could not be authenticated to projeto_database_private-product-created.1

{"message":"Unauthenticated."}

Client can not be authenticated, got HTTP status 401

O Canal projeto_database_private-product-created criei para testar o laravel-echo-server, e ele ta ok

Channel: projeto_database_private-product-created.1

Event: App\Events\ProductCreated

Mas dai da esse erro aqui

⚠ [2023-04-16T22:44:01.721Z] - DR1TCzeIAwVIrlm2AAAE could not be authenticated to projeto_database_private-product-created.1

{"message":"Unauthenticated."}

Client can not be authenticated, got HTTP status 401

O que fazer?

Manager Carlos Ferreira 15/04/2023

Olá, Wesley!
Como vai?

Quais as versões dos packages que você instalou?

O erro indica que é problemas de autenticação, você declarou certinho o channel no arquivo routes/channel.php?
Compartilha comigo o código através do GitHub, que te ajudo a resolver.

Criador Wesley Vila Seca Sanches 15/04/2023

Opa Carlos, boa tarde. Adicionei vc no repositório. As atualizações ref ao websocket está na branch websocket-implementation

Manager Carlos Ferreira 15/04/2023

Conferi o seu projeto.

O provider broadcast está registrado. Ok!

As versões dos packages (laravel-echo e socket.io-client) também estão corretas. Ok!

A rota do channel também está certa. Ok!
   Experimenta deixar aqui return true: https://github.com/wesleyvilaseca/buzzin/blob/websocket-implementation/routes/channels.php#L25

   Muda aqui para PresenceChannel:
   https://github.com/wesleyvilaseca/buzzin/blob/websocket-implementation/app/Events/OrderCreated.php#L38

Me diga se mudou algo, nos logs;

Criador Wesley Vila Seca Sanches 15/04/2023

Opa, fiquei meio na duvida sobre os canais que era para alterar, na duvida mexi nos dois.

O terminal está capturando ok a alteração

[2023-04-17T21:10:22.016Z] - AGULZAvIMBOcPDrJAAAF joined channel: buzzin_database_private-product-created.1

Channel: buzzin_database_presence-product-created.1

Event: App\Events\ProductCreated

Porém não aparece nada no console. Fiquei na duvida se o arquivo buz.js está configurado de maneira correta tb.

Outra duvida. Colocar apenas o return true lá nos channel, não vai fazer com que todos os usuários enxerguem a alteração de um?

Atualizei a branch para vc ver

Manager Carlos Ferreira 15/04/2023

Sim, a ideia do PresenceChannel é só para validar se é algum problema no backend, pelo visto era, vamos criar o evento real-time e depois voltamos nisso.

--

Agora como mudou as configurações, precisa atualizar aqui:
https://github.com/wesleyvilaseca/buzzin/blob/websocket-implementation/resources/js/Echo.js#L15

Porque não é mais um private event, e sim um presence:
buzzin_database_presence-product-created

Criador Wesley Vila Seca Sanches 15/04/2023

Opa Carlos, boa noite. Usando o PresenceChannel funcionou como era de se esperar, porém, como faz para no caso quando houver uma nova venda o toast aparece apenas para a loja que recebeu a venda de fato?

Manager Carlos Ferreira 15/04/2023

Bom que já validamos que o restante está tudo certo, ou seja, seus eventos em real-time está entrando com sucesso.

Vamos voltar para PrivateChannel, e trabalhar na autenticação.

--

Você está testando logado com um usuário que está vinculado ao tenant que acabou de receber o pedido?

Criador Wesley Vila Seca Sanches 15/04/2023

Vou tentar explicar como está a aplicação.

O front end do marquetplace foi feito integrado (monolito), daí o vue js é usado no marketplace e em alguns components para o dashboard. Então, aquele js que fica escutando o websocket vai ficar global na aplicação apenas quando o host for a do dashboard (o marketplace terá um dominio diferente). Para garantir que o arquivo echo,js seja adicionado no momento certo fiz isso

import Echo from 'laravel-echo';
import Socket from 'socket.io-client';
// window.Pusher = require('pusher-js');

const host = window.location.host;

window.io = Socket;
window.Echo = new Echo({
broadcaster: 'socket.io',
host: `${host}:6001`,
});

if (host === process.env.MIX_APP_URL.replace(/^https?:\/\//, '')) {
require('./Echo');
}

O arquivo echo.js ficou assim

import Bus from './bus'
import { toast } from 'vue3-toastify';

// get id tenant
const tenantId = window?.Laravel?.tenantId;

window.Echo.channel(`buzzin_database_private-order-created.${tenantId}`)
.listen('OrderCreated', (e) => {
// Bus.$emit('order.created', e.order)
toast.success(`Novo pedido ${e.order.identify}`, { autoClose: 9000 });
})

Daí alterei o tipo de canal do arquivo OrderCreated para PrivateChannel daí ao startar o laravel-echo-server os erros se inicião

[2023-04-21T18:58:05.493Z] - LoUIQs_502Ux8MPFAAAA could not be authenticated to buzzin_database_private-order-created.1

{

"message": "",

"exception": "Symfony\\Component\\HttpKernel\\Exception\\AccessDeniedHttpException",

"file": "/var/www/html/vendor/laravel/framework/src/Illuminate/Broadcasting/Broadcasters/Broadcaster.php",

"line": 89,

"trace": [

{

"file": "/var/www/html/vendor/laravel/framework/src/Illuminate/Broadcasting/Broadcasters/RedisBroadcaster.php",

"line": 70,

"function": "verifyUserCanAccessChannel",

"class": "Illuminate\\Broadcasting\\Broadcasters\\Broadcaster",

"type": "->"

},

{

...mais um monte de exception e ao fim mostra isso

Client can not be authenticated, got HTTP status 403

Criador Wesley Vila Seca Sanches 15/04/2023

Atualizei a branch em questão

Manager Carlos Ferreira 15/04/2023

Desculpas demorar te responder amigo, muita correria aqui hehehee

--

Mesmo aqui retornando true, dá o mesmo erro, certo?
https://github.com/wesleyvilaseca/buzzin/blob/websocket-implementation/routes/channels.php#L28

Você está reiniciando a queue a cada alteração?

---

Está usando o redis?

Criador Wesley Vila Seca Sanches 15/04/2023

quando a linha
https://github.com/wesleyvilaseca/buzzin/blob/websocket-implementation/routes/channels.php#L28

É setado para voltar true, ele funciona ok.

Estou usando o redis

Criador Wesley Vila Seca Sanches 15/04/2023

Acabei de testar aqui, colocando o 'return true' o alerta só aparece pro tenant do pedido criado de fato. Sendo assim, não há necessidade de manter 'return $user->tenant_id = $tenantId'? Porquê?

Obrigado desde já mestre

Manager Carlos Ferreira 15/04/2023

No frontend já existe um "filtro" por tenant, aqui:
https://github.com/wesleyvilaseca/buzzin/blob/websocket-implementation/resources/js/Echo.js#L8

Note, o tenant só vai conseguir ver as mensagens que lhe pertencem.

--

No backend também é bom filtrar, para disparar o evento apenas para o client que realmente pode.

Já sabemos então que o erro está aqui:
return $user->tenant_id === $tenantId;
https://github.com/wesleyvilaseca/buzzin/blob/websocket-implementation/routes/channels.php#LL27C8-L27C46

Não usa o ===, usa apenas o ==, ou faz um casting dos ids;

Criador Wesley Vila Seca Sanches 15/04/2023

A alteração de === para == funcionou. Uma ultima dúvida referente ao websocket no frontend. Como estou usando o vue3 acredito que o arquivo abaixo não esteja configurado de forma correta.
https://github.com/wesleyvilaseca/buzzin/blob/websocket-implementation/resources/js/bus.js

Como ajustar ela para o vue3?

Manager Carlos Ferreira 15/04/2023

Está funcionando e event bus, ou dando algum erro?

--

Se quer algo mais organizado, uma boa é trabalhar com o vuex ou pinia, no Larachat mostrei como trabalhar com o vuex;

Criador Wesley Vila Seca Sanches 15/04/2023

Mestre, bom dia! Consegui entender o conceito tudo. Desde já muito obrigado pelo suporte