Сохранение открытого соединения в приложении Node.js

Question

Я хочу создать модуль, который будет поддерживать открытое соединение с Flickr API и получать новые фотографии. Я попробовал модуль узла 'agentkeepalive', но облачный фронт, кажется, блокирует запросы. Вот как выглядит мой текущий код модуля, очевидно, что выборка теперь выполняется только один раз:

На стороне сервера

require('dotenv').config()
var Flickr = require('flickr-sdk')
var flickr = new Flickr(process.env.FLICKR_API_KEY)

var express = require('express')
var app = express()

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', 'http://localhost:3000')
  res.header(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept',
  )
  next()
})

app.get('/fetch', function(req, res) {
  (() =>
    flickr.photos
      .getRecent()
      .then(result => {
        return res.send(result.body.photos.photo)
      })
      .catch(err => {
        console.error('Error: ', err)
      }))()
})

const PORT = process.env.PORT || 5000

app.listen(PORT, () => console.log(`Server started on port ${PORT}`))

На стороне клиента

import './App.css'
import 'bootstrap/dist/css/bootstrap.css'
import React, { Component } from 'react'
import axios from 'axios'

export class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      fetchClicked: false,
      photos: [],
    }
  }

  onFetchClick = () => {
    this.state.fetchClicked
      ? this.setState({ fetchClicked: false })
      : this.setState({ fetchClicked: true }, () => {
          axios.get('http://localhost:5000/fetch').then(response => {
            this.setState({
              photos: response.data,
            })
          })
        })
  }

  render() {
    const { fetchClicked } = this.state
    return (
      <div className="App p-5 bg-secondary">
        <h1>Flickr Streamer </h1>
        {fetchClicked ? (
          <button className="btn btn-info" disabled>
            Streaming...
          </button>
        ) : (
          <button className="btn btn-info " onClick={() => this.onFetchClick()}>
            Start the stream!
          </button>
        )}

        <div>{this.state.dataReceived}</div>
        <table className="table table-dark mt-5">
          <thead>
            <tr>
              <th scope="col">Photo</th>
              <th scope="col">Title</th>
            </tr>
          </thead>

          <tbody>
            {this.state.photos.map(item => {
              return (
                <tr key={item.id}>
                  <td>
                    <img
                      src={`https://farm${item.farm}.staticflickr.com/${item.server}/${item.id}_${item.secret}.jpg`}
                    />
                  </td>
                  <td scope="row" className="w-50">
                    {item.title || 'No name'}
                  </td>
                </tr>
              )
            })}
          </tbody>
        </table>
      </div>
    )
  }
}

export default App

Answer 1

Опрос - обычно способ сделать это. Вот как я бы это сделал:

fetch = () => axios.get('http://localhost:5000/fetch')
  .then(({data}) => this.setState({ photos:data })

onFetchClick = () => 
    this.setState({ fetchClicked: !this.state.fetchClicked }),
    () => this.fetch()
      .then(() => setInterval(() => this.fetch(), 15 * 1000))

Это не относится к тому, что пользователь нажимает кнопку более одного раза, но если этот обратный вызов выполняется только при изменении состояния, или вы отключаете кнопку, когда она нажал, что будет обработано для вас этим. В противном случае вам придется справиться с этим.