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()自动为您执行此操作。

Javascript：动态更改消息的颜色

1 个答案: