如何使用 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