This is my first time posting here, so I apologize if my formatting isn’t quite right.

I’m currently working with Laravel Echo to enable real-time event listening on the frontend of my application. Below is the snippet of my echo.js file:

`> import Echo from ‘laravel-echo’;

import Pusher from ‘pusher-js’;

window.Pusher = Pusher;

window.Echo = new Echo({
broadcaster: ‘reverb’,
key: process.env.MIX_REVERB_APP_KEY,
wsHost: process.env.MIX_REVERB_HOST,
wsPort: process.env.MIX_REVERB_PORT,
wssPort: process.env.MIX_REVERB_PORT,
forceTLS: false,
enabledTransports: [‘ws’, ‘wss’],
});`

This script resides in project_name/resources/js/echo.js. To utilize it on the client-side, I need to build it using Laravel Mix, which outputs:

project_name/public/build/assets/app.js

Then, I include it in my frontend like so:

`>

Echo.channel(‘buttonChannel’)
.listen(‘ButtonEvent’, (event) => {
document.getElementById(‘message’).innerText += event.message + ‘n’;
console.log(‘Button clicked: ‘, event.message);
});
`

However, during inspection (via inspect element), I realized that the Reverb keys and app_id values are exposed. Reverb is the websocket and the broadcaster, which is a first-party of Laravel.

My question is: Is this the correct approach? Should I be allowing my keys to be exposed on the client-side? Any feedback would be greatly appreciated. Thank you!