Создание веб-чата с возможностью добавления различных чатов, как в популярных мессенджерах, предполагает создание HTML-шаблона и использование JavaScript для динамического добавления чатов. Ниже представлен простой пример HTML и JavaScript, который иллюстрирует создание такого интерфейса.


<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Web Chat</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
.chat-container {
display: flex;
flex-direction: row;
height: 100%;
}
.chat-list, .chat-content {
border: 1px solid #ccc;
padding: 10px;
overflow-y: auto;
}
.chat-list {
width: 30%;
max-width: 300px;
}
.chat-content {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.chat-content-body {
flex-grow: 1;
}
.chat-item {
padding: 8px;
cursor: pointer;
border-bottom: 1px solid #eee;
}
.chat-item:hover {
background-color: #f0f0f0;
}
.chat-message {
margin-bottom: 10px;
}
.input-container {
display: flex;
}
.input-container input {
flex-grow: 1;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
margin-right: 5px;
}
.input-container button {
padding: 8px 16px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.input-container button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>

<div class=“chat-container”>
<div class=“chat-list” id=“chatList”>
<!-- Dynamic chat list items will be added here -->
</div>
<div class=“chat-content” id=“chatContent”>
<div class=“chat-content-body” id=“chatContentBody”>
<!-- Dynamic chat messages will be added here -->
</div>
<div class=“input-container”>
<input type=“text” id=“messageInput” placeholder=“Type a message…”>
<button onclick=“sendMessage()”>Send</button>
</div>
</div>
</div>

<script>
const chats = {};

function addChat(chatName, messages) {
if (!chats[chatName]) {
chats[chatName] = messages || [];

const chatItem = document.createElement(‘div’);
chatItem.className = ‘chat-item’;
chatItem.innerText = chatName;
chatItem.addEventListener(‘click’, () => openChat(chatName));

document.getElementById(‘chatList’).appendChild(chatItem);
}
}

function openChat(chatName) {
const chatContentBody = document.getElementById(‘chatContentBody’);
chatContentBody.innerHTML = ‘’;

chats[chatName].forEach(message => {
const messageDiv = document.createElement(‘div’);
messageDiv.className = ‘chat-message’;
messageDiv.innerText = message;
chatContentBody.appendChild(messageDiv);
});
}

function sendMessage() {
const currentChat = document.querySelector(‘.chat-item.selected’);
if (!currentChat) return;

const messageInput = document.getElementById(‘messageInput’);
const message = messageInput.value.trim();
if (message) {
chats[currentChat.innerText].push(message);
openChat(currentChat.innerText);
messageInput.value = ‘’;
}
}

// This is a mockup for demonstration purposes.
// You can use Java code or AJAX calls to fetch actual chat data.
addChat(‘Chat One’, [‘Hello!’, ‘How are you?’]);
addChat(‘Chat Two’, [‘Hi!’, ‘What’s up?’]);
</script>

</body>
</html>



можно ли обойтись без javascript используя только java и html?