在Node.js express网站中实时更新数据

Question

我想要实现一个很简单的功能，但是所有的教程和示例看起来都太繁琐。

我的需求是： 定期获取天气信息，并在每次获取后更新网页上的文本，而无需用户手动刷新浏览器。

几乎所有关于实时数据更新的教程都推荐使用socket.io，我尝试了一下，但我无法获得想要的效果，开始认为可能有更简单的方法，socket.io可能不是最好的选择。有任何建议吗？如何让网站上的简单文本行自动更新，而不需要用户手动刷新页面？

我的天气脚本:

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


function refreshWeather() {
    var temperature = getTemperature();
    io.sockets.emit('broadcast', {
        temperature : temperature
    });
}

我的玉脚本：

doctype html
html
  head
    link(rel='stylesheet', href='/css/index.css')
    title Dashboard
  body
    script(src='/socket.io/socket.io.js')
    script.
      var socket = io();
      socket.on('broadcast', function (data) {
      // UPDATE WEATHER HERE
      });

    .main-content
      h1 Weather is: // I WANT THIS TO BE UPDATED

- Shard

Answer 1

您可以：

• 放弃使用socket.io。
• 创建一个用于检索温度的终点。
• 在前端进行一些轮询。

后端代码可能如下所示：

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

app.get('/weather', function (req, res) { 
    res.send(getTemperature()) 
});

前端可能看起来像这样：

doctype html
html
  head
    link(rel='stylesheet', href='/css/index.css')
    title Dashboard
  body
    .main-content
      h1(id='weather') Weather is: // I WANT THIS TO BE UPDATED
    script.
      setInterval(function () {
        fetch('/some/url', {
          method: 'get'
        }).then(function(response) {
          // UPDATE WEATHER HERE
          document.getElementById('weather').innerHTML = response
        }).catch(function(err) {
          // Error :(
        });
      }, 1000) // milliseconds

代码完全未经测试，请尽量不要复制粘贴 - 而是进行适应。此外，如果您打算使用fetch API，您可能需要使用polyfill，否则，只需使用普通的ajax。

- m-a-r-c-e-l-i-n-o

---

在这种情况下，/some/url 是否必须为 /temperature？此外，我的主要问题是我不知道如何在获取数据后更新前端。您能否详细说明前端代码？例如，如何在网站中显示响应文本。 - Shard

@Shard 没问题，我刚刚编辑了答案，包括前端更新。基本上，你需要与 [D.O.M.] 交互。我给 h1 元素分配了一个 id 名称为 "weather"。使用 "document.getElementById('weather')" 获取元素的引用，并使用服务器文本更新其 "innerHTML" 属性。由于你的问题更多是关于 socket.io 的替代方案，请考虑另外提出一个问题来解决你的 (D.O.M.) 相关问题，并考虑将此问题标记为正确 (点击问题左上角的复选标记)。希望这可以帮助到你。 - m-a-r-c-e-l-i-n-o

在 Node 还是浏览器中？"document" 全局变量应该在浏览器（前端）中可用，你可能正在做一些奇怪的事情。 - m-a-r-c-e-l-i-n-o

抱歉，我有一段旧代码。您的答案解决了问题，谢谢！ :) - Shard