フロントエンドのバックエンドにDOM要素を作成する方法はありますか？

Question

ExpressでNodeJSサーバーを使用していて、ユーザーがアクティブであると判断したときに削除するときはいつでも、新しいDOM要素を作成する必要があります。アクティブなユーザーは、すべてのユーザーにグローバルである必要があります。イベントトリガーを使用してこれを行う方法もありますか？現在のactiveUsers配列の状態を出力する「x秒」ごとに関数を呼び出すことを除いて、私は何も考えることはできません。

は基本的に私は、バックエンドからこのような何かを行うことができるようにしたい：

$('.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要素を作成することもできます。

もちろん、WebSocket、long-polling AJAX、Socket.ioなどのリアルタイムAPIを介して、クライアントサイドのDOMをバックエンドに公開することはできますが、これは表示されるよりも複雑になります。

通常、サーバーからクライアントにメッセージを送信するリアルタイムAPIを使用してJSONとしてシリアル化されたすべてのデータがシリアル化され、クライアントはそこから特定のDOMツリーを作成し、ニーズ。

あなたは、そのプロセスを簡素化するためにActionHeroのようないくつかのリアルタイムのフレームワークを使用することができます：あなたは、角のようなフロントエンドのフレームワークを使用して反応して、エンバー、オーレリアできるDOMを構築するための

• https://www.actionherojs.com/

を、