Как добавить "-" перед репликой?

Рейтинг: 1Ответов: 1Опубликовано: 22.02.2023

Как добавить "-" перед каждой репликой разных людей, однако, если несколько реплик поступает от одного человек - то после первой не ставить?

Пример:
-Привет
-Привет
 Как дела?


document.addEventListener('DOMContentLoaded', function() {

  const messagesContainer = document.querySelector("#messages_container");
  const messageInput = document.querySelector('[name=message_input]');
  const sendMessageButton = document.querySelector('[name=send_message_button]');


  let websocketClient = new WebSocket("ws://localhost:12345");

  websocketClient.onopen = () => {
    console.log("Client conntected!");
    websocketClient.send("Hello!");

    sendMessageButton.onclick = () => {
      websocketClient.send(messageInput.value);
      messageInput.value = "";
    };

  };

  websocketClient.onmessage = (message) => {
    const newMessage = document.createElement('div');
    newMessage.innerHTML = message.data;
    messagesContainer.appendChild(newMessage);
    console.log(message.data);
  }

  document.onkeydown = (e) => {
    if (e.key === 'Enter') {
      websocketClient.send(messageInput.value);
    }
  }



}, false);
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Version1</title>

  <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

  <div id="messages_container" style="border: 2px solid"></div>

  <div id="inhere">
    <input type="text" name="message_input">
  </div>

  <div id="SendButton"><input type="button" name="send_message_button" value="Send message"></div>


  <script type="application/javascript" src="websocket_client.js"></script>





</body>

</html>

javascript
Источник: Stack Overflow на русском

Ответы

▲ 0

Допустим, если имя отправившего сообщение лежит в message.nameFrom:

let last;
websocketClient.onmessage = (message) => {
  const newMessage = document.createElement('div');
  const pref = last !== message.nameFrom ? '- ' : ''; 
  last = message.nameFrom;
  newMessage.innerHTML = pref + message.data;
  messagesContainer.appendChild(newMessage);
  console.log(message.data);
}

Т.е. надо просто запоминать, кто последний и сравнивать имя нового сообщения.
Не совпадает, добавляем, совпадает, не добавляем