Node.js 익스프레스 웹 사이트에서 실시간으로 데이터 업데이트

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 

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 만 사용하면됩니다.