從 node.js 向客戶端 js 發送數據的最佳方式

Question

將一些數據（理想情況下以 json 對象的形式）從 node.js 服務器發送到客戶端的 javascript 的最佳方式是什么。 我已經想到了幾個選項，但在我看來，它們似乎都不是很合適。 第二種意見或其他一些建議是我正在尋找的。

1. 讓服務器在<script>標簽中輸出一些代碼來設置全局變量。

   我以前使用過這個，但我不喜歡它的想法，主要是因為它有可能導致 XSS，而且我認為這是不好的做法，即使發送的數據不是由用戶定義的。

2. 使用其中的數據設置 cookie。

   這個選項好一點，但由於數據可能會隨着每個頁面加載而改變（至少在我的設置中），它並不真正適合，因為在我看來，cookie 不應該如此不穩定。

3. 讓客戶端javascript在頁面加載時向服務器發出ajax請求以請求json文件。

   這也有效，但它增加了很多不必要的開銷。 每頁 2 個請求似乎沒有必要。

背景：

我有一個帶有 2 個模板的站點：一個用於注銷用戶的索引和一個主要內容模板。

我的服務器端是基於 node.js、express.js、jade 等構建的。

我將 history.pushState 用於我的所有鏈接和 crossroads.js 用於客戶端的頁面路由。 我希望能夠發送加載的模板和用戶的 id/如果他們登錄到客戶端 javascript，因此它可以相應地處理頁面更改。 注銷的用戶可以查看內容頁面，只是沒有編輯權限，點擊某些鏈接應該會將他們帶回索引模板。

Answer 1

只需將一次性數據包含在類型為“text/template”或“application/json”的<script > 標簽中，並確保它們具有 ID。 使用 jQuery 或標准 DOM 方法訪問它們的內容。 對於較短的數據位，您可以在關鍵元素上使用data-*屬性。

Answer 2

<script>標簽方法很好。 如果您擔心其他腳本訪問數據，那么不要設置全局變量，而是在您的客戶端 js 代碼中編寫一個可以接受數據的函數。

因此，而不是生成：

<script>
  data = { foo : "bar" }
</script>

生成這樣的東西：

<script>
  setData({ foo : "bar" });
</script>

顯然，我認為我不需要告訴您您生成的任何數據都應該由適當的 JSON 序列化程序序列化以避免語法錯誤等。

Answer 3

您可以使用Socket.io或Now （實現 socket.io。它們不僅允許您輕松地在客戶端和服務器之間來回傳遞數據，而且還允許客戶端調用服務器上的函數，而不是 Ajax）

Answer 4

一種方法是使用隱藏段落來保存分隔字符串。

我喜歡用不可能嵌入到我的數據元素中的字符來分隔我的字符串。

我最喜歡的分隔符是：

char delim = (char) 1;  // the SOH character of the ASCII character map

腳本標記不是一個好的選擇，因為有太多的分隔符，並且這些分隔符之一很可能嵌入到您的數據元素之一中。

使用 JSON 也有同樣的問題：分隔符太多。

一個隱藏的 HTML 段落元素得到了我的投票。

服務器端：

在id="hiddenStrings" style="visibility:hidden"的div放置包含列和值的段落

    p id="delimitedColumnNames"> @Model._ticket.GetDelimitedColumns() /p
    p id="delimitedCoulmnValues"> @Model._ticket.GetDelimitedValues() /p

客戶端：

// The leading character is the delimiter.
var delimiter = document.getElementById("delimitedColumnNames").innerHTML.substr(0,1);
var delimited = document.getElementById("delimitedColumnNames").innerHTML.substr(1);
var ticketCols = delimited.split(delimiter);

var delimiter = document.getElementById("delimitedCoulmnValues").innerHTML.substr(0,1);
var delimited = document.getElementById("delimitedCoulmnValues").innerHTML.substr(1);
var ticketValues = delimited.split(delimiter);