I am trying to develop live messaging system using Pusher and Laravel. My Code is like below.

<div>
      <div id="messages">
            @foreach($messages as $message)
                <div>
                    <strong>{{ $message->user->name }}</strong>: {{ $message->content }}
                </div>
            @endforeach
        </div>
        
        <form id="message-form">
            <input type="text" id="message-input" placeholder="Type your message...">
            <button type="submit">Send</button>
        </form>
    </div>

    
    @push('script')
        <script>
            const messageForm = document.getElementById('message-form');
            const messageInput = document.getElementById('message-input');
            const messagesDiv = document.getElementById('messages');

            // Connect to WebSocket
            const socket = new WebSocket('ws://localhost:6001');

            socket.addEventListener('open', (event) => {
                console.log('WebSocket connected');
            });

            socket.addEventListener('message', (event) => {
                const message = JSON.parse(event.data);
                messagesDiv.innerHTML += `<div><strong>${message.user.name}</strong>: ${message.content}</div>`;
            });

            messageForm.addEventListener('submit', (event) => {
                event.preventDefault();
                const messageContent = messageInput.value;
                if (messageContent.trim() !== '') {
                    const message = {
                        content: messageContent,
                    };
                    socket.send(JSON.stringify(message));
                    messageInput.value = '';
                }
            });
        </script>
    @endpush
@endsection

But I am getting error Firefox can’t establish a connection to the server at ws://localhost:6001/.