个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
32
4
我是 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);
});
关于您的代码的各种观察:
.emit() 发送消息，而不是 .send()。.emit() 采用两个参数，一个消息名称和一些数据。连接的另一端必须监听该消息名称。关于JavaScript : dynamically changing the colour of messages，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41913366/
32
4
0
编辑:为了澄清，我想问的是:在什么情况下您会更喜欢一种语法而不是另一种语法？ 有什么区别: .trigger('change') 和 .change() 两者都按预期工作。在任何情况下语法都会有所不同
这个问题在这里已经有了答案: Difference between .on('click') vs .click() (12 个答案) 关闭 6 年前。 有什么区别: $('选择器').change
我用的是Select2-4.0.0 和 $gameSelect.select2().on("change",function(e){....} 工作正常。 但是当我将它链接起来时('change')就
有一天在#haskell 上，有人提到了当字符串改变时字符串的类型应该如何改变的概念。这让我想起了我项目中的一些代码。它一直困扰着我，我说不清为什么。我现在推测，原因是我没有实现这个概念。这是下面的代
我使用了 .on("change") 事件函数，因为我的整个代码中有一部分是动态变化的。 .trigger("change") 在 .change() 中工作正常，但在 .on("change") 中
下面是一个非常简单的表单下拉列表设置。但是，on-change 事件拒绝触发...除非它更改为 ng-change。 这让我卡住了大约一个小时，因为我们在网站的其他地方使用了相同的设置(即模型属性/列
我有两个v-model 案例一: 这很好用 案例二: 即使改变 u1 也会触发 onDateChange(); 最佳答案 :change 绑定(bind)属性，如 v-bind:change=
我找到了 .and方法对于链接许多期望非常有用。 expect { click_button 'Update Boilerplate' @boilerplate_original.reload
出于合规性原因，我需要捕获所有数据库更改。我知道 Change Feed 存储此信息(并且我正在等待完全保真度来捕获删除)。目前，我一直在通过 Function 触发器读取 Change Feed 并
我添加了一个data-ng-change='getSubjectsClasswise(classBean.class_id);'上课标签，但主题未在主题 处加载标签。 一切看起来都很好，没有遇到问题
我有一组复选框，当您单击其中一个时，它们应该全部被选中。 当用户单击一个复选框时，它会检查以该类名称开头的所有其他复选框。我想要的是用户单击一个复选框，并且每次单击仅触发一次 $(".atpSelec
我在 Stack Overflow 上阅读了很多有关此问题的内容，并应用了所有建议的解决方案(getShell pack、布局、getparent 布局等...)，但没有一个起作用。 我有一个带有文本
我想更改我的索引。我的数据框如下: partA = pd.DataFrame({'u1': 2, 'u2': 3, 'u3':4, 'u4':29, 'u5':4, 'u6':1, 'u7':323,
我有一个像这样的下拉菜单: Grade Year 旁边还有另一个下拉菜单: 3 4
这个问题已经有人问过，但我只停留在最基本的层面上。除了选择标记和尝试通过 jquery 捕获更改事件外，我没有向我的 html 添加任何内容。这是我的代码: $('#target').bin
我只是 Django 的新手几天。现在，当自定义表单中其他字段的值发生变化时，我需要同时更改一个字段中的值和表示形式。此时更改 MyModel 是受限。 我的应用程序/models.py: class
我正在使用 ListView 控件来显示一些数据行。有一个后台任务接收列表内容的外部更新。新收到的数据可能包含更少、更多或相同数量的项目，而且项目本身可能已更改。 ListView.ItemsSour
我在 android studio 中使用 git 插件。我的问题是当我提交更改列表(公开提交)时，但我在更改列表中的评论是错误的/丢失的，我想更改它。 问题: 有没有办法通过 AndroidStud
MyCustomObject * object=new MyCustomObject(); 假设我的许多类都使用了对象指针，但突然间我想在不更改地址的情况下更改指针的内容。 我认为 object =
我正在使用新的 KeyValue Observing。当变量发生变化时，我接到了我的观察者的电话，但 change struct 附带 newValue和 oldValue都为 nil ，所以它永远不
我是一名优秀的程序员,十分优秀！