如何使用 vue.js 將服務器端數據綁定到某個 html 元素

Question

我有一個服務器端節點應用程序，我想為該應用程序添加一些基本的 Web 界面。 我正在關注vue.js 入門教程，但沒有看到與我正在嘗試做的事情相關的任何內容。

想象一下，我有這個服務器端節點應用程序：

var state = { message: 'hello world', count: 0 };
function work() {
    state.message = 'hello world ' + (state.count++);
}
setInterval(work, 1000);

現在，為了添加應用程序的 Web 界面，我添加了一些基本的 http 服務器代碼：

var state = { message: 'hello world', count: 0 };
function work() {
    state.message = 'hello world ' + (state.count++);
}
setInterval(work, 1000);

var http = require('http');
var port = process.env.PORT || 1337;

http.createServer(function (req, res) {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('message: ' + state.message+'\n');
}).listen(port);

它“有效”：如果我刷新頁面，我會看到我的應用程序state的價值。 現在我想更新這個簡單的應用程序以自動更新客戶端的視圖，以反映在服務器端完成的任何狀態更改。 我可以更改該網頁以每秒自動刷新或類似的方式以反映任何服務器更改，但我正在尋找旨在做到這一點的東西。 最終，我需要使該 Web 界面能夠更改某些服務器狀態（例如更改state.count ）。 如何使用vue.js來完成，或者我應該使用其他東西，或者我應該簡單地編寫所有邏輯以使用 http POST/GET 將更新的 state.count 傳遞到我的 Web 界面？

Answer 1

你所描述的是websockets。 使用您當前的代碼，您正在創建一個連接，然后在調用res.end時關閉連接。

您需要允許服務器和前端之間打開連接而不需要持續請求的東西。 看看https://socket.io/和具體的 Vue 實現：

https://medium.com/@michaelmangial1/getting-started-with-vue-js-socket-io-8d385ffb9782