Javascript：動態更改消息的顏色

Question

我是javascript世界的初學者，需要一些幫助。 我試圖創建的是一個基於websocket的小型遙測應用程序。 因此，我已經安裝了node.js及其包含的庫。

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); } }); socket.on('disconnect', function() { for (var i = 0; i < sockets.length; i++) { if (sockets[i].id === socket.id) { sockets .splice(i, 1); } } console.log('The socket disconnected. There are ' + sockets.length + 'connected sockets'); }); }); setInterval(function() { sockets.forEach(socket => { socket.send('Throttle' + " " + '15.5' + " " + 'WheelSpeedLeft' + " " + '643' + " " + 'WheelSpeedRight' + " " + '532'); }); }, 1000);

 <!DOCTYPE html> <html> <head>Telemetry App</head> <body> <form id="my-form"> <textarea id="message" placeholder="Message"></textarea> <p> <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>

2017年2月6日的評論

 function trimOldMessages(limit) { var count = 0; for(var i = 0; i < msgs.length; ++i) if(msgs[i]== 10) var msgs = document.querySelectorAll('#messages p'); const nodelist = document.querySelectorAll('div'); // 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);

Answer 1

我的問題是如何將消息發送給更改顏色的客戶以獲得良好的概覽。

從服務器發送消息時，不必只發送字符串。 您可以發送一個既包含字符串又包含所需顏色的對象：

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()自動為您完成io.sockets.emit() 。

Javascript：動態更改消息的顏色

問題描述

1 個解決方案

解決方案1
2 2017-01-28 19:29:43

Javascript：動態更改消息的顏色

問題描述

1 個解決方案

解決方案1 2 2017-01-28 19:29:43

解決方案1
2 2017-01-28 19:29:43