dont cant get returns in console.log of the websocket,

[Luska066]

Echo Version

1.16.1

Laravel Version

11

PHP Version

8.2.18

NPM Version

8.5.1

Database Driver & Version

POST GRES

Description

Steps To Reproduce

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>
);

`

[driesvints]

Hi there,

Thanks for reporting but it looks like this is a question which can be asked on a support channel. Please only use this issue tracker for reporting bugs with the library itself. If you have a question on how to use functionality provided by this repo you can try one of the following channels:

• Laracasts Forums
• Laravel.io Forums
• StackOverflow
• Discord or InertiaJS Discord for Inertia questions
• Larachat
• IRC

However, this issue will not be locked and everyone is still free to discuss solutions to your problem!

Thanks.

[Luska066]

find the error, .linsten() is not used, but .on() is used