Keeping an open connection in Node.js app - node.js

Question

I want to create a module, which keeps an open connection to Flickr API and keeps on receiving new recent photos.
I've tried the 'agentkeepalive' node module, but cloudfront seems to block the requests. This is what my current module code looks like, obviously, the fetch now only runs once:
Server side
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}`))
Client side
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

Polling is usually the way to do this kind of thing. This is how I would do it:
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))
This doesn't deal with the user clicking the button more than once, but if that callback only executes if the state changed, or you disable the button when it is clicked, that would be handled for you by that. Otherwise, you'd have to handle it.