Javascript: динамическое изменение цвета сообщений

-1

Я новичок в мире javascript и нуждаюсь в некоторой помощи. То, что я пытаюсь создать, - это небольшое приложение для телеметрии, основанное на веб-приложении. Поэтому я установил node.js и включенные библиотеки.Javascript: динамическое изменение цвета сообщений

1) Мой вопрос заключается в том, как отправлять сообщения клиентам, которые меняют свой цвет, чтобы получить хороший обзор.

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

server.js

var io = require('socket.io') (5000), 
 
    sockets = []; 
 

 
io.on('connection', function (socket) { 
 
    
 
    sockets.push(socket); 
 
    socket.on('message', function (message) { 
 
     for (var i = 0; i < sockets.length; i++) { 
 
      sockets[i].send(message); 
 
\t } 
 
}); 
 
\t socket.on('disconnect', function() { 
 
\t  for (var i = 0; i < sockets.length; i++) { 
 
\t \t if (sockets[i].id === socket.id) { 
 
\t \t sockets .splice(i, 1); 
 
\t \t } 
 
\t  } 
 
\t \t console.log('The socket disconnected. There are ' + sockets.length + 'connected sockets'); 
 
}); 
 
    }); 
 

 
setInterval(function() { 
 
\t sockets.forEach(socket => { 
 
\t \t socket.send('Throttle' + " " + '15.5' + " " + 'WheelSpeedLeft' + " " + '643' 
 
\t \t    + " " + 'WheelSpeedRight' + " " + '532'); 
 

 
\t   }); 
 

 

 
}, 1000);

<!DOCTYPE html> 
 
<html> 
 
    <head>Telemetry App</head> 
 
    <body> 
 
     <form id="my-form"> 
 
\t <textarea id="message" placeholder="Message"></textarea> 
 
\t <p> 
 
\t <button type="submit">Send</button> 
 
    </p> 
 
</form> 
 

 
<div id="messages"></div> 
 

 
<script src="http://localhost:5000/socket.io/socket.io.js"></script> 
 
<script> 
 
var socket = io('http://localhost:5000'); 
 
socket.on('connect', function() { 
 

 
    document 
 
    .getElementById('my-form') 
 
    .addEventListener('submit', function (e) { 
 
     e.preventDefault(); 
 
     socket.send(document.getElementById('message').value); 
 
}); 
 

 
socket.on('message', function (message) { 
 
var messageNode = document.createTextNode(message), 
 
    messageElement = document.createElement('p'); 
 

 
    messageElement.appendChild(messageNode); 
 
    document.getElementById('messages').appendChild(messageElement); 
 
}); 
 
}); 
 
</script> 
 
</body> 
 
</html>

комментарий от 6 февраля 2017 года

function trimOldMessages(limit) { 
 
\t \t var count = 0; 
 
\t \t for(var i = 0; i < msgs.length; ++i) 
 
\t \t \t if(msgs[i]== 10) 
 

 
    \t \t var msgs = document.querySelectorAll('#messages p'); 
 
    \t \t const nodelist = document.querySelectorAll('div'); // convert from a nodeList to an actual array 
 
    \t \t msgs = Array.prototype.slice(msgs); 
 
    \t \t while(msgs.length > limit) { 
 
     \t var oldMsg = msgs.shift(); 
 
     \t oldMsg.parentNode.removeChild(oldMsg);

источник

2017-01-28 vceli1jn

Мой вопрос заключается в том, как отправлять сообщения клиентам, которые меняют свой цвет , чтобы получить хороший обзор.

Когда вы отправляете сообщение с сервера, вам не нужно отправлять только строку. Вы можете отправить объект, который содержит как вашу строку и ваш желаемый цвет:

let msg = 'Throttle' + " " + '15.5' + " " + 'WheelSpeedLeft' + " " + '643' 
        + " " + 'WheelSpeedRight' + " " + '532'; 
socket.emit("message", {msg: msg, color: "blue"});

Примечание: socket.io использует метод .emit() не .send() для передачи данных и метод принимает два аргумента - имя сообщения и данные.

Затем, в клиенте, вы можете использовать этот цвет, чтобы влиять на дисплей:

socket.on('message', function(data) { 

    var messageNode = document.createTextNode(data.msg), 
     messageElement = document.createElement('p'); 

    messageElement.style.color = data.color; 
    messageElement.appendChild(messageNode); 
    document.getElementById('messages').appendChild(messageElement); 
});

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

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

function trimOldMessages(limit) { 
    var msgs = document.querySelectorAll('#messages p`); 
    // convert from a nodeList to an actual array 
    msgs = Array.prototype.slice(msgs); 
    while(msgs.length > limit) { 
     var oldMsg = msgs.shift(); 
     oldMsg.parentNode.removeChild(oldMsg); 
    } 
}

И, вы могли бы назвать это право после того, как вы вставите новое сообщение:

socket.on('message', function (data) { 

    var messageNode = document.createTextNode(data.msg), 
     messageElement = document.createElement('p'); 

    messageElement.style.color = data.color; 
    messageElement.appendChild(messageNode); 
    document.getElementById('messages').appendChild(messageElement); 
    trimOldMessages(100); 
});

Различные замечания по поводу вашего кода:

Socket.io использует .emit(), чтобы отправить сообщение, не .send().
.emit() принимает два аргумента, имя сообщения и некоторые данные. Затем другой конец соединения должен прослушивать это имя сообщения.
Ваш интервал отправляет один и тот же текст снова и снова.Я предполагаю, что вы хотите, чтобы эта строка была динамически создана из некоторых серверных данных.
Если вы просто хотите отправить всем клиентам соединения, вам не нужно сохранять свой собственный список сокетов для этого. Socket.io может сделать это автоматически для вас с io.sockets.emit().

источник

2017-01-28 19:29:43 jfriend00

Я знаю, что мой интервал посылает один и тот же текст снова и снова, но я так хотел, потому что приложение телеметрии просто для наблюдения, чтобы знать, что делает маленький беспроводной автомобиль с телеметрической коробкой во время движения каждую секунду , Когда я открываю index.html, консоль отладчика говорит, что «функция trimOldMessages (limit)» не определена. Нужно ли считать массив после преобразования nodeList в массив? – vceli1jn

@ vceli1jn -I дал вам код для 'trimOldMessges()'. Если вы получаете эту ошибку, вы не должны помещать этот код в нужное место в файле клиента. Я не могу помочь отлаживать код, когда вы не показываете точный код, который вы сейчас пытаетесь использовать. – jfriend00

Я попытался отобразить 10 сообщений, и после 10-го сообщения я хочу, чтобы старые были удалены, поэтому я могу увидеть новые десять сообщений. В противном случае мне нужно прокрутить вниз, чтобы увидеть новейшие данные телеметрии. Мой код: – vceli1jn

Javascript: динамическое изменение цвета сообщений

ответ

Смежные вопросы