Блог

Главная - Вопросы по программированию - Как проверить, отправил ли пользователь x более двух сообщений в чате, и скрыть его имя

Как проверить, отправил ли пользователь x более двух сообщений в чате, и скрыть его имя

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть чат, встроенный в JavaScript, и у меня проблема. Недавно я закодировал добавление имен пользователей поверх сообщений, и это работает отлично, но проблема в том, что я не знаю, как скрыть имя пользователя, когда он отправляет более одного сообщения, я уже пробовал это с помощью CSS, но с помощью CSS это стало бы очень запутанным, только имя пользователя.появится имя пользователя, могу ли я как-нибудь сделать это с помощью JavaScript? Я пытаюсь создать чат, подобный messenger, я бы хотел, чтобы он работал следующим образом:

Если пользователь Bob отправляет более одного сообщения, его имя должно отображаться только над первым сообщением

Если пользователь Mark отправляет сообщение, то его имя должно отображаться поверх его первого сообщения, а не в следующих сообщениях того же типа

Как я могу это сделать с помощью JavaScript? Я считаю, что с помощью CSS это практически невозможно, вы можете это проверить

Я использую сеансы PHP для отображения имени пользователя в JavaScript, поэтому я думаю, что что-то вроде localStorage мне не слишком поможет, если кто-то может мне помочь, пожалуйста, не используйте файлы cookie или сеансы JavaScript, попробуйте создать переменную с именем, если это возможно

Иллюстративное изображение

 var chat = document.getElementById('chat');
var send = document.getElementById('send');

function SendMessage(who, data) {
  var li = document.createElement('li');
  li.classList.add(who);
  var userName = document.createElement('div');
  userName.classList.add('user');
  userName.textContent = 'Mark';
  li.appendChild(userName);
  var msg = document.createElement('div');
  msg.classList.add('msg');
  var span = document.createElement('span');
  span.textContent = data.message;
  msg.appendChild(span);
  li.appendChild(msg);

  chat.appendChild(li);
}

send.addEventListener('click', function() {
  SendMessage('him', {
    message: 'I love to code'
  });
});  
 body{
  margin:0;
}

ul {
  margin: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  list-style-type: none
}

ul li {
  font-family: Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
}

ul li .user {
  font-size: 0.6em;
  color: grey;
}

.him { align-self: flex-start; }
.me  { align-self: flex-end; }

.msg {
  padding: 10px;
  border-radius: 30px;
  margin-bottom: 2px;
}

.him .user { text-align: left;  margin-left: 10px; }
.me  .user { text-align: right; margin-right: 10px; }

.him .msg { background: yellow; }
.me  .msg { background: #0084ff; color: #fff; }




.center{
    background-color:black;
    /* width:500px; */
    height:100vh;
    margin:0 auto 0 auto;
    width:100vw;
    overflow: auto;
    
}  
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>
<body>
    <div class="center">
    <ul id="chat">
        <li class="him">
          <div class="user">Bob</div>
          <div class="msg">
            <span>Hello World</span>
          </div>
        </li>
        <li class="me">
          <div class="user">Me</div>
          <div class="msg">
            <span>Hello World</span>
          </div>
        </li>
        <li class="him">
          <div class="user">Bob</div>
          <div class="msg">
            <span>How to hide the name after x user sends more than one message</span>
          </div>
        </li>
        <li class="him">
          <div class="user">Bob</div>
          <div class="msg">
            <span>How to hide the name after x user sends more than one message</span>
          </div>
        </li>
      </ul>
      <button id="send" style="float:right;">Send</button>
      </div>

</body>
</html>

Ответ №1:

Я бы проверил, кто отправил последнее сообщение, что-то вроде

 if(lastUserName == currentUserName)
   addLI()
else
  addULwithLI();

Таким образом, вы можете создать ul> li.username

     <ul  class="him">
      <li class="user">Bob</li>
     <li>
      <div class="msg">
        <span>How to hide the name after x user sends more than one message</span>
      </div>
    </li>
     <li>
      <div class="msg">
        <span>How to hide the name after x user sends more than one message</span>
      </div>
    </li>
     <li>
      <div class="msg">
        <span>How to hide the name after x user sends more than one message</span>
      </div>
    </li>
    </ul>

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

Редактировать:

 function SendMessage(who, userName, data) {
var lastUser = getLastUser();
if(userName == lastUser) {
  saveLastUser(userName);
  var li = document.createElement('li');
  li.classList.add(who);
  var msg = document.createElement('div');
  msg.classList.add('msg');
  var span = document.createElement('span');
  span.textContent = data.message;
  msg.appendChild(span);
  li.appendChild(msg);
  
  chat.appendChild(li);
 }else{
  var li = document.createElement('li');
  li.classList.add(who);
  var userName = document.createElement('div');
  userName.classList.add('user');
  userName.textContent = 'Mark';
  li.appendChild(userName);
  var msg = document.createElement('div');
  msg.classList.add('msg');
  var span = document.createElement('span');
  span.textContent = data.message;
  msg.appendChild(span);
  li.appendChild(msg);
  saveLastUser()
  chat.appendChild(li);
  }
}
function  getLastUser() {
  // get last user from saved in db.
 return localStorage.getItem('lastUser');
}
function  saveLastUser(username) {
  // save last user from saved in db.
  localStorage.setItem('lastUser',username);
}

Также сделайте js для создания html, как я упоминал, потому что его легко добавить li в Ul как поток одного и того же человека

Комментарии:

1. Это кажется полезным, но сбивает меня с толку. Так должен ли я изменить классы в CSS и создать новые функции в JavaScript? И какое значение хранить в этих переменных в структуре управления?

2. Я внес редактирование, его абстрактный код, и он работает только в вашем браузере с момента его сохранения в локальном хранилище. set и get должны быть из базы данных вместе с сообщением. Я пытаюсь направить вас в правильном направлении как логику. поиграйте с этим.

3. Пожалуйста, скажите мне, как я могу работать с этим, используя переменные в PHP? Я не хочу работать с локальным хранилищем JavaScript, поскольку мое приложение не полностью создано на JavaScript, возможно ли это сделать с помощью переменных PHP?

4. Вызов Ajax. $ajax.request(‘/somepath/); честно говоря, это сложнее, чем вы думаете, и лучше проверить любое руководство по чату, подобное этому: youtube.com/watch?v=Xq8LIOj6AWI

5. Я понимаю, большое вам спасибо за помощь, вам удалось создать хорошую логику, и я верю, что это может помочь мне в будущем, если я буду изучать более глубоко. Большое спасибо!