echo and reverb not working

hi!

i have been busy with making a chatsystem in laravel for school, at first i used pusher and it worked, but now i wanted to switch to reverb and i cant get it to work,

                {{-- Existing users --}}
                <div id="select-container">
                    @foreach($chat->users as $user)
                        <select name="user[{{ $user->id }}]" id="user{{ $user->id }}" class="w-full">
                            <option value=""></option>
                            <option value="{{ $user->id }}" selected>{{ $user->first_name }}</option>
                            @foreach($users as $otherUser)
                                @if($otherUser->id !== $user->id && $otherUser->id !== auth()->id())
                                    <option value="{{ $otherUser->id }}">{{ $otherUser->first_name }}</option>
                                @endif
                            @endforeach
                        </select>
                    @endforeach
                </div>

                <button type="button" id="add-user" class="mt-4 px-4 py-2 bg-blue-500 text-white rounded">Add User</button>
                <x-form-button>Save</x-form-button>
                <x-form-button form="delete-form">Delete</x-form-button>
                <x-form-error name="users"/>
            </form>

            <form action="{{ route('chat.delete', $chat->id) }}" id="delete-form" method="POST" class="hidden">
                @csrf
                @method('DELETE')
            </form>
        </div>
    </x-option>
    <div class="w-62 centerALT border-black border-2 mt-20">
        <div id="chat" class="bg-gray-100">
            <div class="inline-block w-full">
                <input type="text" class="mr-1 mt-1 ml-low" id="message-input" placeholder="Type a message">
                <input type="hidden" id="chat-id" value="{{ $chatIdentity }}">
                <button class="bg-black text-white p-0.5" onclick="sendMessage()">Send</button>
            </div>

            <div id="scrollable" class="overflow-y-scroll">
                <div id="chat-container" class="h-96 space-y-1">
                    @foreach($messages as $message)
                        <p><strong>{{ $message->from_user_name }}</strong>: {{ $message->message }}</p>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

<div id="user-options" style="display: none;">
    <div id="select-container">
        @foreach($chat->users as $user)
            <select name="user[{{ $user->id }}]" id="user{{ $user->id }}">
                <option value=""></option>
                <option value="{{ $user->id }}" selected>{{ $user->first_name }}</option>
                @foreach($users as $otherUser)
                    @if($otherUser->id !== $user->id && $otherUser->id !== auth()->id())
                        <option value="{{ $otherUser->id }}">{{ $otherUser->first_name }}</option>
                    @endif
                @endforeach
            </select>
        @endforeach
    </div>
</div>

window.axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

window.Echo = new Echo({
    broadcaster: 'reverb',
    key: 'zd5jjb6gmrevypvf3mgo',
    wsHost: 'localhost',
    wsPort: 8080,
    forceTLS: ('http' ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
});

const chatId = document.getElementById('chat-id').value;
window.Echo.channel('chat.' + chatId)
    .listen('MessageSent', (event) => {
        console.log('Message received: ', event.message, 'from: ', event.name)
        displayMessage(event.message, event.name)
    })

document.getElementById('add-user').addEventListener('click', function () {
    const selectContainer = document.getElementById('select-container');

    // Create a new select element
    const newSelect = document.createElement('select');
    newSelect.name = "user[]"; // Adjust to submit as an array
    newSelect.classList.add('mt-1', 'w-full');

    // Create the default option
    const defaultOption = document.createElement('option');
    defaultOption.value = '';
    defaultOption.textContent = '';
    newSelect.appendChild(defaultOption);

    // Add options from the users array
    @foreach($users as $otherUser)
    if ({{ $otherUser->id }} !== {{ auth()->id() }}) {
        const option = document.createElement('option');
        option.value = '{{ $otherUser->id }}';
        option.textContent = '{{ $otherUser->first_name }}';
        newSelect.appendChild(option);
    }
    @endforeach

    // Append the new select to the container
    selectContainer.appendChild(newSelect);
});



function sendMessage() {
    const message = document.getElementById('message-input').value;
    const chatId = document.getElementById('chat-id').value;

    if (message.trim() === '') {
        console.error('Message is empty');
        return;
    }

    axios.post('/send-message', {
        message: message,
        chat_id: chatId,
    })
        .then(response => {
            console.log('Message sent successfully:', response.data);
            document.getElementById('message-input').value = ''; // Clear input field
        })
        .catch(error => {
            console.error('Error sending message:', error);
        });
}

    function displayMessage(message, name) {
        const chatContainer = document.getElementById('chat-container');
        const scrollable = document.getElementById('scrollable');

        if (chatContainer) {
            const messageElement = document.createElement('div');
            messageElement.className = 'message';
            messageElement.innerHTML = `<p><strong>${name}</strong>: ${message}</p>`;

            chatContainer.appendChild(messageElement);

            setTimeout(() => {
                scrollToBottom(scrollable); // Delay ensures the DOM is fully updated before scrolling
            }, 100); // Adjust the delay if necessary
        }
    }



    function scrollToBottom(scrollable) {
        scrollable.scrollTop = scrollable.scrollHeight;
    }

    document.addEventListener('DOMContentLoaded', () => {
        const chatContainer = document.getElementById('scrollable');
        if (chatContainer) {
            setTimeout(() => {
                scrollToBottom(chatContainer); // Ensure it scrolls after a slight delay
            }, 100);
        }
    });

this is my full chat page code, i also have axios, laravel echo and pusher.js imported via script src i keep getting this error: Uncaught TypeError: this.connector is undefined and i jsut cant find a way to fix it