如何实时更新 JSON 响应（Express NodeJS）答案

【问题标题】：How to live update a JSON response (Express NodeJS)如何实时更新 JSON 响应（Express NodeJS）
【发布时间】：2017-03-03 05:05:26
【问题描述】：

基本上我想做的是在用户访问 / 时使用 express 返回一个 JSON 对象。我知道如何发送 Hello World 之类的内容，甚至是整个文件，但我不知道如何仅发送 JSON 对象（例如 {"foo":1}），以便我可以在客户端更新数据。例如。假设当用户访问 / 时，我已经快速发送了上述 JSON ({"foo":1})。然后如何更改 foo 的值（例如，每秒递增一次）并返回它，而无需客户端重新加载他们的页面？

【问题讨论】：

您需要阅读网络套接字。 Web 套接字允许在浏览器和服务器之间进行异步通信。
“无需客户端重新加载页面”的关键字是AJAX。现在很常见，但是 ajax 请求是从客户端发起的。如果您还希望客户端侦听来自服务器的更改（无需发起请求），那么我会查找 socket.io（这是实现 Websockets HeadCode 提到的一种方法）。
@ippi socket.io 在这种情况下不起作用，因为我只能发送一个 JSON 对象，例如{"foo":1} 不是整个页面。
另一种方法是每秒发出一个 ajax 请求并根据 JSON 响应更新一个 javascript 变量，但我不知道io.emit('foo', 1); 将如何发送“整个页面”。或者也许我读错了你的问题。
@HittmanA Web 套接字正是用于小消息。不是整个网页。

标签： json node.js express

【解决方案1】：

您可以在此处找到一些有用的信息以及您需要的示例。

http://hungtran.co/long-polling-and-websockets-on-nodejs/

【讨论】：

虽然您的答案是 100% 正确的，但如果该链接被移动、更改、合并到另一个链接或主站点消失，它也可能 100% 无用... :-( 因此，请edit您的回答，并将链接中的相关步骤复制到您的回答中，从而保证您在本站100%的生命周期内回答！;-)您始终可以将链接留在答案底部作为材料来源...

【解决方案2】：

所以，假设你的 express 后端有这样的东西：

var obj = {foo: 1};
setInterval(
  function(){ obj.foo++; }),
  1000
);

app.route('/').get(function(req, res, next) {
  res.json(obj);
});

假设您正在使用 ajax 提取数据。（使用 jQuery，因为纯 javascript ajax 会变得冗长。）

<script>
    var foo = 0;
    $.get( "http://backend:3000/", function( data ) {
        foo = data.foo;
    });
</script>

如果您想保持 foo 的更新，您可以进行“长轮询”（每隔几秒不断请求数据并更新它）：

function updateFoo(){
    $.get( "http://backend:3000/", function( data ) {
        foo = data.foo;

        // Expect each request to take some time as well...            
        setTimeout( updateFoo, 1000); 
    });
}
updateFoo(); // Call once to start polling.

我们曾经这样做是因为服务器无法向客户端发起请求。因此，每次您想要更新时，您都必须提出要求。随着您的应用程序的增长以及许多用户的使用，服务器也会感到恼火，这样做会变得很混乱。（别戳我了！）

但是现在我们有 websockets。使用 node.js socket.io 真的很合适。至于您关于发送整个页面的评论，我猜您指的是 socket.io get-started-example：

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

// I assume you are refering to this? 
// It's only purpouse is to serves the front-end to the user. 
// If you are serving your app using Apache or perhaps Nginx, then you can remove it.
app.get('/', function(req, res){
  res.sendfile('index.html');
});

io.on('connection', function(socket){
  console.log('a user connected');
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

如果你分离前端和后端，那么你还需要将你的客户端脚本指向你的 socket-io 后端：

<script>
  // As opposed to just "io();" when express is serving both front and back:
  var socket = io('http://backend:3000');  

  socket.on('foo', function (data) {
    console.log(data);
  });
</script>

【讨论】：