使用動態內容加載頁面

Question

我一直在爲使用Bukkit的幾個Minecraft服務器開發一個項目。我試圖創建一個包含服務器世界的動態地圖的網頁，以及一個實時事件更新系統，其中<div>隨着服務器上的事件發生而更新。爲了簡要介紹我的系統如何工作，Minecraft服務器通過UDP數據包在同一網絡上與Node.js網絡服務器通信，Node.js網絡服務器使用這些數據包構建包含事件信息的JavaScript對象。然後存儲對象，並在請求頁面時傳遞給Jade。 Jade負責模板。

我想要做的是動態更新此頁面，以便用戶不必刷新整個頁面來更新事件列表。我試圖實現的東西就像Facebook的代號，每當Facebook的朋友做一些事情，比如發佈狀態，評論帖子或者「喜歡」帖子時，都會更新。

在閱讀this question on SO，我已經得出結論，我需要使用長輪詢的PHP腳本，但我不知道如何使用PHP在Node.js的書面幾乎完全是一個網絡服務器整合我怎麼能這樣做呢？

---

編輯：
我已經在客戶方代碼遇到了問題。

這是腳本塊：

script(src='/scripts/jadeTemplate.js') 
script(src='/socket.io/socket.io.js') 
script(type='text/javascript') 
    var socket = io.connect(); 
    socket.on('obj', function(obj) { 
    var newsItem = document.createElement("item"); 
    jade.render(newsItem, 'objTemplate', { object: obj }); 
    $('#newsfeed').prepend(newsItem); 
    console.log(obj); 
    alert(obj); 
    }); 

這是objTemplate.jade：

p #{object} 
// That's it. 

當alert()和console.log()放置在腳本的頂部，它警報和日誌，但在底部，他們不執行（因此，我認爲這是一個問題，無論是創建newsItem，jade.render()，還是前置。

如果我需要提供更多的片段或文件，請告訴我。我仍然在修補，所以我可以自己解決，但除非我更新，我仍然需要幫助。 :)

Answer 1

我想跳過PHP並看看socket.io。它儘可能使用websockets，但在必要時會回退到長輪詢，並且客戶端庫非常易於使用。

只要您的node.js服務器有一個新對象準備就緒，它會將其推送到所有連接的瀏覽器。使用ClientJade來使用您的模板呈現對象（您可能必須將主模板的相關部分分解到它自己的文件中），然後將生成的dom元素添加到您的Feed中。首先，如果它不是這種方式，你需要將你的玉石模板的相關部分分解到它自己的文件中。稱它爲objTemplate.jade。然後使用ClientJade創建一個可以在瀏覽器中運行的已編譯模板：clientjade objTemplate.jade > jadeTemplate.js。將jadeTemplate.js放入您的公共js目錄中。

在您的節點中。JS應用，你就會有這樣的事情（僞的codeY）：

var io = require('socket.io').listen(httpServer); 

listenForUDPPackets(function(obj) { 
    saveObjSomewhere(obj); 
    io.sockets.emit('obj', obj); 
}); 

然後在客戶端上，這樣的事情：

<script src="/js/jadeTemplate.js"></script> 
<script src="/socket.io/socket.io.js"></script> 
<script> 
    var socket = io.connect(); 
    socket.on('obj', function(obj) { 
     var newsItem = document.createElement(); 
     jade.render(newsItem, 'objTemplate', obj); 
     $('#newsFeed').prepend(newsItem); 
    }); 
</script>