Проблема с WebSocket

Question

У меня есть функция отправки сообщения через WebSocket, но возникает проблема: при нажатии на кнопку отправки страница перезагружается. Вот мой код:

javascript

sendButton.onclick = function(event) {
    event.preventDefault(); // Предотвращаем действие по умолчанию
    event.stopPropagation(); // Остановит дальнейшую обработку события
    console.log('Кнопка нажата'); // Проверка
    const message = messageInput.value.trim();

    if (message) {
        const data = {
            command: "sendMessage",
            user_id: userId,
            receiver: receiverId,
            text: message
        };

        socket.send(JSON.stringify(data));
        messageInput.value = ''; // Очищаем поле ввода после отправки
    }
};

HTML:

html

<div class="input-area">
    <input type="text" id="messageInput" placeholder="Введите сообщение...">
    <button class="send-button" id="sendButton" type="button">Отправить</button>
</div>

Серверная часть:

python

elif data["command"] == "sendMessage":
    sender = data["user_id"]
    receiver = data["receiver"]
    text = data["text"]
    await send_message_with_chat_creation(sender, receiver, text)
    cursor.execute("INSERT INTO messages (sender, receiver, text) VALUES (?, ?, ?)", (sender, receiver, text))
    conn.commit()

    await websocket.send_text(json.dumps({
        "status": "success",
        "command": "messageSent",
        "message": text
    }))

Несмотря на использование event.preventDefault(), при выполнении строки socket.send(JSON.stringify(data)); происходит перезагрузка страницы. Как это можно исправить?

Answer 1

Проблема в том, что вы не прерываете отправку, а прерываете событие клика, которого по сути то и нет. onclick это не то же самое, что onsubmit.

Хотя в вашем коде я не вижу вообще form, и по идее браузер не должен вообще перезагружать страницу, но могу предположить, что вы просто не совсем точно приложили HTML код и там всё-таки есть форма которую браузер отправляет и надо гасить событие submit.

Можете попробовать так, Обработчик на событие submit формы: Если ваша кнопка находится в форме, вам следует предотвратить действие по умолчанию не только для кнопки, но и для всей формы:

const form = document.querySelector('.input-area'); // тут по идее селектор формы     
  form.onsubmit = function(event) {
  event.preventDefault(); // Предотвращаем отправку формы
};

Ну и послушаем клик

sendButton.addEventListener('click', function(event) {
event.preventDefault();
console.log('Кнопка нажата');
const message = messageInput.value.trim();

if (message) {
    const data = {
        command: "sendMessage",
        user_id: userId,
        receiver: receiverId,
        text: message
    };

    socket.send(JSON.stringify(data));
    messageInput.value = '';
}
});

БЛОГ НА HUSL

Проблема с WebSocket

Ответы (1 шт):