javascript - 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
    });
}

我的 Jade 脚本:

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

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 .