Javascript：动态更改消息的颜色

Question

I am a beginner in the javascript world and need some help. 我是javascript世界的初学者，需要一些帮助。 What I am trying to create is a small websocket based telemetry app. 我试图创建的是一个基于websocket的小型遥测应用程序。 Therefore I have installed node.js and the including libraries. 因此，我已经安装了node.js及其包含的库。

1)My question is how to send messages out to clients which change their colour to get a good overview. 1）我的问题是如何向客户发送消息，这些消息会改变客户的颜色以获得良好的概览。

2)Additionally I want to know how to clear the messages to prevent memory overload. 2）此外，我想知道如何清除消息以防止内存过载。

server.js 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>

comment from 6th February, 2017 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

My question is how to send messages out to clients which change their colour to get a good overview. 我的问题是如何将消息发送给更改颜色的客户以获得良好的概览。

When you send the message from the server, you don't have to send only a string. 从服务器发送消息时，不必只发送字符串。 You can send an object that contains both your string and your desired color: 您可以发送一个既包含字符串又包含所需颜色的对象：

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

Note: socket.io uses the .emit() method not .send() to send data and that method takes two arguments - a message name and data. 注意：socket.io使用.emit()方法而不是.send()来发送数据，并且该方法采用两个参数-消息名称和数据。

Then, in the client, you can use that color to influence the display: 然后，在客户端中，您可以使用该颜色来影响显示：

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);
});

Additionally I want to know how to clear the messages to prevent memory overload. 另外，我想知道如何清除消息以防止内存过载。

Usually, the strategy here is to set some upper limit of how many message you want to keep in the client and when you exceed that limit, just delete the oldest ones. 通常，这里的策略是设置要保留在客户端中的邮件数的上限，当超出该上限时，只需删除最旧的邮件。

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);
    }
}

And, you could call that right after you insert a new message: 而且，您可以在插入新消息后立即致电：

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);
});

Various observations about your code: 关于您的代码的各种观察结果：

Socket.io uses .emit() to send a message, not .send() . Socket.io使用.emit()发送消息，而不是.send() 。
.emit() takes two arguments, a message name and some data. .emit()接受两个参数，一个消息名称和一些数据。 The other end of the connection then must be listening for that message name. 然后，连接的另一端必须正在侦听该消息名称。
Your interval is sending the same text over and over. 您的时间间隔一遍又一遍地发送相同的文本。 I presume you want to make that string be dynamically created from some server-side data. 我假设您想使该字符串从某些服务器端数据中动态创建。
If you just want send to all connection clients, you don't need to keep your own list of sockets for that. 如果只想发送给所有连接客户端，则不需要为此保留自己的套接字列表。 Socket.io can do that automatically for you with io.sockets.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