Как добавить время отправления сообщения в Socket.io?

Question

[rinatoptimus]

Есть простейший прототип чата, как сделать так, чтобы возле сообщения выводилось время его отправки? Используется MongoDB, Socket.io
HTML:

<form id="chat">
  <input type="text" id="username" class="form-control" placeholder="Введите имя" required>
  <br>
  <div class="card">
     <div id="messages" ></div>
  </div>
  <br>
  <textarea 
    id="textarea"
    class="form-control"
    name="message"
    placeholder="Введите сообщение" 
    required></textarea>
    <br>
    <input id="sumbmit" class="btn btn-primary" type="submit" value="Отправить">
</form>

(function(){
  var element = function(id){
    return document.getElementById(id);
  }

  var status = element('status');
  var messages = element('messages');
  var textarea = element('textarea');
  var username = element('username');

  // статус по умолчанию
  var statusDefault = status.textContent;

  var setStatus = function(s){

    status.textContent = s;

    if(s !== statusDefault){
      var delay = setTimeout(function(){
        setStatus(statusDefault);
      }, 4000);
    }
  }

  // соединение с сокетом
  var socket = io.connect('http://127.0.0.1:4000');

  // проверка соединения
  if(socket !== undefined){
    console.log('Соединение установлено');

    socket.on('output', function(data){
      if(data.length){
        for(var x = 0; x < data.length; x++){
          var message = document.createElement('div');
          message.setAttribute('class', 'chat-message');

          if(x % 2 == 0) {
            message.classList.add('bg-odd');
          }

          message.textContent = data[x].name + ": " + data[x].message;
          messages.appendChild(message);
          messages.insertBefore(message, messages.firstChild);
        }
      }
    });

    // получение статуса с сервера
    socket.on('status', function(data){
      setStatus((typeof data === 'object') ? data.message : data);

      if(data.clear){
        textarea.value = '';
      }
    });

    // прослушиваем поле textarea
    textarea.addEventListener('keydown', function(event){
      if(event.which === 13 && event.shiftKey == false){
        socket.emit('input', {
          name: username.value,
          message: textarea.value
        });
        event.preventDefault();
      }
    });

    var sumbmit = document.getElementById('sumbmit');
    sumbmit.addEventListener('click', function(event){
      socket.emit('input', {
        name: username.value,
        message: textarea.value
      });
      event.preventDefault();


      var currentdate = new Date(); 
      function formatDate(date) {
        var monthNames = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];

        var day = date.getDate();
        var monthIndex = date.getMonth();
        var year = date.getFullYear();

        var timestamp =  currentdate.getHours() + ':' + currentdate.getMinutes() + ' ' + day + '.' + monthNames[monthIndex] + '.' + year;
        return timestamp;
      }

    });

  }

})();

Comments

[EEclipsEE]

А проблема в чем?

[rinatoptimus]

EEclipsEE, не знаю, как возле самого сообщения вывести дату и время.

[EEclipsEE]

вы от сервера получаете дату в событии сокета на клиенте. а дальше обычный базовый js. рисуете блок на HTML, с помощью CSS делаете стили, и черезp js используя innertext вставляете дату. Не совсем понимаю на каком этапе у вас проблема?

Answer 1

[SagePtr]

В событии на стороне сервера, где сообщение принимается и добавляется в БД, добавлять в это сообщение помимо полей user и message также поле time, в которое записывать текущее время (например через Date.now())