Dont can get the returns of websocket

Echo Version

1.16.1

Laravel Version

PHP Version

8.2.18

NPM Version

8.5.1

Database Driver & Version

Postgres

Description

`import { Box, Button, Card, CircularProgress, Container, Stack, Step, StepLabel, Stepper, Typography, } from "@mui/material"; import {useContext, useEffect, useState} from "react"; // import { useNavigate } from "react-router-dom"; import {AuthContext} from "../../contexts/AuthContext"; import {useNavigate} from "react-router-dom"; import React from 'react'; import {Logo} from "../../components/logo" import {ToastContainer, toast} from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; import 'react-toastify/dist/ReactToastify.css'; import AuthMethods from "../../../services/AuthMethods";

// @ts-ignore import Echo from "laravel-echo"; import Pusher from "pusher-js";

export const QrCode = (): JSX.Element => { // @ts-ignore const {setMessage, loading, setLoading} = useContext(AuthContext) const [qrCodeImage, setQrCodeImage] = useState(""); const [loadingButton, setLoadingButton] = useState(false) const [naoConsigoPagarQRCode, setNaoConsigoPagarQRCode] = useState(""); const [event, setEvent] = useState("") useEffect(() => { setLoadingButton(true) AuthMethods.createCharge() .then(response => { //@ts-ignore if (response.message === "Cobrança Criada Com Sucesso!" || response.message === "A Cobrança não exipirou") { setMessage({success: true, message: "Leia o QrCode para continuar"}) AuthMethods.getCharge().then(response => { console.log(response); //@ts-ignore if (!response.success && response.message != "A Cobrança não exipirou") { //@ts-ignore setMessage({ success: false, message: response.message || "Ocorreu um erro verifique com o suporte" }) localStorage.removeItem("token") setTimeout(() => { window.location.href = "/" }, 3000) } //@ts-ignore if (response.success && response.message == "Cobrança encontrada" || response.message === "A Cobrança não exipirou") { //@ts-ignore setNaoConsigoPagarQRCode(response.embbebed.charge.pix_transaction); } }).finally(() => { setLoadingButton(false) setLoading(true) AuthMethods.getQrCode().then((response) => { console.log(response); //@ts-ignore if (!response.success) return Promise.reject(response); //@ts-ignore if (response.success) { //@ts-ignore if (response.message == "Qr code achado com sucesso") { //@ts-ignore setQrCodeImage("data:image/png;base64," + response.enbbebed[0].encodedImage, 'aqui'); } else { //@ts-ignore setMessage({success: true, message: response.message || "Verificando"}) } }

                    })
                        .catch((error) => {
                            //@ts-ignore
                            //
                            // setMessage({success:false,message: response.message ||"Ocorreu um erro verifique com o suporte"})
                            // localStorage.removeItem("token")
                            // setTimeout(() => {
                            //     window.location.href = "/"
                            // },3000)
                        }).finally(() => {
                        setTimeout(() => {
                            setLoading(false)
                        }, 3000)
                    })

                })
            }
            console.log(response)
        })
        .catch(error => {
            console.log(error)
            // setMessage({success:false,message:error.message || "Error Desconhecido"})
            // localStorage.removeItem('token')
            // setTimeout(() => {
            //     window.location.href = "/"
            // },2000)
            // console.log(error);
        })

}, []);
declare global {
    interface Window {
        Echo: Echo;
        Pusher: any
    }
}
let echo = null;
useEffect(() => {
    window.Pusher = Pusher
    echo = new Echo({
        broadcaster: 'pusher',
        key: "app-key",
        wsHost: "127.0.0.1",
        wssHost: '127.0.0.1',
        wsPort: "6001",
        wssPort: "6001",
        cluster: "mt1",
        forceTLS: false,
        encrypted: false,
        enabledTransports: ['ws', 'wss'],
    });
    echo.listen('payment',"PaymentResponse",e => {
        console.log(JSON.stringify(e.data))
    })
}, []);

const [openModal, setOpenModal] = useState<boolean>(false);
const steps = [
    {
        name: "Conferir dados",
        path: "#",
    },
    {
        name: "Enviar foto",
        path: "/student-id/create/upload-photo",
    },
    {
        name: "Método de Pagamento",
        path: "/student-id/create/checkout",
    },
    {
        name: "Efetuação do pagamento",
        path: "/student-id/create/checkout",
    },
    {
        name: "Download Carteira",
        path: "/student-id/download/",
    },
];
const [activeStep, setActiveStep] = useState(3);
const navigate = useNavigate();

const handleNext = async () => {
    navigate('/student-id/download/');
}
const handleBack = () => {
    navigate("/");
}

useEffect(() => {

    console.log(event, "EVENT")
}, [event]);

return (
    <Container maxWidth="md">
        <ToastContainer/>
        <Box
            display="flex"
            alignItems="center"
            justifyContent="center"
            height="100vh"
            flexDirection="column"
        >
            <Typography
                fontSize="2rem"
                fontWeight="bold"
                letterSpacing="3px"
                mb="1rem"
                alignSelf="start"
            >
                <center>
                    <Logo/>
                </center>
            </Typography>
            <Card sx={{width: "100%"}}>
                <Box p="4rem">
                    <Stepper activeStep={activeStep}>
                        {steps.map((step, index) => {
                            return (
                                <Step key={String(index + 1)}>
                                    <StepLabel>{step.name}</StepLabel>
                                </Step>
                            );
                        })}
                    </Stepper>
                    <Box>
                        {loading === true && <center><CircularProgress style={{marginTop: 40}}/></center>}
                        {loading === false && <img src={qrCodeImage} style={{width: "100%", height: "100%"}}/>}
                    </Box>
                    <Stack spacing="1rem" direction="row" mt="1rem">
                        <Button
                            variant="contained"
                            color="info"
                            onClick={() => window.open(naoConsigoPagarQRCode, '_blank')}
                            sx={{
                                flex: 1,
                            }}
                        >
                            Realizei o pagamento
                        </Button>

                    </Stack>
                    {loadingButton === true ?
                        <Stack spacing="1rem" direction="row" mt="1rem">

                            <Button
                                variant="contained"
                                color={"warning"}
                                size="large"
                                sx={{
                                    flex: 1,
                                }}
                            >
                                <CircularProgress/>
                            </Button>
                        </Stack>
                        :
                        <Stack spacing="1rem" direction="row" mt="1rem">

                            <Button
                                variant="contained"
                                color={"warning"}
                                onClick={() => window.open(naoConsigoPagarQRCode, '_blank')}
                                size="large"
                                sx={{
                                    flex: 1,
                                }}
                            >
                                Não consigo pagar qr code
                            </Button>
                        </Stack>}
                </Box>
            </Card>
        </Box>
    </Container>
);

};

Steps To Reproduce

laravel new bug-report --github="--public"

laravel / echo