gpt4 book ai didi

JavaScript : dynamically changing the colour of messages

转载 作者:行者123 更新时间:2023-12-01 04:04:51 31 4
gpt4 key购买 nike

我是 javascript 世界的初学者,需要一些帮助。我想要创建的是一个基于 websocket 的小型遥测应用程序。因此我安装了node.js 和包含的库。

1)我的问题是如何向客户端发送消息,改变颜色以获得良好的概览。

2)另外我想知道如何清除消息以防止内存过载。

服务器.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);

最佳答案

My question is how to send messages out to clients which change their colour to get a good overview.

当您从服务器发送消息时,不必仅发送字符串。您可以发送一个包含字符串和所需颜色的对象:

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

Additionally I want to know how to clear the messages to prevent memory overload.

通常,这里的策略是设置客户端中要保留的消息数量的上限,当超过该限制时,只需删除最旧的消息即可。

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

关于您的代码的各种观察:

  1. Socket.io 使用 .emit() 发送消息,而不是 .send()
  2. .emit() 采用两个参数,一个消息名称和一些数据。连接的另一端必须监听该消息名称。
  3. 您的间隔是一遍又一遍地发送相同的文本。我认为您希望从某些服务器端数据动态创建该字符串。
  4. 如果您只想发送到所有连接客户端,则无需为此保留自己的套接字列表。 Socket.io 可以使用 io.sockets.emit() 自动为您完成此操作。

关于JavaScript : dynamically changing the colour of messages,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41913366/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com