javascript - 有没有办法在后端为前端创建 DOM 元素？

Question

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

Answer 1

这里有几件事需要澄清。

首先，你不能在后端创建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 等前端框架。