我正在使用带有Express的NodeJS服务器,并且我想在用户决定处于活动状态时创建一个新的DOM元素,并在不处于活动状态时将其删除。活动用户应该对每个人都是全局的。还有使用事件触发器来执行此操作的方法吗?除了每隔'x'秒调用一次函数以显示activeUsers数组的当前状态外,我什么也没想到。
基本上,我希望能够从后端执行以下操作:
$('.left').prepend($('<div/>', {class: 'profTemp'}).append(
$('<img/>', {src: test.active[0].profiler, width: 40, height: 40}),
$('<span/>', {text: " " + test.active[0].userNameData})));
JS:
document.getElementById('toggle').addEventListener('click', function() {
var user = returnUser();
var profiler = returnProfiler();
var live = this.checked;
var userNameData = {
userNameData: user,
active: live,
profiler: profiler
};
$.ajax({
data: JSON.stringify(userNameData),
url: '/updateUserStatus',
method: 'POST',
contentType: 'application/json',
dataType: 'html',
success: function(response) {
}
});
});
服务器:
app.post('/updateJSON', function(req, res) {
var obj = JSON.parse(clientJSON);
var exists = false;
for(var i = 0; i < obj.clients.length; i++)
{
if(obj.clients[i].username == req.body.username)
{
obj.clients[i] = req.body;
exists = true;
$('.left').prepend($('<div/>', {class: 'profTemp'}).append(
$('<img/>', {src: test.active[0].profiler, width: 40, height: 40}),
$('<span/>', {text: " " + test.active[0].userNameData})));
}
}
if(exists == false){
obj.clients.push(req.body);
}
clientJSON = JSON.stringify(obj);
});
最佳答案
这里很少需要澄清。
首先,您无法在后端创建DOM元素并将其发送到前端。您可以在后端创建HTML并将其发送到前端,然后从该HTML在前端创建DOM元素。或者,您可以在后端上创建DOM元素,然后将它们序列化为HTML,将其发送到前端,然后在前端上创建DOM元素。
当然,从理论上讲,您可以通过一些实时API(例如WebSocket,长轮询AJAX,Socket.io等)将客户端DOM公开给后端,但这比看起来要复杂得多。
诸如此类的事情通常是通过实时API完成的,该API从服务器向客户端发送消息,将所有需要的数据序列化为JSON,然后客户端从中构建给定的DOM树,并在需要时将其追加。
您可以使用一些实时框架(例如ActionHero)来简化该过程:
https://www.actionherojs.com/
为了构建DOM,您可以使用Angular,React,Ember,Aurelia等前端框架。