Не удается подключить JavaScript клиент к WebSocket серверу (ws протокол) - проблема на стороне клиента

Проблема с подключением к WebSocket

Привет всем! Пытаюсь создать свой первый чат с использованием WebSocket, но столкнулся с проблемой подключения клиента к сокету.

Интересно то, что через websocat к 127.0.0.1 подключиться получается без проблем. Это точно говорит о том, что проблема именно в клиентском коде.

Вот мой основной файл messenger.js:

// Флаг для отладки
let isDebugging = false;

// Форматирование времени сообщения
function formatTimestamp(timeStr) {
    const timestamp = new Date(timeStr);
    if (isNaN(timestamp.getTime())) {
        return 'Неверное время';
    }
    return timestamp.toLocaleTimeString();
}

// Отображение сообщений в интерфейсе чата
function showChatMessage(msg) {
    const chatContainer = document.getElementById('chat-messages');
    const msgDiv = document.createElement('div');
    msgDiv.classList.add('message-wrapper', 'flex');

    if (msg.userKey === currentUserKey) {
        msgDiv.classList.add('sent-message');
        msgDiv.innerHTML = `
            <div class="user-message bg-green-500 p-2 rounded text-white">
                ${msg.content}
            </div>
            <span class="timestamp text-xs text-gray-400">${formatTimestamp(msg.timestamp)}</span>
        `;
    } else {
        msgDiv.innerHTML = `
            <img src="avatar.png" class="user-avatar w-8 h-8 rounded-full">
            <div class="received-message bg-gray-600 p-2 rounded text-white">
                ${msg.content}
            </div>
            <span class="timestamp text-xs text-gray-400">${formatTimestamp(msg.timestamp)}</span>
        `;
    }

    chatContainer.appendChild(msgDiv);
    latestMsgId = msg.msgId;
}

// Запрос новых сообщений с сервера
function fetchMessages(connection) {
    connection.send(`fetch ${latestMsgId}`);
    debugLog('Запрос новых сообщений отправлен');
}

// Функция для отладочных сообщений
function debugLog(...args) {
    if (isDebugging) {
        console.log(...args);
    }
}

let latestMsgId = 0;
debugLog('Инициализация WebSocket соединения');

А вот код инициализации на странице:

document.getElementById('newChatButton').addEventListener('click', function() {
    const menu = document.getElementById('chat-menu');
    menu.classList.toggle('visible');
});

const wsConnection = new WebSocket('ws://127.0.0.1:8080<%=request.getContextPath()%>/websocket/chat/<%=Base64.getEncoder().encodeToString(session.getAttribute("authToken").toString().getBytes())%>/<%=roomId%>');
const currentUserKey = '<%=userWallet.getPublicKey()%>';

wsConnection.addEventListener('open', function (evt) {
    debugLog('WebSocket подключен и авторизован');
});

wsConnection.addEventListener('message', function (evt) {
    const receivedData = JSON.parse(evt.data);
    debugLog('Получено сообщение:', receivedData);
    showChatMessage(receivedData);
});

wsConnection.addEventListener('error', function (evt) {
    console.error('Ошибка WebSocket:', evt);
});

wsConnection.addEventListener('close', function (evt) {
    console.log('WebSocket соединение закрыто:', evt);
});

setTimeout(function() {
    setInterval(() => fetchMessages(wsConnection), 3000);
}, 8000);

Получаю ошибку подключения и сокет сразу закрывается с кодом 1006. Кто-нибудь может подсказать, в чем может быть проблема? Сервер точно работает, проверял через внешние инструменты.

Проблема в том, что ты мешаешь JSP с JavaScript. Эта строка подозрительная:

const wsConnection = new WebSocket('ws://127.0.0.1:8080<%=request.getContextPath()%>/websocket/chat/...');

В обычном .js файле JSP-теги не работают. Захардкодь URL без тегов:

const wsConnection = new WebSocket('ws://127.0.0.1:8080/websocket/chat/test/room1');

Проверь, подключится ли. Код 1006 значит, что соединение вообще не установилось.

У меня была такая же фигня! Твой setTimeout запускает fetchMessages через 8 секунд, но соединение может уже оборваться к этому времени. WebSocket должен сначала нормально подключиться. Убери setTimeout и добейся стабильного подключения. Еще проверь - сервер точно ждет такую авторизацию в URL? Может он валидирует токен и режет подключение из-за кривой base64 кодировки?

Проверь, что в итоге получается в URL. Открой инспектор браузера, зайди в Network и посмотри, какой адрес там формируется. Скорее всего, JSP-теги обрабатываются криво, и получается что-то вроде ws://127.0.0.1:8080null/websocket/.... И добавь обработчик beforeunload, чтобы сокет нормально закрывался при перезагрузке.