WebSockets в HTML

Двусторонняя связь между клиентом и сервером.

Базовый пример:

<div>
    <input type="text" id="messageInput" placeholder="Введите сообщение">
    <button onclick="sendMessage()">Отправить</button>
</div>
<div id="messages"></div>

<script>
const socket = new WebSocket("ws://localhost:8080");

socket.onopen = function(event) {
    console.log("WebSocket соединение установлено");
    addMessage("Система", "Соединение установлено");
};

socket.onmessage = function(event) {
    const data = JSON.parse(event.data);
    addMessage(data.user, data.message);
};

socket.onclose = function(event) {
    console.log("WebSocket соединение закрыто");
    addMessage("Система", "Соединение закрыто");
};

function sendMessage() {
    const input = document.getElementById("messageInput");
    const message = input.value;
    
    if (message) {
        socket.send(JSON.stringify({
            user: "Пользователь",
            message: message
        }));
        input.value = "";
    }
}

function addMessage(user, message) {
    const messagesDiv = document.getElementById("messages");
    const messageElement = document.createElement("div");
    messageElement.innerHTML = `<strong>${user}:</strong> ${message}`;
    messagesDiv.appendChild(messageElement);
    messagesDiv.scrollTop = messagesDiv.scrollHeight;
}

// Отправка по Enter
document.getElementById("messageInput").addEventListener("keypress", function(event) {
    if (event.key === "Enter") {
        sendMessage();
    }
});
</script>