我正在使用带有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等前端框架。

10-05 20:36
查看更多